From 221f43f513f7bce459971519a9cc716214b6f845 Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 14 Dec 2023 08:47:51 +0100 Subject: [PATCH] Block editor: hooks: manage save props in one place --- packages/block-editor/src/hooks/align.js | 6 +--- packages/block-editor/src/hooks/anchor.js | 6 +--- packages/block-editor/src/hooks/aria-label.js | 10 +++--- packages/block-editor/src/hooks/border.js | 7 +--- packages/block-editor/src/hooks/color.js | 7 +--- .../src/hooks/custom-class-name.js | 6 +--- .../block-editor/src/hooks/font-family.js | 7 +--- packages/block-editor/src/hooks/font-size.js | 7 +--- .../src/hooks/generated-class-name.js | 13 +++---- packages/block-editor/src/hooks/index.js | 22 ++++++++++-- packages/block-editor/src/hooks/style.js | 7 +--- packages/block-editor/src/hooks/utils.js | 35 +++++++++++++++++-- 12 files changed, 72 insertions(+), 61 deletions(-) diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js index 189f82ccf429f8..3e4a49bb385558 100644 --- a/packages/block-editor/src/hooks/align.js +++ b/packages/block-editor/src/hooks/align.js @@ -155,6 +155,7 @@ export default { shareWithChildBlocks: true, edit: BlockEditAlignmentToolbarControlsPure, useBlockProps, + addSaveProps: addAssignedAlign, attributeKeys: [ 'align' ], hasSupport( name ) { return hasBlockSupport( name, 'align', false ); @@ -209,8 +210,3 @@ addFilter( 'core/editor/align/addAttribute', addAttribute ); -addFilter( - 'blocks.getSaveContent.extraProps', - 'core/editor/align/addAssignedAlign', - addAssignedAlign -); diff --git a/packages/block-editor/src/hooks/anchor.js b/packages/block-editor/src/hooks/anchor.js index 882820678aa870..2e79a9d9db17b2 100644 --- a/packages/block-editor/src/hooks/anchor.js +++ b/packages/block-editor/src/hooks/anchor.js @@ -120,6 +120,7 @@ function BlockEditAnchorControlPure( { } export default { + addSaveProps, edit: BlockEditAnchorControlPure, attributeKeys: [ 'anchor' ], hasSupport( name ) { @@ -147,8 +148,3 @@ export function addSaveProps( extraProps, blockType, attributes ) { } addFilter( 'blocks.registerBlockType', 'core/anchor/attribute', addAttribute ); -addFilter( - 'blocks.getSaveContent.extraProps', - 'core/editor/anchor/save-props', - addSaveProps -); diff --git a/packages/block-editor/src/hooks/aria-label.js b/packages/block-editor/src/hooks/aria-label.js index c4387daab71137..b01d01756bad47 100644 --- a/packages/block-editor/src/hooks/aria-label.js +++ b/packages/block-editor/src/hooks/aria-label.js @@ -55,13 +55,13 @@ export function addSaveProps( extraProps, blockType, attributes ) { return extraProps; } +export default { + addSaveProps, + attributeKeys: [ 'ariaLabel' ], +}; + addFilter( 'blocks.registerBlockType', 'core/ariaLabel/attribute', addAttribute ); -addFilter( - 'blocks.getSaveContent.extraProps', - 'core/ariaLabel/save-props', - addSaveProps -); diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js index c6947eeaa18e38..a11fdc4b97e48b 100644 --- a/packages/block-editor/src/hooks/border.js +++ b/packages/block-editor/src/hooks/border.js @@ -348,6 +348,7 @@ function useBlockProps( { name, borderColor, style } ) { export default { useBlockProps, + addSaveProps, attributeKeys: [ 'borderColor', 'style' ], hasSupport( name ) { return hasBorderSupport( name, 'color' ); @@ -359,9 +360,3 @@ addFilter( 'core/border/addAttributes', addAttributes ); - -addFilter( - 'blocks.getSaveContent.extraProps', - 'core/border/addSaveProps', - addSaveProps -); diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index db6c3dc8fd86ce..267bafe1201739 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -399,6 +399,7 @@ function useBlockProps( { export default { useBlockProps, + addSaveProps, attributeKeys: [ 'backgroundColor', 'textColor', 'gradient', 'style' ], hasSupport: hasColorSupport, }; @@ -437,12 +438,6 @@ addFilter( addAttributes ); -addFilter( - 'blocks.getSaveContent.extraProps', - 'core/color/addSaveProps', - addSaveProps -); - addFilter( 'blocks.switchToBlockType.transformedBlock', 'core/color/addTransforms', diff --git a/packages/block-editor/src/hooks/custom-class-name.js b/packages/block-editor/src/hooks/custom-class-name.js index 331edd9ef214a2..037fafe9ca840f 100644 --- a/packages/block-editor/src/hooks/custom-class-name.js +++ b/packages/block-editor/src/hooks/custom-class-name.js @@ -65,6 +65,7 @@ function CustomClassNameControlsPure( { className, setAttributes } ) { export default { edit: CustomClassNameControlsPure, + addSaveProps, attributeKeys: [ 'className' ], hasSupport( name ) { return hasBlockSupport( name, 'customClassName', true ); @@ -140,11 +141,6 @@ addFilter( 'core/editor/custom-class-name/attribute', addAttribute ); -addFilter( - 'blocks.getSaveContent.extraProps', - 'core/editor/custom-class-name/save-props', - addSaveProps -); addFilter( 'blocks.switchToBlockType.transformedBlock', diff --git a/packages/block-editor/src/hooks/font-family.js b/packages/block-editor/src/hooks/font-family.js index ae41b7fa34b1f5..db6515ef1c2fe0 100644 --- a/packages/block-editor/src/hooks/font-family.js +++ b/packages/block-editor/src/hooks/font-family.js @@ -82,6 +82,7 @@ function useBlockProps( { name, fontFamily } ) { export default { useBlockProps, + addSaveProps, attributeKeys: [ 'fontFamily' ], hasSupport( name ) { return hasBlockSupport( name, FONT_FAMILY_SUPPORT_KEY ); @@ -105,9 +106,3 @@ addFilter( 'core/fontFamily/addAttribute', addAttributes ); - -addFilter( - 'blocks.getSaveContent.extraProps', - 'core/fontFamily/addSaveProps', - addSaveProps -); diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js index b30fcc82d99463..89491da44edce3 100644 --- a/packages/block-editor/src/hooks/font-size.js +++ b/packages/block-editor/src/hooks/font-size.js @@ -211,6 +211,7 @@ function useBlockProps( { name, fontSize, style } ) { export default { useBlockProps, + addSaveProps, attributeKeys: [ 'fontSize', 'style' ], hasSupport( name ) { return hasBlockSupport( name, FONT_SIZE_SUPPORT_KEY ); @@ -245,12 +246,6 @@ addFilter( addAttributes ); -addFilter( - 'blocks.getSaveContent.extraProps', - 'core/font/addSaveProps', - addSaveProps -); - addFilter( 'blocks.switchToBlockType.transformedBlock', 'core/font-size/addTransforms', diff --git a/packages/block-editor/src/hooks/generated-class-name.js b/packages/block-editor/src/hooks/generated-class-name.js index 0f4e5f43576fa9..6b2a5826b2b64a 100644 --- a/packages/block-editor/src/hooks/generated-class-name.js +++ b/packages/block-editor/src/hooks/generated-class-name.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { addFilter } from '@wordpress/hooks'; import { hasBlockSupport, getBlockDefaultClassName } from '@wordpress/blocks'; /** @@ -38,8 +37,10 @@ export function addGeneratedClassName( extraProps, blockType ) { return extraProps; } -addFilter( - 'blocks.getSaveContent.extraProps', - 'core/generated-class-name/save-props', - addGeneratedClassName -); +export default { + addSaveProps: addGeneratedClassName, + attributeKeys: [ 'className' ], + hasSupport( name ) { + return hasBlockSupport( name, 'className', true ); + }, +}; diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index ec0dba5efb2b69..6dcce348df7ad8 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -1,14 +1,18 @@ /** * Internal dependencies */ -import { createBlockEditFilter, createBlockListBlockFilter } from './utils'; +import { + createBlockEditFilter, + createBlockListBlockFilter, + createBlockSaveFilter, +} from './utils'; import './compat'; import align from './align'; import './lock'; import anchor from './anchor'; -import './aria-label'; +import ariaLabel from './aria-label'; import customClassName from './custom-class-name'; -import './generated-class-name'; +import generatedClassName from './generated-class-name'; import style from './style'; import './settings'; import color from './color'; @@ -50,6 +54,18 @@ createBlockListBlockFilter( [ position, childLayout, ] ); +createBlockSaveFilter( [ + align, + anchor, + ariaLabel, + border, + color, + customClassName, + fontFamily, + fontSize, + generatedClassName, + style, +] ); export { useCustomSides } from './dimensions'; export { useLayoutClasses, useLayoutStyles } from './layout'; diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index b6098969bebb5e..7221de63456cd5 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -343,6 +343,7 @@ function BlockStyleControls( { export default { edit: BlockStyleControls, hasSupport: hasStyleSupport, + addSaveProps, attributeKeys: [ 'style' ], useBlockProps, }; @@ -455,9 +456,3 @@ addFilter( 'core/style/addAttribute', addAttribute ); - -addFilter( - 'blocks.getSaveContent.extraProps', - 'core/style/addSaveProps', - addSaveProps -); diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js index 49617013dc1153..fd7a34ec67f967 100644 --- a/packages/block-editor/src/hooks/utils.js +++ b/packages/block-editor/src/hooks/utils.js @@ -488,10 +488,10 @@ export function createBlockListBlockFilter( features ) { } if ( - ! hasSupport( props.name ) || // Skip rendering if none of the needed attributes are // set. - ! Object.keys( neededProps ).length + ! Object.keys( neededProps ).length || + ! hasSupport( props.name ) ) { return null; } @@ -543,3 +543,34 @@ export function createBlockListBlockFilter( features ) { withBlockListBlockHooks ); } + +export function createBlockSaveFilter( features ) { + function extraPropsFromHooks( props ) { + features.reduce( ( accu, feature ) => { + const { hasSupport, attributeKeys = [], addSaveProps } = feature; + + const neededProps = {}; + for ( const key of attributeKeys ) { + if ( props.attributes[ key ] ) { + neededProps[ key ] = props.attributes[ key ]; + } + } + + if ( + // Skip rendering if none of the needed attributes are + // set. + ! Object.keys( neededProps ).length || + ! hasSupport( props.name ) + ) { + return accu; + } + + return addSaveProps( accu, props.name, neededProps ); + }, props ); + } + addFilter( + 'blocks.getSaveContent.extraProps', + 'core/editor/hooks', + extraPropsFromHooks + ); +}