Block editor: hooks: manage save props in one place

WordPress · Dec 14, 2023 · 221f43f · 221f43f
1 parent d9ea8d0
commit 221f43f
Show file tree

Hide file tree

Showing 12 changed files with 72 additions and 61 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
+	);
+}