Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Block editor: hooks: manage BlockListBlock filters in one place #56875

Merged
merged 6 commits into from
Dec 8, 2023
Merged

Block editor: hooks: manage BlockListBlock filters in one place #56875

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3aeb8dc
Block editor: hooks: manage BlockListBlock filters in one place
ellatrix Dec 7, 2023
a4662a6
Add style and align
ellatrix Dec 7, 2023
4d1f51b
Add color, border
ellatrix Dec 8, 2023
b722b46
Render in parallel
ellatrix Dec 8, 2023
f4b426b
Add font size
ellatrix Dec 8, 2023
5279781
Add layout
ellatrix Dec 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 4 additions & 37 deletions packages/block-editor/src/hooks/align.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { createHigherOrderComponent } from '@wordpress/compose';
import { addFilter } from '@wordpress/hooks';
import {
getBlockSupport,
Expand Down Expand Up @@ -155,54 +154,27 @@ function BlockEditAlignmentToolbarControlsPure( {
export default {
shareWithChildBlocks: true,
edit: BlockEditAlignmentToolbarControlsPure,
useBlockProps,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe useBlockEditProps, I can see us having useBlockSaveProps, or useBlockProps for both?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we should keep it consistent with the block API? useBlockProps and useBlockProps.save? One is a hook and the other one is static.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works for me.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But yes, it's not entirely the same so maybe a different naming is appropriate.

attributeKeys: [ 'align' ],
hasSupport( name ) {
return hasBlockSupport( name, 'align', false );
},
};

function BlockListBlockWithDataAlign( { block: BlockListBlock, props } ) {
const { name, attributes } = props;
const { align } = attributes;
function useBlockProps( { name, align } ) {
const blockAllowedAlignments = getValidAlignments(
getBlockSupport( name, 'align' ),
hasBlockSupport( name, 'alignWide', true )
);
const validAlignments = useAvailableAlignments( blockAllowedAlignments );

let wrapperProps = props.wrapperProps;
if ( validAlignments.some( ( alignment ) => alignment.name === align ) ) {
wrapperProps = { ...wrapperProps, 'data-align': align };
return { 'data-align': align };
}

return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
return {};
}

/**
* Override the default block element to add alignment wrapper props.
*
* @param {Function} BlockListBlock Original component.
*
* @return {Function} Wrapped component.
*/
export const withDataAlign = createHigherOrderComponent(
( BlockListBlock ) => ( props ) => {
// If an alignment is not assigned, there's no need to go through the
// effort to validate or assign its value.
if ( props.attributes.align === undefined ) {
return <BlockListBlock { ...props } />;
}

return (
<BlockListBlockWithDataAlign
block={ BlockListBlock }
props={ props }
/>
);
},
'withDataAlign'
);

/**
* Override props assigned to save component to inject alignment class name if
* block supports it.
Expand Down Expand Up @@ -237,11 +209,6 @@ addFilter(
'core/editor/align/addAttribute',
addAttribute
);
addFilter(
'editor.BlockListBlock',
'core/editor/align/with-data-align',
withDataAlign
);
addFilter(
'blocks.getSaveContent.extraProps',
'core/editor/align/addAssignedAlign',
Expand Down
117 changes: 47 additions & 70 deletions packages/block-editor/src/hooks/border.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import classnames from 'classnames';
*/
import { getBlockSupport } from '@wordpress/blocks';
import { __experimentalHasSplitBorders as hasSplitBorders } from '@wordpress/components';
import { createHigherOrderComponent, pure } from '@wordpress/compose';
import { pure } from '@wordpress/compose';
import { Platform, useCallback, useMemo } from '@wordpress/element';
import { addFilter } from '@wordpress/hooks';
import { useSelect } from '@wordpress/data';
Expand Down Expand Up @@ -330,72 +330,55 @@ function addEditProps( settings ) {
return settings;
}

/**
* This adds inline styles for color palette colors.
* Ideally, this is not needed and themes should load their palettes on the editor.
*
* @param {Function} BlockListBlock Original component.
*
* @return {Function} Wrapped component.
*/
export const withBorderColorPaletteStyles = createHigherOrderComponent(
( BlockListBlock ) => ( props ) => {
const { name, attributes } = props;
const { borderColor, style } = attributes;
const { colors } = useMultipleOriginColorsAndGradients();

if (
! hasBorderSupport( name, 'color' ) ||
shouldSkipSerialization( name, BORDER_SUPPORT_KEY, 'color' )
) {
return <BlockListBlock { ...props } />;
}
function useBlockProps( { name, borderColor, style } ) {
const { colors } = useMultipleOriginColorsAndGradients();

const { color: borderColorValue } = getMultiOriginColor( {
colors,
namedColor: borderColor,
} );
const { color: borderTopColor } = getMultiOriginColor( {
colors,
namedColor: getColorSlugFromVariable( style?.border?.top?.color ),
} );
const { color: borderRightColor } = getMultiOriginColor( {
colors,
namedColor: getColorSlugFromVariable( style?.border?.right?.color ),
} );

const { color: borderBottomColor } = getMultiOriginColor( {
colors,
namedColor: getColorSlugFromVariable(
style?.border?.bottom?.color
),
} );
const { color: borderLeftColor } = getMultiOriginColor( {
colors,
namedColor: getColorSlugFromVariable( style?.border?.left?.color ),
} );

const extraStyles = {
borderTopColor: borderTopColor || borderColorValue,
borderRightColor: borderRightColor || borderColorValue,
borderBottomColor: borderBottomColor || borderColorValue,
borderLeftColor: borderLeftColor || borderColorValue,
};
const cleanedExtraStyles = cleanEmptyObject( extraStyles ) || {};

let wrapperProps = props.wrapperProps;
wrapperProps = {
...props.wrapperProps,
style: {
...props.wrapperProps?.style,
...cleanedExtraStyles,
},
};
if (
! hasBorderSupport( name, 'color' ) ||
shouldSkipSerialization( name, BORDER_SUPPORT_KEY, 'color' )
) {
return {};
}

return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
const { color: borderColorValue } = getMultiOriginColor( {
colors,
namedColor: borderColor,
} );
const { color: borderTopColor } = getMultiOriginColor( {
colors,
namedColor: getColorSlugFromVariable( style?.border?.top?.color ),
} );
const { color: borderRightColor } = getMultiOriginColor( {
colors,
namedColor: getColorSlugFromVariable( style?.border?.right?.color ),
} );

const { color: borderBottomColor } = getMultiOriginColor( {
colors,
namedColor: getColorSlugFromVariable( style?.border?.bottom?.color ),
} );
const { color: borderLeftColor } = getMultiOriginColor( {
colors,
namedColor: getColorSlugFromVariable( style?.border?.left?.color ),
} );

const extraStyles = {
borderTopColor: borderTopColor || borderColorValue,
borderRightColor: borderRightColor || borderColorValue,
borderBottomColor: borderBottomColor || borderColorValue,
borderLeftColor: borderLeftColor || borderColorValue,
};

return { style: cleanEmptyObject( extraStyles ) || {} };
}

export default {
useBlockProps,
attributeKeys: [ 'borderColor', 'style' ],
hasSupport( name ) {
return hasBorderSupport( name, 'color' );
},
'withBorderColorPaletteStyles'
);
};

addFilter(
'blocks.registerBlockType',
Expand All @@ -414,9 +397,3 @@ addFilter(
'core/border/addEditProps',
addEditProps
);

addFilter(
'editor.BlockListBlock',
'core/border/with-border-color-palette-styles',
withBorderColorPaletteStyles
);
120 changes: 49 additions & 71 deletions packages/block-editor/src/hooks/color.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import classnames from 'classnames';
import { addFilter } from '@wordpress/hooks';
import { getBlockSupport } from '@wordpress/blocks';
import { useMemo, Platform, useCallback } from '@wordpress/element';
import { createHigherOrderComponent, pure } from '@wordpress/compose';
import { pure } from '@wordpress/compose';
import { useSelect } from '@wordpress/data';

/**
Expand Down Expand Up @@ -364,72 +364,56 @@ function ColorEditPure( { clientId, name, setAttributes, settings } ) {
// and not the whole attributes object.
export const ColorEdit = pure( ColorEditPure );

/**
* This adds inline styles for color palette colors.
* Ideally, this is not needed and themes should load their palettes on the editor.
*
* @param {Function} BlockListBlock Original component.
*
* @return {Function} Wrapped component.
*/
export const withColorPaletteStyles = createHigherOrderComponent(
( BlockListBlock ) => ( props ) => {
const { name, attributes } = props;
const { backgroundColor, textColor } = attributes;
const [ userPalette, themePalette, defaultPalette ] = useSettings(
'color.palette.custom',
'color.palette.theme',
'color.palette.default'
);

const colors = useMemo(
() => [
...( userPalette || [] ),
...( themePalette || [] ),
...( defaultPalette || [] ),
],
[ userPalette, themePalette, defaultPalette ]
);
if (
! hasColorSupport( name ) ||
shouldSkipSerialization( name, COLOR_SUPPORT_KEY )
) {
return <BlockListBlock { ...props } />;
}
const extraStyles = {};

if (
textColor &&
! shouldSkipSerialization( name, COLOR_SUPPORT_KEY, 'text' )
) {
extraStyles.color = getColorObjectByAttributeValues(
colors,
textColor
)?.color;
}
if (
backgroundColor &&
! shouldSkipSerialization( name, COLOR_SUPPORT_KEY, 'background' )
) {
extraStyles.backgroundColor = getColorObjectByAttributeValues(
colors,
backgroundColor
)?.color;
}
function useBlockProps( { name, backgroundColor, textColor } ) {
const [ userPalette, themePalette, defaultPalette ] = useSettings(
'color.palette.custom',
'color.palette.theme',
'color.palette.default'
);

let wrapperProps = props.wrapperProps;
wrapperProps = {
...props.wrapperProps,
style: {
...extraStyles,
...props.wrapperProps?.style,
},
};
const colors = useMemo(
() => [
...( userPalette || [] ),
...( themePalette || [] ),
...( defaultPalette || [] ),
],
[ userPalette, themePalette, defaultPalette ]
);
if (
! hasColorSupport( name ) ||
shouldSkipSerialization( name, COLOR_SUPPORT_KEY )
) {
return {};
}
const extraStyles = {};

return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
},
'withColorPaletteStyles'
);
if (
textColor &&
! shouldSkipSerialization( name, COLOR_SUPPORT_KEY, 'text' )
) {
extraStyles.color = getColorObjectByAttributeValues(
colors,
textColor
)?.color;
}
if (
backgroundColor &&
! shouldSkipSerialization( name, COLOR_SUPPORT_KEY, 'background' )
) {
extraStyles.backgroundColor = getColorObjectByAttributeValues(
colors,
backgroundColor
)?.color;
}

return { style: extraStyles };
}

export default {
useBlockProps,
attributeKeys: [ 'backgroundColor', 'textColor' ],
hasSupport: hasColorSupport,
};

const MIGRATION_PATHS = {
linkColor: [ [ 'style', 'elements', 'link', 'color', 'text' ] ],
Expand Down Expand Up @@ -477,12 +461,6 @@ addFilter(
addEditProps
);

addFilter(
'editor.BlockListBlock',
'core/color/with-color-palette-styles',
withColorPaletteStyles
);

addFilter(
'blocks.switchToBlockType.transformedBlock',
'core/color/addTransforms',
Expand Down
Loading
Loading