From 221f43f513f7bce459971519a9cc716214b6f845 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Thu, 14 Dec 2023 08:47:51 +0100
Subject: [PATCH 01/10] 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
+	);
+}

From 657b5095cf5fcc1e8a0f862c4321b4b302144110 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Thu, 14 Dec 2023 11:38:10 +0100
Subject: [PATCH 02/10] fix util

---
 packages/block-editor/src/hooks/utils.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js
index fd7a34ec67f967..7057441de00de2 100644
--- a/packages/block-editor/src/hooks/utils.js
+++ b/packages/block-editor/src/hooks/utils.js
@@ -545,14 +545,14 @@ export function createBlockListBlockFilter( features ) {
 }
 
 export function createBlockSaveFilter( features ) {
-	function extraPropsFromHooks( props ) {
+	function extraPropsFromHooks( props, name, attributes ) {
 		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 ( attributes[ key ] ) {
+					neededProps[ key ] = attributes[ key ];
 				}
 			}
 
@@ -560,12 +560,12 @@ export function createBlockSaveFilter( features ) {
 				// Skip rendering if none of the needed attributes are
 				// set.
 				! Object.keys( neededProps ).length ||
-				! hasSupport( props.name )
+				! hasSupport( name )
 			) {
 				return accu;
 			}
 
-			return addSaveProps( accu, props.name, neededProps );
+			return addSaveProps( accu, name, neededProps );
 		}, props );
 	}
 	addFilter(

From 96d246f42e6eefa9cdc062d6b579a4ecd21941bb Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Thu, 14 Dec 2023 13:38:22 +0100
Subject: [PATCH 03/10] fix tests

---
 packages/block-editor/src/hooks/aria-label.js  |  3 +++
 .../src/hooks/generated-class-name.js          | 13 ++++++-------
 packages/block-editor/src/hooks/index.js       |  3 +--
 packages/block-editor/src/hooks/test/anchor.js | 13 ++++---------
 .../src/hooks/test/custom-class-name.js        | 11 +++--------
 packages/block-editor/src/hooks/test/style.js  | 18 ++++--------------
 packages/block-editor/src/hooks/utils.js       | 10 +++++-----
 7 files changed, 26 insertions(+), 45 deletions(-)

diff --git a/packages/block-editor/src/hooks/aria-label.js b/packages/block-editor/src/hooks/aria-label.js
index b01d01756bad47..7f93aa4ff8c8b2 100644
--- a/packages/block-editor/src/hooks/aria-label.js
+++ b/packages/block-editor/src/hooks/aria-label.js
@@ -58,6 +58,9 @@ export function addSaveProps( extraProps, blockType, attributes ) {
 export default {
 	addSaveProps,
 	attributeKeys: [ 'ariaLabel' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, 'ariaLabel' );
+	},
 };
 
 addFilter(
diff --git a/packages/block-editor/src/hooks/generated-class-name.js b/packages/block-editor/src/hooks/generated-class-name.js
index 6b2a5826b2b64a..0f4e5f43576fa9 100644
--- a/packages/block-editor/src/hooks/generated-class-name.js
+++ b/packages/block-editor/src/hooks/generated-class-name.js
@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport, getBlockDefaultClassName } from '@wordpress/blocks';
 
 /**
@@ -37,10 +38,8 @@ export function addGeneratedClassName( extraProps, blockType ) {
 	return extraProps;
 }
 
-export default {
-	addSaveProps: addGeneratedClassName,
-	attributeKeys: [ 'className' ],
-	hasSupport( name ) {
-		return hasBlockSupport( name, 'className', true );
-	},
-};
+addFilter(
+	'blocks.getSaveContent.extraProps',
+	'core/generated-class-name/save-props',
+	addGeneratedClassName
+);
diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
index 6dcce348df7ad8..2dd5c4e78e4a7e 100644
--- a/packages/block-editor/src/hooks/index.js
+++ b/packages/block-editor/src/hooks/index.js
@@ -12,7 +12,7 @@ import './lock';
 import anchor from './anchor';
 import ariaLabel from './aria-label';
 import customClassName from './custom-class-name';
-import generatedClassName from './generated-class-name';
+import './generated-class-name';
 import style from './style';
 import './settings';
 import color from './color';
@@ -63,7 +63,6 @@ createBlockSaveFilter( [
 	customClassName,
 	fontFamily,
 	fontSize,
-	generatedClassName,
 	style,
 ] );
 
diff --git a/packages/block-editor/src/hooks/test/anchor.js b/packages/block-editor/src/hooks/test/anchor.js
index a919fad575312e..557789b1c088f3 100644
--- a/packages/block-editor/src/hooks/test/anchor.js
+++ b/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,
diff --git a/packages/block-editor/src/hooks/test/custom-class-name.js b/packages/block-editor/src/hooks/test/custom-class-name.js
index 5a662a99d59aec..29d5d836bce8f7 100644
--- a/packages/block-editor/src/hooks/test/custom-class-name.js
+++ b/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
diff --git a/packages/block-editor/src/hooks/test/style.js b/packages/block-editor/src/hooks/test/style.js
index 544361a47f1156..2cfe299b8c8d91 100644
--- a/packages/block-editor/src/hooks/test/style.js
+++ b/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',
diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js
index 7057441de00de2..b104a6f4b122b7 100644
--- a/packages/block-editor/src/hooks/utils.js
+++ b/packages/block-editor/src/hooks/utils.js
@@ -546,26 +546,26 @@ export function createBlockListBlockFilter( features ) {
 
 export function createBlockSaveFilter( features ) {
 	function extraPropsFromHooks( props, name, attributes ) {
-		features.reduce( ( accu, feature ) => {
+		return features.reduce( ( accu, feature ) => {
 			const { hasSupport, attributeKeys = [], addSaveProps } = feature;
 
-			const neededProps = {};
+			const neededAttributes = {};
 			for ( const key of attributeKeys ) {
 				if ( attributes[ key ] ) {
-					neededProps[ key ] = attributes[ key ];
+					neededAttributes[ key ] = attributes[ key ];
 				}
 			}
 
 			if (
 				// Skip rendering if none of the needed attributes are
 				// set.
-				! Object.keys( neededProps ).length ||
+				! Object.keys( neededAttributes ).length ||
 				! hasSupport( name )
 			) {
 				return accu;
 			}
 
-			return addSaveProps( accu, name, neededProps );
+			return addSaveProps( accu, name, neededAttributes );
 		}, props );
 	}
 	addFilter(

From 606ea4fc1f3317a4b28f8beaa7408e9710cc4248 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Thu, 14 Dec 2023 14:20:46 +0100
Subject: [PATCH 04/10] Fix tests

---
 packages/block-editor/src/hooks/utils.js | 47 +++++++++++++++---------
 1 file changed, 30 insertions(+), 17 deletions(-)

diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js
index b104a6f4b122b7..a5a1e3115393eb 100644
--- a/packages/block-editor/src/hooks/utils.js
+++ b/packages/block-editor/src/hooks/utils.js
@@ -546,27 +546,40 @@ export function createBlockListBlockFilter( features ) {
 
 export function createBlockSaveFilter( features ) {
 	function extraPropsFromHooks( props, name, attributes ) {
-		return features.reduce( ( accu, feature ) => {
-			const { hasSupport, attributeKeys = [], addSaveProps } = feature;
+		return features.reduce(
+			( accu, feature ) => {
+				const {
+					hasSupport,
+					attributeKeys = [],
+					addSaveProps,
+				} = feature;
 
-			const neededAttributes = {};
-			for ( const key of attributeKeys ) {
-				if ( attributes[ key ] ) {
-					neededAttributes[ key ] = attributes[ key ];
+				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;
-			}
+				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 );
+				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',

From 3c77e3f7a6cc33b09cc4276f96736e4fccbca06f Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Thu, 14 Dec 2023 14:56:53 +0100
Subject: [PATCH 05/10] Fix class order

---
 packages/block-editor/src/hooks/index.js | 6 +++---
 packages/block-editor/src/hooks/utils.js | 3 ++-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
index 2dd5c4e78e4a7e..8685584b1d3d7a 100644
--- a/packages/block-editor/src/hooks/index.js
+++ b/packages/block-editor/src/hooks/index.js
@@ -58,12 +58,12 @@ createBlockSaveFilter( [
 	align,
 	anchor,
 	ariaLabel,
-	border,
-	color,
 	customClassName,
+	style,
+	color,
 	fontFamily,
 	fontSize,
-	style,
+	border,
 ] );
 
 export { useCustomSides } from './dimensions';
diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js
index a5a1e3115393eb..53a33e79348ca5 100644
--- a/packages/block-editor/src/hooks/utils.js
+++ b/packages/block-editor/src/hooks/utils.js
@@ -584,6 +584,7 @@ export function createBlockSaveFilter( features ) {
 	addFilter(
 		'blocks.getSaveContent.extraProps',
 		'core/editor/hooks',
-		extraPropsFromHooks
+		extraPropsFromHooks,
+		0
 	);
 }

From 0f5267a1f11dd5d4cb3aa8d114dbd04185d0eed0 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Thu, 14 Dec 2023 15:30:30 +0100
Subject: [PATCH 06/10] Fix order again

---
 packages/block-editor/src/hooks/index.js        | 4 ++--
 packages/block-editor/src/hooks/index.native.js | 7 ++++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
index 8685584b1d3d7a..26d1d1ad12bc0b 100644
--- a/packages/block-editor/src/hooks/index.js
+++ b/packages/block-editor/src/hooks/index.js
@@ -59,11 +59,11 @@ createBlockSaveFilter( [
 	anchor,
 	ariaLabel,
 	customClassName,
-	style,
+	border,
 	color,
+	style,
 	fontFamily,
 	fontSize,
-	border,
 ] );
 
 export { useCustomSides } from './dimensions';
diff --git a/packages/block-editor/src/hooks/index.native.js b/packages/block-editor/src/hooks/index.native.js
index c0530aedb37ca4..5c92adc41c91ca 100644
--- a/packages/block-editor/src/hooks/index.native.js
+++ b/packages/block-editor/src/hooks/index.native.js
@@ -1,7 +1,11 @@
 /**
  * Internal dependencies
  */
-import { createBlockEditFilter, createBlockListBlockFilter } from './utils';
+import {
+	createBlockEditFilter,
+	createBlockListBlockFilter,
+	createBlockSaveFilter,
+} from './utils';
 import './compat';
 import align from './align';
 import anchor from './anchor';
@@ -14,6 +18,7 @@ import './layout';
 
 createBlockEditFilter( [ align, anchor, style ] );
 createBlockListBlockFilter( [ align, style, color, fontSize ] );
+createBlockSaveFilter( [ align, anchor, style, color, fontSize ] );
 
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';

From c0c1a3c117351f17b07d3ad03a8b513cff752ac0 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Thu, 14 Dec 2023 15:41:35 +0100
Subject: [PATCH 07/10] Fix deprecated paragraph

---
 packages/block-editor/src/hooks/utils.js | 53 ++++++++++--------------
 1 file changed, 23 insertions(+), 30 deletions(-)

diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js
index 53a33e79348ca5..86ccad04bb8926 100644
--- a/packages/block-editor/src/hooks/utils.js
+++ b/packages/block-editor/src/hooks/utils.js
@@ -546,40 +546,33 @@ export function createBlockListBlockFilter( features ) {
 
 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 ];
-					}
-				}
+		// Previously we had a filter deleting the className if it was an empty
+		// string. That filter is no longer running, so now we need to delete it
+		// here.
+		if ( props.hasOwnProperty( 'className' ) && ! props.className ) {
+			delete props.className;
+		}
+		return features.reduce( ( accu, feature ) => {
+			const { hasSupport, attributeKeys = [], addSaveProps } = feature;
 
-				if (
-					// Skip rendering if none of the needed attributes are
-					// set.
-					! Object.keys( neededAttributes ).length ||
-					! hasSupport( name )
-				) {
-					return accu;
+			const neededAttributes = {};
+			for ( const key of attributeKeys ) {
+				if ( attributes[ key ] ) {
+					neededAttributes[ key ] = attributes[ key ];
 				}
+			}
 
-				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,
+			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 );
 	}
 	addFilter(
 		'blocks.getSaveContent.extraProps',

From 9a1bd7a0365ad08e0e7446a2296b14e8afbcf427 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Thu, 14 Dec 2023 16:06:55 +0100
Subject: [PATCH 08/10] Attempt to fix again

---
 packages/block-editor/src/hooks/utils.js | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js
index 86ccad04bb8926..cd342af00d1a55 100644
--- a/packages/block-editor/src/hooks/utils.js
+++ b/packages/block-editor/src/hooks/utils.js
@@ -546,12 +546,6 @@ export function createBlockListBlockFilter( features ) {
 
 export function createBlockSaveFilter( features ) {
 	function extraPropsFromHooks( props, name, attributes ) {
-		// Previously we had a filter deleting the className if it was an empty
-		// string. That filter is no longer running, so now we need to delete it
-		// here.
-		if ( props.hasOwnProperty( 'className' ) && ! props.className ) {
-			delete props.className;
-		}
 		return features.reduce( ( accu, feature ) => {
 			const { hasSupport, attributeKeys = [], addSaveProps } = feature;
 
@@ -580,4 +574,18 @@ export function createBlockSaveFilter( features ) {
 		extraPropsFromHooks,
 		0
 	);
+	addFilter(
+		'blocks.getSaveContent.extraProps',
+		'core/editor/hooks',
+		( props ) => {
+			// Previously we had a filter deleting the className if it was an empty
+			// string. That filter is no longer running, so now we need to delete it
+			// here.
+			if ( props.hasOwnProperty( 'className' ) && ! props.className ) {
+				delete props.className;
+			}
+
+			return props;
+		}
+	);
 }

From 52dd992ef50983d1bd333355d54be1da83f33c34 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Thu, 14 Dec 2023 16:48:58 +0100
Subject: [PATCH 09/10] Adjust order mobile

---
 packages/block-editor/src/hooks/index.native.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/hooks/index.native.js b/packages/block-editor/src/hooks/index.native.js
index 5c92adc41c91ca..747e76e64493aa 100644
--- a/packages/block-editor/src/hooks/index.native.js
+++ b/packages/block-editor/src/hooks/index.native.js
@@ -18,7 +18,7 @@ import './layout';
 
 createBlockEditFilter( [ align, anchor, style ] );
 createBlockListBlockFilter( [ align, style, color, fontSize ] );
-createBlockSaveFilter( [ align, anchor, style, color, fontSize ] );
+createBlockSaveFilter( [ align, anchor, color, style, fontSize ] );
 
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';

From d1b74abf830eed47e42bf6088e5e50819502e93f Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Thu, 14 Dec 2023 17:06:43 +0100
Subject: [PATCH 10/10] Add custom class name for native

---
 .../src/hooks/custom-class-name.native.js           | 13 ++++++++-----
 packages/block-editor/src/hooks/index.native.js     | 11 +++++++++--
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/hooks/custom-class-name.native.js b/packages/block-editor/src/hooks/custom-class-name.native.js
index 65ba2505053755..8d2b6560332e45 100644
--- a/packages/block-editor/src/hooks/custom-class-name.native.js
+++ b/packages/block-editor/src/hooks/custom-class-name.native.js
@@ -60,8 +60,11 @@ addFilter(
 	'core/custom-class-name/attribute',
 	addAttribute
 );
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/custom-class-name/save-props',
-	addSaveProps
-);
+
+export default {
+	addSaveProps,
+	attributeKeys: [ 'className' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, 'customClassName', true );
+	},
+};
diff --git a/packages/block-editor/src/hooks/index.native.js b/packages/block-editor/src/hooks/index.native.js
index 747e76e64493aa..55ae7e19df7037 100644
--- a/packages/block-editor/src/hooks/index.native.js
+++ b/packages/block-editor/src/hooks/index.native.js
@@ -9,7 +9,7 @@ import {
 import './compat';
 import align from './align';
 import anchor from './anchor';
-import './custom-class-name';
+import customClassName from './custom-class-name';
 import './generated-class-name';
 import style from './style';
 import color from './color';
@@ -18,7 +18,14 @@ import './layout';
 
 createBlockEditFilter( [ align, anchor, style ] );
 createBlockListBlockFilter( [ align, style, color, fontSize ] );
-createBlockSaveFilter( [ align, anchor, color, style, fontSize ] );
+createBlockSaveFilter( [
+	align,
+	anchor,
+	customClassName,
+	color,
+	style,
+	fontSize,
+] );
 
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';