Block Supports: Extend stabilization to common experimental block support flags

backport-changelog/6.8/7069.md

@@ -2,3 +2,4 @@ https://github.com/WordPress/wordpress-develop/pull/7069
 
 * https://github.com/WordPress/gutenberg/pull/63401
 * https://github.com/WordPress/gutenberg/pull/66918
+* https://github.com/WordPress/gutenberg/pull/67018

docs/explanations/architecture/styles.md

@@ -37,8 +37,10 @@ The user may change the state of this block by applying different styles: a text
 After some user modifications to the block, the initial markup may become something like this:
 
 ```html
-<p class="has-color has-green-color has-font-size has-small-font-size my-custom-class"
-	style="line-height: 1em"></p>
+<p
+	class="has-color has-green-color has-font-size has-small-font-size my-custom-class"
+	style="line-height: 1em"
+></p>
 ```
 
 This is what we refer to as "user-provided block styles", also know as "local styles" or "serialized styles". Essentially, each tool (font size, color, etc) ends up adding some classes and/or inline styles to the block markup. The CSS styling for these classes is part of the block, global, or theme stylesheets.
@@ -123,7 +125,7 @@ The block supports API only serializes the font size value to the wrapper, resul
 
 This is an active area of work you can follow [in the tracking issue](https://github.com/WordPress/gutenberg/issues/38167). The linked proposal is exploring a different way to serialize the user changes: instead of each block support serializing its own data (for example, classes such as `has-small-font-size`, `has-green-color`) the idea is the block would get a single class instead (for example, `wp-style-UUID`) and the CSS styling for that class will be generated in the server by WordPress.
 
-While work continues in that proposal, there's an escape hatch, an experimental option block authors can use. Any block support can skip the serialization to HTML markup by using `__experimentalSkipSerialization`. For example:
+While work continues in that proposal, there's an escape hatch, an experimental option block authors can use. Any block support can skip the serialization to HTML markup by using `skipSerialization`. For example:
 
 ```json
 {
@@ -132,15 +134,15 @@ While work continues in that proposal, there's an escape hatch, an experimental
 	"supports": {
 		"typography": {
 			"fontSize": true,
-			"__experimentalSkipSerialization": true
+			"skipSerialization": true
 		}
 	}
 }
 ```
 
 This means that the typography block support will do all of the things (create a UI control, bind the block attribute to the control, etc) except serializing the user values into the HTML markup. The classes and inline styles will not be automatically applied to the wrapper and it is the block author's responsibility to implement this in the `edit`, `save`, and `render_callback` functions. See [this issue](https://github.com/WordPress/gutenberg/issues/28913) for examples of how it was done for some blocks provided by WordPress.
 
-Note that, if `__experimentalSkipSerialization` is enabled for a group (typography, color, spacing) it affects _all_ block supports within this group. In the example above _all_ the properties within the `typography` group will be affected (e.g. `fontSize`, `lineHeight`, `fontFamily` .etc).
+Note that, if `skipSerialization` is enabled for a group (typography, color, spacing) it affects _all_ block supports within this group. In the example above _all_ the properties within the `typography` group will be affected (e.g. `fontSize`, `lineHeight`, `fontFamily` .etc).
 
 To enable for a _single_ property only, you may use an array to declare which properties are to be skipped. In the example below, only `fontSize` will skip serialization, leaving other items within the `typography` group (e.g. `lineHeight`, `fontFamily` .etc) unaffected.
 
@@ -152,7 +154,7 @@ To enable for a _single_ property only, you may use an array to declare which pr
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
-			"__experimentalSkipSerialization": [ "fontSize" ]
+			"skipSerialization": [ "fontSize" ]
 		}
 	}
 }
