Skip to content

Commit

Permalink
Block editor: hooks: avoid getEditWrapperProps (#56912)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ellatrix
ellatrix authored Dec 12, 2023
1 parent 839e553 commit a43ffa4
Show file tree
Hide file tree
Showing 8 changed files with 136 additions and 287 deletions.
12 changes: 10 additions & 2 deletions packages/block-editor/src/components/block-list/block.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,18 @@ function mergeWrapperProps( propsA, propsB ) {
...propsB,
};

if ( propsA?.className && propsB?.className ) {
// May be set to undefined, so check if the property is set!
if (
propsA?.hasOwnProperty( 'className' ) &&
propsB?.hasOwnProperty( 'className' )
) {
newProps.className = classnames( propsA.className, propsB.className );
}
if ( propsA?.style && propsB?.style ) {

if (
propsA?.hasOwnProperty( 'style' ) &&
propsB?.hasOwnProperty( 'style' )
) {
newProps.style = { ...propsA.style, ...propsB.style };
}

Expand Down
54 changes: 11 additions & 43 deletions packages/block-editor/src/hooks/border.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -258,16 +258,16 @@ function addAttributes( settings ) {
/**
* Override props assigned to save component to inject border color.
*
* @param {Object} props Additional props applied to save element.
* @param {Object} blockType Block type definition.
* @param {Object} attributes Block's attributes.
* @param {Object} props Additional props applied to save element.
* @param {Object|string} blockNameOrType Block type definition.
* @param {Object} attributes Block's attributes.
*
* @return {Object} Filtered props to apply to save element.
*/
function addSaveProps( props, blockType, attributes ) {
function addSaveProps( props, blockNameOrType, attributes ) {
if (
! hasBorderSupport( blockType, 'color' ) ||
shouldSkipSerialization( blockType, BORDER_SUPPORT_KEY, 'color' )
! hasBorderSupport( blockNameOrType, 'color' ) ||
shouldSkipSerialization( blockNameOrType, BORDER_SUPPORT_KEY, 'color' )
) {
return props;
}
Expand Down Expand Up @@ -300,36 +300,6 @@ export function getBorderClasses( attributes ) {
} );
}

/**
* Filters the registered block settings to apply border color styles and
* classnames to the block edit wrapper.
*
* @param {Object} settings Original block settings.
*
* @return {Object} Filtered block settings.
*/
function addEditProps( settings ) {
if (
! hasBorderSupport( settings, 'color' ) ||
shouldSkipSerialization( settings, BORDER_SUPPORT_KEY, 'color' )
) {
return settings;
}

const existingGetEditWrapperProps = settings.getEditWrapperProps;
settings.getEditWrapperProps = ( attributes ) => {
let props = {};

if ( existingGetEditWrapperProps ) {
props = existingGetEditWrapperProps( attributes );
}

return addSaveProps( props, settings, attributes );
};

return settings;
}

function useBlockProps( { name, borderColor, style } ) {
const { colors } = useMultipleOriginColorsAndGradients();

Expand Down Expand Up @@ -369,7 +339,11 @@ function useBlockProps( { name, borderColor, style } ) {
borderLeftColor: borderLeftColor || borderColorValue,
};

return { style: cleanEmptyObject( extraStyles ) || {} };
return addSaveProps(
{ style: cleanEmptyObject( extraStyles ) || {} },
name,
{ borderColor, style }
);
}

export default {
Expand All @@ -391,9 +365,3 @@ addFilter(
'core/border/addSaveProps',
addSaveProps
);

addFilter(
'blocks.registerBlockType',
'core/border/addEditProps',
addEditProps
);
78 changes: 30 additions & 48 deletions packages/block-editor/src/hooks/color.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@ import { store as blockEditorStore } from '../store';

export const COLOR_SUPPORT_KEY = 'color';

const hasColorSupport = ( blockType ) => {
const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
const hasColorSupport = ( blockNameOrType ) => {
const colorSupport = getBlockSupport( blockNameOrType, COLOR_SUPPORT_KEY );
return (
colorSupport &&
( colorSupport.link === true ||
Expand All @@ -61,8 +61,8 @@ const hasLinkColorSupport = ( blockType ) => {
);
};

const hasGradientSupport = ( blockType ) => {
const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
const hasGradientSupport = ( blockNameOrType ) => {
const colorSupport = getBlockSupport( blockNameOrType, COLOR_SUPPORT_KEY );

return (
colorSupport !== null &&
Expand Down Expand Up @@ -126,27 +126,31 @@ function addAttributes( settings ) {
/**
* Override props assigned to save component to inject colors classnames.
*
* @param {Object} props Additional props applied to save element.
* @param {Object} blockType Block type.
* @param {Object} attributes Block attributes.
* @param {Object} props Additional props applied to save element.
* @param {Object|string} blockNameOrType Block type.
* @param {Object} attributes Block attributes.
*
* @return {Object} Filtered props applied to save element.
*/
export function addSaveProps( props, blockType, attributes ) {
export function addSaveProps( props, blockNameOrType, attributes ) {
if (
! hasColorSupport( blockType ) ||
shouldSkipSerialization( blockType, COLOR_SUPPORT_KEY )
! hasColorSupport( blockNameOrType ) ||
shouldSkipSerialization( blockNameOrType, COLOR_SUPPORT_KEY )
) {
return props;
}

const hasGradient = hasGradientSupport( blockType );
const hasGradient = hasGradientSupport( blockNameOrType );

// I'd have preferred to avoid the "style" attribute usage here
const { backgroundColor, textColor, gradient, style } = attributes;

const shouldSerialize = ( feature ) =>
! shouldSkipSerialization( blockType, COLOR_SUPPORT_KEY, feature );
! shouldSkipSerialization(
blockNameOrType,
COLOR_SUPPORT_KEY,
feature
);

// Primary color classes must come before the `has-text-color`,
// `has-background` and `has-link-color` classes to maintain backwards
Expand Down Expand Up @@ -192,33 +196,6 @@ export function addSaveProps( props, blockType, attributes ) {
return props;
}

/**
* Filters registered block settings to extend the block edit wrapper
* to apply the desired styles and classnames properly.
*
* @param {Object} settings Original block settings.
*
* @return {Object} Filtered block settings.
*/
export function addEditProps( settings ) {
if (
! hasColorSupport( settings ) ||
shouldSkipSerialization( settings, COLOR_SUPPORT_KEY )
) {
return settings;
}
const existingGetEditWrapperProps = settings.getEditWrapperProps;
settings.getEditWrapperProps = ( attributes ) => {
let props = {};
if ( existingGetEditWrapperProps ) {
props = existingGetEditWrapperProps( attributes );
}
return addSaveProps( props, settings, attributes );
};

return settings;
}

function styleToAttributes( style ) {
const textColorValue = style?.color?.text;
const textColorSlug = textColorValue?.startsWith( 'var:preset|color|' )
Expand Down Expand Up @@ -364,7 +341,13 @@ function ColorEditPure( { clientId, name, setAttributes, settings } ) {
// and not the whole attributes object.
export const ColorEdit = pure( ColorEditPure );

function useBlockProps( { name, backgroundColor, textColor } ) {
function useBlockProps( {
name,
backgroundColor,
textColor,
gradient,
style,
} ) {
const [ userPalette, themePalette, defaultPalette ] = useSettings(
'color.palette.custom',
'color.palette.theme',
Expand Down Expand Up @@ -406,12 +389,17 @@ function useBlockProps( { name, backgroundColor, textColor } ) {
)?.color;
}

return { style: extraStyles };
return addSaveProps( { style: extraStyles }, name, {
textColor,
backgroundColor,
gradient,
style,
} );
}

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

Expand Down Expand Up @@ -455,12 +443,6 @@ addFilter(
addSaveProps
);

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

addFilter(
'blocks.switchToBlockType.transformedBlock',
'core/color/addTransforms',
Expand Down
39 changes: 10 additions & 29 deletions packages/block-editor/src/hooks/font-family.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,31 +74,18 @@ function addSaveProps( props, blockType, attributes ) {
return props;
}

/**
* Filters registered block settings to expand the block edit wrapper
* by applying the desired styles and classnames.
*
* @param {Object} settings Original block settings.
*
* @return {Object} Filtered block settings.
*/
function addEditProps( settings ) {
if ( ! hasBlockSupport( settings, FONT_FAMILY_SUPPORT_KEY ) ) {
return settings;
}

const existingGetEditWrapperProps = settings.getEditWrapperProps;
settings.getEditWrapperProps = ( attributes ) => {
let props = {};
if ( existingGetEditWrapperProps ) {
props = existingGetEditWrapperProps( attributes );
}
return addSaveProps( props, settings, attributes );
};

return settings;
function useBlockProps( { name, fontFamily } ) {
return addSaveProps( {}, name, { fontFamily } );
}

export default {
useBlockProps,
attributeKeys: [ 'fontFamily' ],
hasSupport( name ) {
return hasBlockSupport( name, FONT_FAMILY_SUPPORT_KEY );
},
};

/**
* Resets the font family block support attribute. This can be used when
* disabling the font family support controls for a block via a progressive
Expand All @@ -122,9 +109,3 @@ addFilter(
'core/fontFamily/addSaveProps',
addSaveProps
);

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

1 comment on commit a43ffa4

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in a43ffa4.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7177848675
📝 Reported issues:

Please sign in to comment.