diff --git a/backport-changelog/6.8/7069.md b/backport-changelog/6.8/7069.md new file mode 100644 index 00000000000000..ea3c717ec3c93a --- /dev/null +++ b/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 diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index a4719b7bdd4099..21086b94f15c1a 100644 --- a/lib/block-supports/typography.php +++ b/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. diff --git a/lib/compat/wordpress-6.8/blocks.php b/lib/compat/wordpress-6.8/blocks.php new file mode 100644 index 00000000000000..3124dd2a12a615 --- /dev/null +++ b/lib/compat/wordpress-6.8/blocks.php @@ -0,0 +1,47 @@ + '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 ); diff --git a/lib/load.php b/lib/load.php index 0540d4cd9efac7..6236f0eb04b3c6 100644 --- a/lib/load.php +++ b/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'; diff --git a/packages/block-editor/src/hooks/font-family.js b/packages/block-editor/src/hooks/font-family.js index ba9a66a8bcf04f..e5d8e02ab8ec02 100644 --- a/packages/block-editor/src/hooks/font-family.js +++ b/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 ); /** diff --git a/packages/block-editor/src/hooks/supports.js b/packages/block-editor/src/hooks/supports.js index 75f2bdf2dc219e..c0b6bb2cc8b271 100644 --- a/packages/block-editor/src/hooks/supports.js +++ b/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, diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js index cf3f4327c8f034..ab9a464fe5efbc 100644 --- a/packages/block-editor/src/hooks/typography.js +++ b/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 = [ diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index 620dfcbb8599c0..85a359af754db8 100644 --- a/packages/blocks/src/api/constants.js +++ b/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', +}; diff --git a/packages/blocks/src/store/process-block-type.js b/packages/blocks/src/store/process-block-type.js index bc7b1a0e10e774..8e5b7962adfe17 100644 --- a/packages/blocks/src/store/process-block-type.js +++ b/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,6 +124,9 @@ export const processBlockType = ), }; + // Stabilize any experimental supports before applying filters. + blockType.supports = stabilizeSupports( blockType.supports ); + const settings = applyFilters( 'blocks.registerBlockType', blockType, @@ -109,6 +134,10 @@ export const processBlockType = 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 ) ) { diff --git a/packages/blocks/src/store/test/private-selectors.js b/packages/blocks/src/store/test/private-selectors.js index ada2bd7c8cbcfe..2c173b96b0bcb1 100644 --- a/packages/blocks/src/store/test/private-selectors.js +++ b/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, }, diff --git a/packages/blocks/src/store/test/process-block-type.js b/packages/blocks/src/store/test/process-block-type.js new file mode 100644 index 00000000000000..3c6838e311f778 --- /dev/null +++ b/packages/blocks/src/store/test/process-block-type.js @@ -0,0 +1,304 @@ +/** + * WordPress dependencies + */ +import { addFilter, removeFilter } from '@wordpress/hooks'; + +/** + * Internal dependencies + */ +import { processBlockType } from '../process-block-type'; + +describe( 'processBlockType', () => { + const baseBlockSettings = { + apiVersion: 3, + attributes: {}, + edit: () => null, + name: 'test/block', + save: () => null, + title: 'Test Block', + }; + + const select = { + getBootstrappedBlockType: () => null, + }; + + afterEach( () => { + removeFilter( 'blocks.registerBlockType', 'test/filterSupports' ); + } ); + + it( 'should return the block type with stabilized typography supports', () => { + const blockSettings = { + ...baseBlockSettings, + supports: { + typography: { + fontSize: true, + lineHeight: true, + __experimentalFontFamily: true, + __experimentalFontStyle: true, + __experimentalFontWeight: true, + __experimentalLetterSpacing: true, + __experimentalTextTransform: true, + __experimentalTextDecoration: true, + __experimentalWritingMode: true, + __experimentalDefaultControls: { + fontSize: true, + fontAppearance: true, + textTransform: true, + }, + }, + }, + }; + + const processedBlockType = processBlockType( + 'test/block', + blockSettings + )( { select } ); + + expect( processedBlockType.supports.typography ).toEqual( { + fontSize: true, + lineHeight: true, + fontFamily: true, + fontStyle: true, + fontWeight: true, + letterSpacing: true, + textTransform: true, + textDecoration: true, + __experimentalWritingMode: true, + __experimentalDefaultControls: { + fontSize: true, + fontAppearance: true, + textTransform: true, + }, + } ); + } ); + + it( 'should return the block type with stable typography supports', () => { + const blockSettings = { + ...baseBlockSettings, + supports: { + typography: { + fontSize: true, + lineHeight: true, + fontFamily: true, + fontStyle: true, + fontWeight: true, + letterSpacing: true, + textTransform: true, + textDecoration: true, + __experimentalWritingMode: true, + __experimentalDefaultControls: { + fontSize: true, + fontAppearance: true, + textTransform: true, + }, + }, + }, + }; + + const processedBlockType = processBlockType( + 'test/block', + blockSettings + )( { select } ); + + expect( processedBlockType.supports.typography ).toEqual( { + fontSize: true, + lineHeight: true, + fontFamily: true, + fontStyle: true, + fontWeight: true, + letterSpacing: true, + textTransform: true, + textDecoration: true, + __experimentalWritingMode: true, + __experimentalDefaultControls: { + fontSize: true, + fontAppearance: true, + textTransform: true, + }, + } ); + } ); + + it( 'should reapply transformations after supports are filtered', () => { + const blockSettings = { + ...baseBlockSettings, + supports: { + typography: { + fontSize: true, + lineHeight: true, + __experimentalFontFamily: true, + __experimentalFontStyle: true, + __experimentalFontWeight: true, + __experimentalLetterSpacing: true, + __experimentalTextTransform: true, + __experimentalTextDecoration: true, + __experimentalWritingMode: true, + __experimentalDefaultControls: { + fontSize: true, + fontAppearance: true, + textTransform: true, + }, + }, + }, + }; + + addFilter( + 'blocks.registerBlockType', + 'test/filterSupports', + ( settings, name ) => { + if ( name === 'test/block' && settings.supports.typography ) { + settings.supports.typography.__experimentalFontFamily = false; + settings.supports.typography.__experimentalFontStyle = false; + settings.supports.typography.__experimentalFontWeight = false; + } + return settings; + } + ); + + const processedBlockType = processBlockType( + 'test/block', + blockSettings + )( { select } ); + + expect( processedBlockType.supports.typography ).toEqual( { + fontSize: true, + lineHeight: true, + fontFamily: false, + fontStyle: false, + fontWeight: false, + letterSpacing: true, + textTransform: true, + textDecoration: true, + __experimentalWritingMode: true, + __experimentalDefaultControls: { + fontSize: true, + fontAppearance: true, + textTransform: true, + }, + } ); + } ); + + it( 'should stabilize experimental typography supports within block deprecations', () => { + const blockSettings = { + ...baseBlockSettings, + supports: { + typography: { + fontSize: true, + lineHeight: true, + fontFamily: true, + fontStyle: true, + fontWeight: true, + letterSpacing: true, + textTransform: true, + textDecoration: true, + __experimentalWritingMode: true, + __experimentalDefaultControls: { + fontSize: true, + fontAppearance: true, + textTransform: true, + }, + }, + }, + deprecated: [ + { + supports: { + typography: { + __experimentalFontFamily: true, + __experimentalFontStyle: true, + __experimentalFontWeight: true, + __experimentalLetterSpacing: true, + __experimentalTextTransform: true, + __experimentalTextDecoration: true, + __experimentalWritingMode: true, + }, + }, + }, + ], + }; + + const processedBlockType = processBlockType( + 'test/block', + blockSettings + )( { select } ); + + expect( + processedBlockType.deprecated[ 0 ].supports.typography + ).toEqual( { + fontFamily: true, + fontStyle: true, + fontWeight: true, + letterSpacing: true, + textTransform: true, + textDecoration: true, + __experimentalWritingMode: true, + } ); + } ); + + it( 'should reapply transformations after supports are filtered within block deprecations', () => { + const blockSettings = { + ...baseBlockSettings, + supports: { + typography: { + fontSize: true, + lineHeight: true, + fontFamily: true, + fontStyle: true, + fontWeight: true, + letterSpacing: true, + textTransform: true, + textDecoration: true, + __experimentalWritingMode: true, + __experimentalDefaultControls: { + fontSize: true, + fontAppearance: true, + textTransform: true, + }, + }, + }, + deprecated: [ + { + supports: { + typography: { + __experimentalFontFamily: true, + __experimentalFontStyle: true, + __experimentalFontWeight: true, + __experimentalLetterSpacing: true, + __experimentalTextTransform: true, + __experimentalTextDecoration: true, + __experimentalWritingMode: true, + }, + }, + }, + ], + }; + + addFilter( + 'blocks.registerBlockType', + 'test/filterSupports', + ( settings, name ) => { + if ( name === 'test/block' && settings.supports.typography ) { + settings.supports.typography.__experimentalFontFamily = false; + settings.supports.typography.__experimentalFontStyle = false; + settings.supports.typography.__experimentalFontWeight = false; + } + return settings; + } + ); + + const processedBlockType = processBlockType( + 'test/block', + blockSettings + )( { select } ); + + expect( + processedBlockType.deprecated[ 0 ].supports.typography + ).toEqual( { + fontFamily: false, + fontStyle: false, + fontWeight: false, + letterSpacing: true, + textTransform: true, + textDecoration: true, + __experimentalWritingMode: true, + } ); + } ); +} ); diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php index eafd505db6ec65..1804659c11af3c 100644 --- a/phpunit/block-supports/typography-test.php +++ b/phpunit/block-supports/typography-test.php @@ -283,6 +283,111 @@ public function test_should_generate_classname_for_font_family() { $this->assertSame( $expected, $actual ); } + /** + * Tests that stabilized typography supports will also apply to blocks using + * the experimental syntax, for backwards compatibility with existing blocks. + * + * @covers ::gutenberg_apply_typography_support + */ + public function test_should_apply_experimental_typography_supports() { + $this->test_block_name = 'test/experimental-typography-supports'; + register_block_type( + $this->test_block_name, + array( + 'api_version' => 3, + 'attributes' => array( + 'style' => array( + 'type' => 'object', + ), + ), + 'supports' => array( + 'typography' => array( + '__experimentalFontFamily' => true, + '__experimentalFontStyle' => true, + '__experimentalFontWeight' => true, + '__experimentalLetterSpacing' => true, + '__experimentalTextDecoration' => true, + '__experimentalTextTransform' => true, + ), + ), + ) + ); + $registry = WP_Block_Type_Registry::get_instance(); + $block_type = $registry->get_registered( $this->test_block_name ); + $block_atts = array( + 'fontFamily' => 'serif', + 'style' => array( + 'typography' => array( + 'fontStyle' => 'italic', + 'fontWeight' => 'bold', + 'letterSpacing' => '1px', + 'textDecoration' => 'underline', + 'textTransform' => 'uppercase', + ), + ), + ); + + $actual = gutenberg_apply_typography_support( $block_type, $block_atts ); + $expected = array( + 'class' => 'has-serif-font-family', + 'style' => 'font-style:italic;font-weight:bold;text-decoration:underline;text-transform:uppercase;letter-spacing:1px;', + ); + + $this->assertSame( $expected, $actual ); + } + + /** + * Tests that stabilized typography supports are applied correctly. + * + * @covers ::gutenberg_apply_typography_support + */ + public function test_should_apply_stabilized_typography_supports() { + $this->test_block_name = 'test/experimental-typography-supports'; + register_block_type( + $this->test_block_name, + array( + 'api_version' => 3, + 'attributes' => array( + 'style' => array( + 'type' => 'object', + ), + ), + 'supports' => array( + 'typography' => array( + 'fontFamily' => true, + 'fontStyle' => true, + 'fontWeight' => true, + 'letterSpacing' => true, + 'textDecoration' => true, + 'textTransform' => true, + ), + ), + ) + ); + $registry = WP_Block_Type_Registry::get_instance(); + $block_type = $registry->get_registered( $this->test_block_name ); + $block_atts = array( + 'fontFamily' => 'serif', + 'style' => array( + 'typography' => array( + 'fontStyle' => 'italic', + 'fontWeight' => 'bold', + 'letterSpacing' => '1px', + 'textDecoration' => 'underline', + 'textTransform' => 'uppercase', + ), + ), + ); + + $actual = gutenberg_apply_typography_support( $block_type, $block_atts ); + $expected = array( + 'class' => 'has-serif-font-family', + 'style' => 'font-style:italic;font-weight:bold;text-decoration:underline;text-transform:uppercase;letter-spacing:1px;', + ); + + $this->assertSame( $expected, $actual ); + } + /** * Tests generating font size values, including fluid formulae, from fontSizes preset. *