Typography: Stabilize typography block supports within block processi…

…ng (#63401)

* Try stabilizing typography block supports within block processing

* Update test

* Try PHP equivalent

* Add backport changelog entry

* Update so that writingMode is not stabilized

* Add tests for the PHP implementation

* Alphabetize

* Move the PHP transformation to the compat directory so that it can be removed once 6.7 is the required minimum version

* Update filter priority

* Update phpunit/block-supports/typography-test.php

Co-authored-by: Aaron Robertshaw <[email protected]>

* Update phpunit/block-supports/typography-test.php

Co-authored-by: Aaron Robertshaw <[email protected]>

* Update phpunit/block-supports/typography-test.php

Co-authored-by: Aaron Robertshaw <[email protected]>

* Update phpunit/block-supports/typography-test.php

Co-authored-by: Aaron Robertshaw <[email protected]>

* Perform transformation a second time after applying filters

* Move to 6.8 directory

---------

Co-authored-by: Aaron Robertshaw <[email protected]>
Co-authored-by: andrewserong <[email protected]>
Co-authored-by: ramonjd <[email protected]>
Co-authored-by: aaronrobertshaw <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: gziolo <[email protected]>
Co-authored-by: ndiego <[email protected]>
Co-authored-by: justintadlock <[email protected]>
Co-authored-by: annezazu <[email protected]>

backport-changelog/6.8/7069.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7069
+
+* https://github.com/WordPress/gutenberg/pull/63401

lib/block-supports/typography.php

@@ -20,16 +20,16 @@ function gutenberg_register_typography_support( $block_type ) {
 		return;
 	}
 
-	$has_font_family_support     = $typography_supports['__experimentalFontFamily'] ?? false;
+	$has_font_family_support     = $typography_supports['fontFamily'] ?? false;
 	$has_font_size_support       = $typography_supports['fontSize'] ?? false;
-	$has_font_style_support      = $typography_supports['__experimentalFontStyle'] ?? false;
-	$has_font_weight_support     = $typography_supports['__experimentalFontWeight'] ?? false;
-	$has_letter_spacing_support  = $typography_supports['__experimentalLetterSpacing'] ?? false;
+	$has_font_style_support      = $typography_supports['fontStyle'] ?? false;
+	$has_font_weight_support     = $typography_supports['fontWeight'] ?? false;
+	$has_letter_spacing_support  = $typography_supports['letterSpacing'] ?? false;
 	$has_line_height_support     = $typography_supports['lineHeight'] ?? false;
 	$has_text_align_support      = $typography_supports['textAlign'] ?? false;
 	$has_text_columns_support    = $typography_supports['textColumns'] ?? false;
-	$has_text_decoration_support = $typography_supports['__experimentalTextDecoration'] ?? false;
-	$has_text_transform_support  = $typography_supports['__experimentalTextTransform'] ?? false;
+	$has_text_decoration_support = $typography_supports['textDecoration'] ?? false;
+	$has_text_transform_support  = $typography_supports['textTransform'] ?? false;
 	$has_writing_mode_support    = $typography_supports['__experimentalWritingMode'] ?? false;
 
 	$has_typography_support = $has_font_family_support
@@ -91,16 +91,16 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 		return array();
 	}
 
-	$has_font_family_support     = $typography_supports['__experimentalFontFamily'] ?? false;
+	$has_font_family_support     = $typography_supports['fontFamily'] ?? false;
 	$has_font_size_support       = $typography_supports['fontSize'] ?? false;
-	$has_font_style_support      = $typography_supports['__experimentalFontStyle'] ?? false;
-	$has_font_weight_support     = $typography_supports['__experimentalFontWeight'] ?? false;
-	$has_letter_spacing_support  = $typography_supports['__experimentalLetterSpacing'] ?? false;
+	$has_font_style_support      = $typography_supports['fontStyle'] ?? false;
+	$has_font_weight_support     = $typography_supports['fontWeight'] ?? false;
+	$has_letter_spacing_support  = $typography_supports['letterSpacing'] ?? false;
 	$has_line_height_support     = $typography_supports['lineHeight'] ?? false;
 	$has_text_align_support      = $typography_supports['textAlign'] ?? false;
 	$has_text_columns_support    = $typography_supports['textColumns'] ?? false;
