Block editor: hooks: manage save props in one place

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
-);

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
-);

packages/block-editor/src/hooks/aria-label.js

@@ -55,13 +55,16 @@ export function addSaveProps( extraProps, blockType, attributes ) {
 	return extraProps;
 }
 
+export default {
+	addSaveProps,
+	attributeKeys: [ 'ariaLabel' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, 'ariaLabel' );
+	},
+};
+
 addFilter(
 	'blocks.registerBlockType',
 	'core/ariaLabel/attribute',
 	addAttribute
 );
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/ariaLabel/save-props',
-	addSaveProps
-);

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
-);

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',

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',

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
-);

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',

packages/block-editor/src/hooks/index.js

@@ -1,12 +1,16 @@
 /**
  * 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 style from './style';
@@ -50,6 +54,17 @@ createBlockListBlockFilter( [
 	position,
 	childLayout,
 ] );
+createBlockSaveFilter( [
+	align,
+	anchor,
+	ariaLabel,
+	border,
+	color,
+	customClassName,
+	fontFamily,
+	fontSize,
+	style,
+] );
 
 export { useCustomSides } from './dimensions';
 export { useLayoutClasses, useLayoutStyles } from './layout';

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
-);

packages/block-editor/src/hooks/test/anchor.js

@@ -6,7 +6,7 @@ import { applyFilters } from '@wordpress/hooks';
 /**
  * Internal dependencies
  */
-import '../anchor';
+import anchor from '../anchor';
 
 const noop = () => {};
 
@@ -62,14 +62,9 @@ describe( 'anchor', () => {
 	} );
 
 	describe( 'addSaveProps', () => {
-		const getSaveContentExtraProps = applyFilters.bind(
-			null,
-			'blocks.getSaveContent.extraProps'
-		);
-
 		it( 'should do nothing if the block settings do not define anchor support', () => {
 			const attributes = { anchor: 'foo' };
-			const extraProps = getSaveContentExtraProps(
+			const extraProps = anchor.addSaveProps(
 				{},
 				blockSettings,
 				attributes
@@ -80,7 +75,7 @@ describe( 'anchor', () => {
 
 		it( 'should inject anchor attribute ID', () => {
 			const attributes = { anchor: 'foo' };
-			const extraProps = getSaveContentExtraProps(
+			const extraProps = anchor.addSaveProps(
 				{},
 				{
 					...blockSettings,
@@ -96,7 +91,7 @@ describe( 'anchor', () => {
 
 		it( 'should remove an anchor attribute ID when field is cleared', () => {
 			const attributes = { anchor: '' };
-			const extraProps = getSaveContentExtraProps(
+			const extraProps = anchor.addSaveProps(
 				{},
 				{
 					...blockSettings,

packages/block-editor/src/hooks/test/custom-class-name.js

@@ -6,7 +6,7 @@ import { applyFilters } from '@wordpress/hooks';
 /**
  * Internal dependencies
  */
-import '../custom-class-name';
+import customClassName from '../custom-class-name';
 
 describe( 'custom className', () => {
 	const blockSettings = {
@@ -40,14 +40,9 @@ describe( 'custom className', () => {
 	} );
 
 	describe( 'addSaveProps', () => {
-		const addSaveProps = applyFilters.bind(
-			null,
-			'blocks.getSaveContent.extraProps'
-		);
-
 		it( 'should do nothing if the block settings do not define custom className support', () => {
 			const attributes = { className: 'foo' };
-			const extraProps = addSaveProps(
+			const extraProps = customClassName.addSaveProps(
 				{},
 				{
 					...blockSettings,
@@ -63,7 +58,7 @@ describe( 'custom className', () => {
 
 		it( 'should inject the custom className', () => {
 			const attributes = { className: 'bar' };
-			const extraProps = addSaveProps(
+			const extraProps = customClassName.addSaveProps(
 				{ className: 'foo' },
 				blockSettings,
 				attributes

packages/block-editor/src/hooks/test/style.js

@@ -1,12 +1,7 @@
-/**
- * WordPress dependencies
- */
-import { applyFilters } from '@wordpress/hooks';
-
 /**
  * Internal dependencies
  */
-import { getInlineStyles, omitStyle } from '../style';
+import _style, { getInlineStyles, omitStyle } from '../style';
 
 describe( 'getInlineStyles', () => {
 	it( 'should return an empty object when called with undefined', () => {
@@ -120,11 +115,6 @@ describe( 'getInlineStyles', () => {
 } );
 
 describe( 'addSaveProps', () => {
-	const addSaveProps = applyFilters.bind(
-		null,
-		'blocks.getSaveContent.extraProps'
-	);
-
 	const blockSettings = {
 		save: () => <div className="default" />,
 		category: 'text',
@@ -166,7 +156,7 @@ describe( 'addSaveProps', () => {
 	};
 
 	it( 'should serialize all styles by default', () => {
-		const extraProps = addSaveProps( {}, blockSettings, attributes );
+		const extraProps = _style.addSaveProps( {}, blockSettings, attributes );
 
 		expect( extraProps.style ).toEqual( {
 			background:
@@ -183,7 +173,7 @@ describe( 'addSaveProps', () => {
 		const settings = applySkipSerialization( {
 			typography: true,
 		} );
-		const extraProps = addSaveProps( {}, settings, attributes );
+		const extraProps = _style.addSaveProps( {}, settings, attributes );
 
 		expect( extraProps.style ).toEqual( {
 			background:
@@ -198,7 +188,7 @@ describe( 'addSaveProps', () => {
 			color: [ 'gradient' ],
 			typography: [ 'textDecoration', 'textTransform' ],
 		} );
-		const extraProps = addSaveProps( {}, settings, attributes );
+		const extraProps = _style.addSaveProps( {}, settings, attributes );
 
 		expect( extraProps.style ).toEqual( {
 			color: '#d92828',

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,47 @@ export function createBlockListBlockFilter( features ) {
 		withBlockListBlockHooks
 	);
 }
+
+export function createBlockSaveFilter( features ) {
+	function extraPropsFromHooks( props, name, attributes ) {
+		return features.reduce(
+			( accu, feature ) => {
+				const {
+					hasSupport,
+					attributeKeys = [],
+					addSaveProps,
+				} = feature;
+
+				const neededAttributes = {};
+				for ( const key of attributeKeys ) {
+					if ( attributes[ key ] ) {
+						neededAttributes[ key ] = attributes[ key ];
+					}
+				}
+
+				if (
+					// Skip rendering if none of the needed attributes are
+					// set.
+					! Object.keys( neededAttributes ).length ||
+					! hasSupport( name )
+				) {
+					return accu;
+				}
+
+				return addSaveProps( accu, name, neededAttributes );
+			},
+			{
+				...props,
+				// Previously we had a filter setting the className to undefined
+				// while it was an empty string. This filter is no longer
+				// running, so now we need to set it to undefined here.
+				className: props.className ? props.className : undefined,
+			}
+		);
+	}
+	addFilter(
+		'blocks.getSaveContent.extraProps',
+		'core/editor/hooks',
+		extraPropsFromHooks
+	);
+}