Skip to content

Commit

Permalink
Refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@youknowriad
youknowriad committed Apr 3, 2020
1 parent 66da488 commit 619b0dd
Show file tree
Hide file tree
Showing 9 changed files with 222 additions and 232 deletions.
127 changes: 57 additions & 70 deletions packages/block-editor/src/hooks/color.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import classnames from 'classnames';
*/
import { addFilter } from '@wordpress/hooks';
import { hasBlockSupport } from '@wordpress/blocks';
import { createHigherOrderComponent } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';

Expand Down Expand Up @@ -115,75 +114,69 @@ export function addEditProps( settings ) {
}

/**
* Override the default edit UI to include new inspector controls for block
* color, if block defines support.
* Inspector control panel containing the color related configuration
*
* @param {Function} BlockEdit Original component
* @return {Function} Wrapped component
* @param {Object} props
*
* @return {WPElement} Color edit element.
*/
export const withBlockControls = createHigherOrderComponent(
( BlockEdit ) => ( props ) => {
const { name: blockName } = props;
const colors = useSelect( ( select ) => {
return select( 'core/block-editor' ).getSettings().colors;
}, [] );

if ( ! hasBlockSupport( blockName, COLOR_SUPPORT_KEY ) ) {
return <BlockEdit key="edit" { ...props } />;
}
const { style, textColor, backgroundColor } = props.attributes;

const onChangeColor = ( name ) => ( value ) => {
const colorObject = getColorObjectByColorValue( colors, value );
const attributeName = name + 'Color';
const newStyle = {
...style,
color: {
...style?.color,
[ name ]: colorObject?.slug ? undefined : value,
},
};
const newNamedColor = colorObject?.slug
? colorObject.slug
: undefined;
props.setAttributes( {
style: cleanEmptyObject( newStyle ),
[ attributeName ]: newNamedColor,
} );
export function ColorEdit( props ) {
const { name: blockName } = props;
const colors = useSelect( ( select ) => {
return select( 'core/block-editor' ).getSettings().colors;
}, [] );

if ( ! hasBlockSupport( blockName, COLOR_SUPPORT_KEY ) ) {
return null;
}
const { style, textColor, backgroundColor } = props.attributes;

const onChangeColor = ( name ) => ( value ) => {
const colorObject = getColorObjectByColorValue( colors, value );
const attributeName = name + 'Color';
const newStyle = {
...style,
color: {
...style?.color,
[ name ]: colorObject?.slug ? undefined : value,
},
};
const newNamedColor = colorObject?.slug ? colorObject.slug : undefined;
props.setAttributes( {
style: cleanEmptyObject( newStyle ),
[ attributeName ]: newNamedColor,
} );
};

return [
<ColorPanel
key="colors"
clientId={ props.clientId }
colorSettings={ [
{
label: __( 'Text Color' ),
onChange: onChangeColor( 'text' ),
return (
<ColorPanel
key="colors"
clientId={ props.clientId }
colorSettings={ [
{
label: __( 'Text Color' ),
onChange: onChangeColor( 'text' ),
colors,
value: getColorObjectByAttributeValues(
colors,
value: getColorObjectByAttributeValues(
colors,
textColor,
style?.color?.text
).color,
},
{
label: __( 'Background Color' ),
onChange: onChangeColor( 'background' ),
textColor,
style?.color?.text
).color,
},
{
label: __( 'Background Color' ),
onChange: onChangeColor( 'background' ),
colors,
value: getColorObjectByAttributeValues(
colors,
value: getColorObjectByAttributeValues(
colors,
backgroundColor,
style?.color?.background
).color,
},
] }
/>,
<BlockEdit key="edit" { ...props } />,
];
},
'withToolbarControls'
);
backgroundColor,
style?.color?.background
).color,
},
] }
/>
);
}

addFilter(
'blocks.registerBlockType',
Expand All @@ -202,9 +195,3 @@ addFilter(
'core/color/addEditProps',
addEditProps
);

addFilter(
'editor.BlockEdit',
'core/color/with-block-controls',
withBlockControls
);
123 changes: 46 additions & 77 deletions packages/block-editor/src/hooks/font-size.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,6 @@ import classnames from 'classnames';
*/
import { addFilter } from '@wordpress/hooks';
import { hasBlockSupport } from '@wordpress/blocks';
import { createHigherOrderComponent } from '@wordpress/compose';
import { PanelBody } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';

/**
Expand All @@ -22,9 +19,9 @@ import {
getFontSizeObjectByValue,
FontSizePicker,
} from '../components/font-sizes';
import InspectorControls from '../components/inspector-controls';
import { cleanEmptyObject } from './utils';

const FONT_SIZE_SUPPORT_KEY = '__experimentalFontSize';
export const FONT_SIZE_SUPPORT_KEY = '__experimentalFontSize';

/**
* Filters registered block settings, extending attributes to include
Expand Down Expand Up @@ -66,8 +63,8 @@ function addSaveProps( props, blockType, attributes ) {
const { fontSize } = attributes;

const fontSizeClass = getFontSizeClass( fontSize );

props.className = classnames( props.className, fontSizeClass );
const newClassName = classnames( props.className, fontSizeClass );
props.className = newClassName ? newClassName : undefined;

return props;
}
Expand Down Expand Up @@ -96,77 +93,55 @@ function addEditProps( settings ) {
return settings;
}

const FontSizeInspectorControl = ( { value, onChange } ) => (
<InspectorControls key="inspector-controls">
<PanelBody title={ __( 'Text settings' ) }>
<FontSizePicker value={ value } onChange={ onChange } />
</PanelBody>
</InspectorControls>
);

const setFontSize = ( { style, setAttributes }, fontSizes ) => ( value ) => {
const fontSizeSlug = getFontSizeObjectByValue( fontSizes, value ).slug;

setAttributes( {
style: {
...style,
typography: {
...style?.typography,
fontSize: fontSizeSlug ? undefined : value,
},
},
fontSize: fontSizeSlug,
} );
};

const hasFontSizeSupport = ( blockName ) =>
hasBlockSupport( blockName, FONT_SIZE_SUPPORT_KEY );

/**
* Override the default edit UI to include inspector controls
* for font size, if block defines support.
* Inspector control panel containing the font size related configuration
*
* @param {Object} props
*
* @param {Function} BlockEdit Original component
* @return {Function} Wrapped component
* @return {WPElement} Font size edit element.
*/
const withBlockControls = createHigherOrderComponent(
( BlockEdit ) => ( props ) => {
const {
name: blockName,
attributes: { fontSize, style },
} = props;

const { fontSizes } = useSelect( ( select ) =>
select( 'core/block-editor' ).getSettings()
);

const fontSizeObject = getFontSize(
fontSizes,
fontSize,
style?.fontSize
);

if ( ! hasFontSizeSupport( blockName ) ) {
return (
<BlockEdit
key="edit"
{ ...props }
fontSize={ fontSizeObject }
/>
);
}
export function FontSizeEdit( props ) {
const {
name: blockName,
attributes: { fontSize, style },
setAttributes,
} = props;

const { fontSizes } = useSelect( ( select ) =>
select( 'core/block-editor' ).getSettings()
);

if ( ! hasFontSizeSupport( blockName ) ) {
return null;
}

return [
<FontSizeInspectorControl
key="inspector-controls"
value={ fontSizeObject.size }
onChange={ setFontSize( props, fontSizes ) }
/>,
<BlockEdit key="edit" { ...props } fontSize={ fontSizeObject } />,
];
},
'withFontSizeControlsTest'
);
const fontSizeObject = getFontSize(
fontSizes,
fontSize,
style?.typography?.fontSize
);
const onChange = ( value ) => {
const fontSizeSlug = getFontSizeObjectByValue( fontSizes, value ).slug;

setAttributes( {
style: cleanEmptyObject( {
...style,
typography: {
...style?.typography,
fontSize: fontSizeSlug ? undefined : value,
},
} ),
fontSize: fontSizeSlug,
} );
};

return (
<FontSizePicker value={ fontSizeObject.size } onChange={ onChange } />
);
}

addFilter(
'blocks.registerBlockType',
Expand All @@ -181,9 +156,3 @@ addFilter(
);

addFilter( 'blocks.registerBlockType', 'core/font/addEditProps', addEditProps );

addFilter(
'editor.BlockEdit',
'core/font/with-block-controls',
withBlockControls
);
Loading

0 comments on commit 619b0dd

Please sign in to comment.