-	$has_text_decoration_support = $typography_supports['__experimentalTextDecoration'] ?? false;
-	$has_text_transform_support  = $typography_supports['__experimentalTextTransform'] ?? false;
+	$has_text_decoration_support = $typography_supports['textDecoration'] ?? false;
+	$has_text_transform_support  = $typography_supports['textTransform'] ?? false;
 	$has_writing_mode_support    = $typography_supports['__experimentalWritingMode'] ?? false;
 
 	// Whether to skip individual block support features.

lib/compat/wordpress-6.8/blocks.php

@@ -0,0 +1,47 @@
+<?php
+/**
+ * Temporary compatibility shims for block APIs present in Gutenberg.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Filters the block type arguments during registration to stabilize experimental block supports.
+ *
+ * This is a temporary compatibility shim as the approach in core is for this to be handled
+ * within the WP_Block_Type class rather than requiring a filter.
+ *
+ * @param array $args Array of arguments for registering a block type.
+ * @return array Array of arguments for registering a block type.
+ */
+function gutenberg_stabilize_experimental_block_supports( $args ) {
+	if ( empty( $args['supports']['typography'] ) ) {
+		return $args;
+	}
+
+	$experimental_typography_supports_to_stable = array(
+		'__experimentalFontFamily'     => 'fontFamily',
+		'__experimentalFontStyle'      => 'fontStyle',
+		'__experimentalFontWeight'     => 'fontWeight',
+		'__experimentalLetterSpacing'  => 'letterSpacing',
+		'__experimentalTextDecoration' => 'textDecoration',
+		'__experimentalTextTransform'  => 'textTransform',
+	);
+
+	$current_typography_supports = $args['supports']['typography'];
+	$stable_typography_supports  = array();
+
+	foreach ( $current_typography_supports as $key => $value ) {
+		if ( array_key_exists( $key, $experimental_typography_supports_to_stable ) ) {
+			$stable_typography_supports[ $experimental_typography_supports_to_stable[ $key ] ] = $value;
+		} else {
+			$stable_typography_supports[ $key ] = $value;
+		}
+	}
+
+	$args['supports']['typography'] = $stable_typography_supports;
+
+	return $args;
+}
+
+add_filter( 'register_block_type_args', 'gutenberg_stabilize_experimental_block_supports', PHP_INT_MAX, 1 );

lib/load.php

@@ -118,6 +118,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 
 // WordPress 6.8 compat.
 require __DIR__ . '/compat/wordpress-6.8/preload.php';
+require __DIR__ . '/compat/wordpress-6.8/blocks.php';
 
 // Experimental features.
 require __DIR__ . '/experimental/block-editor-settings-mobile.php';

packages/block-editor/src/hooks/font-family.js

@@ -13,7 +13,7 @@ import { shouldSkipSerialization } from './utils';
 import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
 import { unlock } from '../lock-unlock';
 
-export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
+export const FONT_FAMILY_SUPPORT_KEY = 'typography.fontFamily';
 const { kebabCase } = unlock( componentsPrivateApis );
 
 /**

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

@@ -9,17 +9,17 @@ const ALIGN_WIDE_SUPPORT_KEY = 'alignWide';
 const BORDER_SUPPORT_KEY = '__experimentalBorder';
 const COLOR_SUPPORT_KEY = 'color';
 const CUSTOM_CLASS_NAME_SUPPORT_KEY = 'customClassName';
-const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
+const FONT_FAMILY_SUPPORT_KEY = 'typography.fontFamily';
 const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
 const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight';
 /**
  * Key within block settings' support array indicating support for font style.
  */
-const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
+const FONT_STYLE_SUPPORT_KEY = 'typography.fontStyle';
 /**
  * Key within block settings' support array indicating support for font weight.
  */
-const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
+const FONT_WEIGHT_SUPPORT_KEY = 'typography.fontWeight';
 /**
  * Key within block settings' supports array indicating support for text
  * align e.g. settings found in `block.json`.
@@ -34,7 +34,7 @@ const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
  * Key within block settings' supports array indicating support for text
  * decorations e.g. settings found in `block.json`.
  */
-const TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';
+const TEXT_DECORATION_SUPPORT_KEY = 'typography.textDecoration';
 /**
  * Key within block settings' supports array indicating support for writing mode
  * e.g. settings found in `block.json`.
@@ -44,13 +44,13 @@ const WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode';
  * Key within block settings' supports array indicating support for text
  * transforms e.g. settings found in `block.json`.
  */
-const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform';
+const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.textTransform';
 
 /**
  * Key within block settings' supports array indicating support for letter-spacing
  * e.g. settings found in `block.json`.
  */
-const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing';
+const LETTER_SPACING_SUPPORT_KEY = 'typography.letterSpacing';
 const LAYOUT_SUPPORT_KEY = 'layout';
 const TYPOGRAPHY_SUPPORT_KEYS = [
 	LINE_HEIGHT_SUPPORT_KEY,

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

@@ -27,12 +27,12 @@ function omit( object, keys ) {
 	);
 }
 
-const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing';
-const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform';
-const TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';
+const LETTER_SPACING_SUPPORT_KEY = 'typography.letterSpacing';
+const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.textTransform';
+const TEXT_DECORATION_SUPPORT_KEY = 'typography.textDecoration';
 const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
-const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
-const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
+const FONT_STYLE_SUPPORT_KEY = 'typography.fontStyle';
+const FONT_WEIGHT_SUPPORT_KEY = 'typography.fontWeight';
 const WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode';
 export const TYPOGRAPHY_SUPPORT_KEY = 'typography';
 export const TYPOGRAPHY_SUPPORT_KEYS = [

packages/blocks/src/api/constants.js

@@ -183,7 +183,7 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 	},
 	fontFamily: {
 		value: [ 'typography', 'fontFamily' ],
-		support: [ 'typography', '__experimentalFontFamily' ],
+		support: [ 'typography', 'fontFamily' ],
 		useEngine: true,
 	},
 	fontSize: {
@@ -193,12 +193,12 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 	},
 	fontStyle: {
 		value: [ 'typography', 'fontStyle' ],
-		support: [ 'typography', '__experimentalFontStyle' ],
+		support: [ 'typography', 'fontStyle' ],
 		useEngine: true,
 	},
 	fontWeight: {
 		value: [ 'typography', 'fontWeight' ],
-		support: [ 'typography', '__experimentalFontWeight' ],
+		support: [ 'typography', 'fontWeight' ],
 		useEngine: true,
 	},
 	lineHeight: {
@@ -240,17 +240,17 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 	},
 	textDecoration: {
 		value: [ 'typography', 'textDecoration' ],
-		support: [ 'typography', '__experimentalTextDecoration' ],
+		support: [ 'typography', 'textDecoration' ],
 		useEngine: true,
 	},
 	textTransform: {
 		value: [ 'typography', 'textTransform' ],
-		support: [ 'typography', '__experimentalTextTransform' ],
+		support: [ 'typography', 'textTransform' ],
 		useEngine: true,
 	},
 	letterSpacing: {
 		value: [ 'typography', 'letterSpacing' ],
-		support: [ 'typography', '__experimentalLetterSpacing' ],
+		support: [ 'typography', 'letterSpacing' ],
 		useEngine: true,
 	},
 	writingMode: {
@@ -297,3 +297,12 @@ export const __EXPERIMENTAL_PATHS_WITH_OVERRIDE = {
 	'typography.fontSizes': true,
 	'spacing.spacingSizes': true,
 };
+
+export const TYPOGRAPHY_SUPPORTS_EXPERIMENTAL_TO_STABLE = {
+	__experimentalFontFamily: 'fontFamily',
+	__experimentalFontStyle: 'fontStyle',
+	__experimentalFontWeight: 'fontWeight',
+	__experimentalLetterSpacing: 'letterSpacing',
+	__experimentalTextDecoration: 'textDecoration',
+	__experimentalTextTransform: 'textTransform',
+};

packages/blocks/src/store/process-block-type.js

@@ -15,7 +15,11 @@ import warning from '@wordpress/warning';
  * Internal dependencies
  */
 import { isValidIcon, normalizeIconObject, omit } from '../api/utils';
-import { BLOCK_ICON_DEFAULT, DEPRECATED_ENTRY_KEYS } from '../api/constants';
+import {
+	BLOCK_ICON_DEFAULT,
+	DEPRECATED_ENTRY_KEYS,
+	TYPOGRAPHY_SUPPORTS_EXPERIMENTAL_TO_STABLE,
+} from '../api/constants';
 
 /** @typedef {import('../api/registration').WPBlockType} WPBlockType */
 
@@ -62,6 +66,24 @@ function mergeBlockVariations(
 	return result;
 }
 
+function stabilizeSupports( rawSupports ) {
+	if ( ! rawSupports ) {
+		return rawSupports;
+	}
+
+	const supports = { ...rawSupports };
+	if ( supports?.typography && typeof supports.typography === 'object' ) {
+		supports.typography = Object.fromEntries(
+			Object.entries( supports.typography ).map( ( [ key, value ] ) => [
+				TYPOGRAPHY_SUPPORTS_EXPERIMENTAL_TO_STABLE[ key ] || key,
+				value,
+			] )
+		);
+	}
+
+	return supports;
+}
+
 /**
  * Takes the unprocessed block type settings, merges them with block type metadata
  * and applies all the existing filters for the registered block type.
@@ -102,13 +124,20 @@ export const processBlockType =
 			),
 		};
 
+		// Stabilize any experimental supports before applying filters.
+		blockType.supports = stabilizeSupports( blockType.supports );
+
 		const settings = applyFilters(
 			'blocks.registerBlockType',
 			blockType,
 			name,
 			null
 		);
 
+		// Re-stabilize any experimental supports after applying filters.
+		// This ensures that any supports updated by filters are also stabilized.
+		blockType.supports = stabilizeSupports( blockType.supports );
+
 		if (
 			settings.description &&
 			typeof settings.description !== 'string'
@@ -119,29 +148,38 @@ export const processBlockType =
 		}
 
 		if ( settings.deprecated ) {
-			settings.deprecated = settings.deprecated.map( ( deprecation ) =>
-				Object.fromEntries(
-					Object.entries(
-						// Only keep valid deprecation keys.
-						applyFilters(
-							'blocks.registerBlockType',
-							// Merge deprecation keys with pre-filter settings
-							// so that filters that depend on specific keys being
-							// present don't fail.
-							{
-								// Omit deprecation keys here so that deprecations
-								// can opt out of specific keys like "supports".
-								...omit( blockType, DEPRECATED_ENTRY_KEYS ),
-								...deprecation,
-							},
-							blockType.name,
-							deprecation
-						)
-					).filter( ( [ key ] ) =>
+			settings.deprecated = settings.deprecated.map( ( deprecation ) => {
+				// Stabilize any experimental supports before applying filters.
+				deprecation.supports = stabilizeSupports(
+					deprecation.supports
+				);
+				const filteredDeprecation = // Only keep valid deprecation keys.
+					applyFilters(
+						'blocks.registerBlockType',
+						// Merge deprecation keys with pre-filter settings
+						// so that filters that depend on specific keys being
+						// present don't fail.
+						{
+							// Omit deprecation keys here so that deprecations
+							// can opt out of specific keys like "supports".
+							...omit( blockType, DEPRECATED_ENTRY_KEYS ),
+							...deprecation,
+						},
+						blockType.name,
+						deprecation
+					);
+				// Re-stabilize any experimental supports after applying filters.
+				// This ensures that any supports updated by filters are also stabilized.
+				filteredDeprecation.supports = stabilizeSupports(
+					filteredDeprecation.supports
+				);
+
+				return Object.fromEntries(
+					Object.entries( filteredDeprecation ).filter( ( [ key ] ) =>
 						DEPRECATED_ENTRY_KEYS.includes( key )
 					)
-				)
-			);
+				);
+			} );
 		}
 
 		if ( ! isPlainObject( settings ) ) {

packages/blocks/src/store/test/private-selectors.js

@@ -127,12 +127,12 @@ describe( 'private selectors', () => {
 						name: 'core/example-block',
 						supports: {
 							typography: {
-								__experimentalFontFamily: true,
-								__experimentalFontStyle: true,
-								__experimentalFontWeight: true,
-								__experimentalTextDecoration: true,
-								__experimentalTextTransform: true,
-								__experimentalLetterSpacing: true,
+								fontFamily: true,
+								fontStyle: true,
+								fontWeight: true,
+								textDecoration: true,
+								textTransform: true,
+								letterSpacing: true,
 								fontSize: true,
 								lineHeight: true,
 							},