@@ -473,7 +475,7 @@ If blocks do this, they need to be registered in the server using the `block.jso
 
 Every chunk of styles can only use a single selector.
 
-This is particularly relevant if the block is using `__experimentalSkipSerialization` to serialize the different style properties to different nodes other than the wrapper. See "Current limitations of blocks supports" for more.
+This is particularly relevant if the block is using `skipSerialization` to serialize the different style properties to different nodes other than the wrapper. See "Current limitations of blocks supports" for more.
 
 #### 3. **Only a single property per block**
 

lib/compat/wordpress-6.8/blocks.php

@@ -20,77 +20,121 @@ function gutenberg_stabilize_experimental_block_supports( $args ) {
 		return $args;
 	}
 
-	$experimental_to_stable_keys = array(
-		'typography'           => array(
+	$experimental_supports_map       = array( '__experimentalBorder' => 'border' );
+	$common_experimental_properties  = array(
+		'__experimentalDefaultControls'   => 'defaultControls',
+		'__experimentalSkipSerialization' => 'skipSerialization',
+	);
+	$experimental_support_properties = array(
+		'typography' => array(
 			'__experimentalFontFamily'     => 'fontFamily',
 			'__experimentalFontStyle'      => 'fontStyle',
 			'__experimentalFontWeight'     => 'fontWeight',
 			'__experimentalLetterSpacing'  => 'letterSpacing',
 			'__experimentalTextDecoration' => 'textDecoration',
 			'__experimentalTextTransform'  => 'textTransform',
 		),
-		'__experimentalBorder' => 'border',
 	);
+	$done                            = array();
 
 	$updated_supports = array();
 	foreach ( $args['supports'] as $support => $config ) {
-		// Add the support's config as is when it's not in need of stabilization.
-		if ( empty( $experimental_to_stable_keys[ $support ] ) ) {
+		/*
+		 * If this support config has already been stabilized, skip it.
+		 * A stable support key occurring after an experimental key, gets
+		 * stabilized then so that the two configs can be merged effectively.
+		 */
+		if ( isset( $done[ $support ] ) ) {
+			continue;
+		}
+
+		$stable_support_key = $experimental_supports_map[ $support ] ?? $support;
+
+		/*
+		 * Use the support's config as is when it's not in need of stabilization.
+		 *
+		 * A support does not need stabilization if:
+		 * - The support key doesn't need stabilization AND
+		 * - Either:
+		 *     - The config isn't an array, so can't have experimental properties OR
+		 *     - The config is an array but has no experimental properties to stabilize.
+		 */
+		if ( $support === $stable_support_key &&
+			( ! is_array( $config ) ||
+				( ! isset( $experimental_support_properties[ $stable_support_key ] ) &&
+				empty( array_intersect_key( $common_experimental_properties, $config ) )
+				)
+			)
+		) {
 			$updated_supports[ $support ] = $config;
 			continue;
 		}
 
-		// Stabilize the support's key if needed e.g. __experimentalBorder => border.
-		if ( is_string( $experimental_to_stable_keys[ $support ] ) ) {
-			$stabilized_key = $experimental_to_stable_keys[ $support ];
+		$stabilize_config = function ( $unstable_config, $stable_support_key ) use ( $experimental_support_properties, $common_experimental_properties ) {
+			$stable_config = array();
+			foreach ( $unstable_config as $key => $value ) {
+				// Get stable key from support-specific map, common properties map, or keep original.
+				$stable_key = $experimental_support_properties[ $stable_support_key ][ $key ] ??
+							$common_experimental_properties[ $key ] ??
+							$key;
+
+				$stable_config[ $stable_key ] = $value;
 
-			// If there is no stabilized key present, use the experimental config as is.
-			if ( ! array_key_exists( $stabilized_key, $args['supports'] ) ) {
-				$updated_supports[ $stabilized_key ] = $config;
-				continue;
+				/*
+				 * The `__experimentalSkipSerialization` key needs to be kept until
+				 * WP 6.8 becomes the minimum supported version. This is due to the
+				 * core `wp_should_skip_block_supports_serialization` function only
+				 * checking for `__experimentalSkipSerialization` in earlier versions.
+				 */
+				if ( '__experimentalSkipSerialization' === $key || 'skipSerialization' === $key ) {
+					$stable_config['__experimentalSkipSerialization'] = $value;
+				}
 			}
+			return $stable_config;
+		};
 
-			/*
-			 * Determine the order of keys, so the last defined can be preferred.
-			 *
-			 * The reason for preferring the last defined key is that after filters
-			 * are applied, the last inserted key is likely the most up-to-date value.
-			 * We cannot determine with certainty which value was "last modified" so
-			 * the insertion order is the best guess. The extreme edge case of multiple
-			 * filters tweaking the same support property will become less over time as
-			 * extenders migrate existing blocks and plugins to stable keys.
-			 */
+		// Stabilize the config value.
+		$stable_config = is_array( $config ) ? $stabilize_config( $config, $stable_support_key ) : $config;
+
+		/*
+		 * When both experimental and stable configs are present, use the order they
+		 * are defined in to determine the final value.
+		 *    - If config is an array, merge the arrays in their order of definition.
+		 *    - If config is not an array, use the value defined last.
+		 *
+		 * The reason for preferring the last defined key is that after filters
+		 * are applied, the last inserted key is likely the most up-to-date value.
+		 * We cannot determine with certainty which value was "last modified" so
+		 * the insertion order is the best guess. The extreme edge case of multiple
+		 * filters tweaking the same support property will become less over time as
+		 * extenders migrate existing blocks and plugins to stable keys.
+		 */
+		if ( $support !== $stable_support_key && isset( $args['supports'][ $stable_support_key ] ) ) {
 			$key_positions      = array_flip( array_keys( $args['supports'] ) );
-			$experimental_index = $key_positions[ $support ] ?? -1;
-			$stabilized_index   = $key_positions[ $stabilized_key ] ?? -1;
-			$experimental_first = $experimental_index < $stabilized_index;
+			$experimental_first =
+				( $key_positions[ $support ] ?? PHP_INT_MAX ) <
+				( $key_positions[ $stable_support_key ] ?? PHP_INT_MAX );
 
-			// Update support config, prefer the last defined value.
-			if ( is_array( $config ) ) {
-				$updated_supports[ $stabilized_key ] = $experimental_first
-					? array_merge( $config, $args['supports'][ $stabilized_key ] )
-					: array_merge( $args['supports'][ $stabilized_key ], $config );
+			if ( is_array( $args['supports'][ $stable_support_key ] ) ) {
+				/*
+				 * To merge the alternative support config effectively, it also needs to be
+				 * stabilized before merging to keep stabilized and experimental flags in
+				 * sync.
+				 */
+				$args['supports'][ $stable_support_key ] = $stabilize_config( $args['supports'][ $stable_support_key ], $stable_support_key );
+				$stable_config                           = $experimental_first
+					? array_merge( $stable_config, $args['supports'][ $stable_support_key ] )
+					: array_merge( $args['supports'][ $stable_support_key ], $stable_config );
+				// Prevents reprocessing this support as it was merged above.
+				$done[ $stable_support_key ] = true;
 			} else {
-				$updated_supports[ $stabilized_key ] = $experimental_first
-					? $args['supports'][ $stabilized_key ]
-					: $config;
+				$stable_config = $experimental_first
+					? $args['supports'][ $stable_support_key ]
+					: $stable_config;
 			}
-
-			continue;
 		}
 
-		// Stabilize individual support feature keys e.g. __experimentalFontFamily => fontFamily.
-		if ( is_array( $experimental_to_stable_keys[ $support ] ) ) {
-			$stable_support_config = array();
-			foreach ( $config as $key => $value ) {
-				if ( array_key_exists( $key, $experimental_to_stable_keys[ $support ] ) ) {
-					$stable_support_config[ $experimental_to_stable_keys[ $support ][ $key ] ] = $value;
-				} else {
-					$stable_support_config[ $key ] = $value;
-				}
-			}
-			$updated_supports[ $support ] = $stable_support_config;
-		}
+		$updated_supports[ $stable_support_key ] = $stable_config;
 	}
 
 	$args['supports'] = $updated_supports;

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

@@ -161,14 +161,8 @@ export function BorderPanel( { clientId, name, setAttributes, settings } ) {
 	}
 
 	const defaultControls = {
-		...getBlockSupport( name, [
-			BORDER_SUPPORT_KEY,
-			'__experimentalDefaultControls',
-		] ),
-		...getBlockSupport( name, [
-			SHADOW_SUPPORT_KEY,
-			'__experimentalDefaultControls',
-		] ),
+		...getBlockSupport( name, [ BORDER_SUPPORT_KEY, 'defaultControls' ] ),
+		...getBlockSupport( name, [ SHADOW_SUPPORT_KEY, 'defaultControls' ] ),
 	};
 
 	return (

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

@@ -290,7 +290,7 @@ export function ColorEdit( { clientId, name, setAttributes, settings } ) {
 
 	const defaultControls = getBlockSupport( name, [
 		COLOR_SUPPORT_KEY,
-		'__experimentalDefaultControls',
+		'defaultControls',
 	] );
 
 	const enableContrastChecking =

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

@@ -88,11 +88,11 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 
 	const defaultDimensionsControls = getBlockSupport( name, [
 		DIMENSIONS_SUPPORT_KEY,
-		'__experimentalDefaultControls',
+		'defaultControls',
 	] );
 	const defaultSpacingControls = getBlockSupport( name, [
 		SPACING_SUPPORT_KEY,
-		'__experimentalDefaultControls',
+		'defaultControls',
 	] );
 	const defaultControls = {
 		...defaultDimensionsControls,

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

@@ -98,22 +98,16 @@ function addAttribute( settings ) {
  * @type {Record<string, string[]>}
  */
 const skipSerializationPathsEdit = {
-	[ `${ BORDER_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ 'border' ],
-	[ `${ COLOR_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
-		COLOR_SUPPORT_KEY,
-	],
-	[ `${ TYPOGRAPHY_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
+	[ `${ BORDER_SUPPORT_KEY }.skipSerialization` ]: [ 'border' ],
+	[ `${ COLOR_SUPPORT_KEY }.skipSerialization` ]: [ COLOR_SUPPORT_KEY ],
+	[ `${ TYPOGRAPHY_SUPPORT_KEY }.skipSerialization` ]: [
 		TYPOGRAPHY_SUPPORT_KEY,
 	],
-	[ `${ DIMENSIONS_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
+	[ `${ DIMENSIONS_SUPPORT_KEY }.skipSerialization` ]: [
 		DIMENSIONS_SUPPORT_KEY,
 	],
-	[ `${ SPACING_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
-		SPACING_SUPPORT_KEY,
-	],
-	[ `${ SHADOW_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
-		SHADOW_SUPPORT_KEY,
-	],
+	[ `${ SPACING_SUPPORT_KEY }.skipSerialization` ]: [ SPACING_SUPPORT_KEY ],
+	[ `${ SHADOW_SUPPORT_KEY }.skipSerialization` ]: [ SHADOW_SUPPORT_KEY ],
 };
 
 /**

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

@@ -133,8 +133,7 @@ describe( 'addSaveProps', () => {
 	const applySkipSerialization = ( features ) => {
 		const updatedSettings = { ...blockSettings };
 		Object.keys( features ).forEach( ( key ) => {
-			updatedSettings.supports[ key ].__experimentalSkipSerialization =
-				features[ key ];
+			updatedSettings.supports[ key ].skipSerialization = features[ key ];
 		} );
 		return updatedSettings;
 	};

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

@@ -133,7 +133,7 @@ export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
 
 	const defaultControls = getBlockSupport( name, [
 		TYPOGRAPHY_SUPPORT_KEY,
-		'__experimentalDefaultControls',
+		'defaultControls',
 	] );
 
 	return (

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

@@ -124,7 +124,7 @@ export function shouldSkipSerialization(
 	feature
 ) {
 	const support = getBlockSupport( blockNameOrType, featureSet );
-	const skipSerialization = support?.__experimentalSkipSerialization;
+	const skipSerialization = support?.skipSerialization;
 
 	if ( Array.isArray( skipSerialization ) ) {
 		return skipSerialization.includes( feature );

packages/blocks/src/api/constants.js

@@ -298,7 +298,16 @@ export const __EXPERIMENTAL_PATHS_WITH_OVERRIDE = {
 	'spacing.spacingSizes': true,
 };
 
-export const EXPERIMENTAL_TO_STABLE_KEYS = {
+export const EXPERIMENTAL_SUPPORTS_MAP = {
+	__experimentalBorder: 'border',
+};
+
+export const COMMON_EXPERIMENTAL_PROPERTIES = {
+	__experimentalDefaultControls: 'defaultControls',
+	__experimentalSkipSerialization: 'skipSerialization',
+};
+
+export const EXPERIMENTAL_SUPPORT_PROPERTIES = {
 	typography: {
 		__experimentalFontFamily: 'fontFamily',
 		__experimentalFontStyle: 'fontStyle',
@@ -307,5 +316,4 @@ export const EXPERIMENTAL_TO_STABLE_KEYS = {
 		__experimentalTextDecoration: 'textDecoration',
 		__experimentalTextTransform: 'textTransform',
 	},
-	__experimentalBorder: 'border',
 };