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: avoid getEditWrapperProps #56912

Merged
merged 7 commits into from
Dec 12, 2023
Merged

Block editor: hooks: avoid getEditWrapperProps #56912

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bb7e92e
Block editor: hooks: avoid getEditWrapperProps
ellatrix Dec 8, 2023
6dddcae
Add color
ellatrix Dec 8, 2023
56303ae
Add font family
ellatrix Dec 8, 2023
bf46270
fix gradient
ellatrix Dec 8, 2023
eb5aa10
Fix merge props issue
ellatrix Dec 8, 2023
b3c81ae
Add font size
ellatrix Dec 8, 2023
bf0950d
Use skipSerializationPathsEdit
ellatrix Dec 11, 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
12 changes: 10 additions & 2 deletions packages/block-editor/src/components/block-list/block.js
View file
Open in desktop
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' )
) {
Comment on lines +57 to +61
Copy link
Contributor

Choose a reason for hiding this comment

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

Fantastic! I just ran into an issue with applying a className for another block support I'm working on and was confused as to why the className wasn't being output consistently, and this fixes it 🙂

Copy link
Member Author

Choose a reason for hiding this comment

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

That’s great! Was hoping this makes it also easier to maintain!

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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading