diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index fa2a7b81e94e21..c18c4a8b4a51c1 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -20,17 +20,39 @@ function gutenberg_register_typography_support( $block_type ) { return; } - $has_font_family_support = $typography_supports['__experimentalFontFamily'] ?? 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_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_writing_mode_support = $typography_supports['__experimentalWritingMode'] ?? false; + $has_font_family_support = + ( isset( $typography_supports['fontFamily'] ) && $typography_supports['fontFamily'] ) || + ( isset( $typography_supports['__experimentalFontFamily'] ) && $typography_supports['__experimentalFontFamily'] ) || + false; + $has_font_style_support = + ( isset( $typography_supports['fontStyle'] ) && $typography_supports['fontStyle'] ) || + ( isset( $typography_supports['__experimentalFontStyle'] ) && $typography_supports['__experimentalFontStyle'] ) || + false; + $has_font_weight_support = + ( isset( $typography_supports['fontWeight'] ) && $typography_supports['fontWeight'] ) || + ( isset( $typography_supports['__experimentalFontWeight'] ) && $typography_supports['__experimentalFontWeight'] ) || + false; + $has_letter_spacing_support = + ( isset( $typography_supports['letterSpacing'] ) && $typography_supports['letterSpacing'] ) || + ( isset( $typography_supports['__experimentalLetterSpacing'] ) && $typography_supports['__experimentalLetterSpacing'] ) || + false; + $has_text_decoration_support = + ( isset( $typography_supports['textDecoration'] ) && $typography_supports['textDecoration'] ) || + ( isset( $typography_supports['__experimentalTextDecoration'] ) && $typography_supports['__experimentalTextDecoration'] ) || + false; + $has_text_transform_support = + ( isset( $typography_supports['textTransform'] ) && $typography_supports['textTransform'] ) || + ( isset( $typography_supports['__experimentalTextTransform'] ) && $typography_supports['__experimentalTextTransform'] ) || + false; + $has_writing_mode_support = + ( isset( $typography_supports['writingMode'] ) && $typography_supports['writingMode'] ) || + ( isset( $typography_supports['__experimentalWritingMode'] ) && $typography_supports['__experimentalWritingMode'] ) || + false; + + $has_font_size_support = $typography_supports['fontSize'] ?? 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_typography_support = $has_font_family_support || $has_font_size_support @@ -91,17 +113,39 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { return array(); } - $has_font_family_support = $typography_supports['__experimentalFontFamily'] ?? 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_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_writing_mode_support = $typography_supports['__experimentalWritingMode'] ?? false; + $has_font_family_support = + ( isset( $typography_supports['fontFamily'] ) && $typography_supports['fontFamily'] ) || + ( isset( $typography_supports['__experimentalFontFamily'] ) && $typography_supports['__experimentalFontFamily'] ) || + false; + $has_font_style_support = + ( isset( $typography_supports['fontStyle'] ) && $typography_supports['fontStyle'] ) || + ( isset( $typography_supports['__experimentalFontStyle'] ) && $typography_supports['__experimentalFontStyle'] ) || + false; + $has_font_weight_support = + ( isset( $typography_supports['fontWeight'] ) && $typography_supports['fontWeight'] ) || + ( isset( $typography_supports['__experimentalFontWeight'] ) && $typography_supports['__experimentalFontWeight'] ) || + false; + $has_letter_spacing_support = + ( isset( $typography_supports['letterSpacing'] ) && $typography_supports['letterSpacing'] ) || + ( isset( $typography_supports['__experimentalLetterSpacing'] ) && $typography_supports['__experimentalLetterSpacing'] ) || + false; + $has_text_decoration_support = + ( isset( $typography_supports['textDecoration'] ) && $typography_supports['textDecoration'] ) || + ( isset( $typography_supports['__experimentalTextDecoration'] ) && $typography_supports['__experimentalTextDecoration'] ) || + false; + $has_text_transform_support = + ( isset( $typography_supports['textTransform'] ) && $typography_supports['textTransform'] ) || + ( isset( $typography_supports['__experimentalTextTransform'] ) && $typography_supports['__experimentalTextTransform'] ) || + false; + $has_writing_mode_support = + ( isset( $typography_supports['writingMode'] ) && $typography_supports['writingMode'] ) || + ( isset( $typography_supports['__experimentalWritingMode'] ) && $typography_supports['__experimentalWritingMode'] ) || + false; + + $has_font_size_support = $typography_supports['fontSize'] ?? 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; // Whether to skip individual block support features. $should_skip_font_size = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontSize' ); diff --git a/packages/block-editor/src/hooks/font-family.js b/packages/block-editor/src/hooks/font-family.js index ba9a66a8bcf04f..9019f0f65c5f5c 100644 --- a/packages/block-editor/src/hooks/font-family.js +++ b/packages/block-editor/src/hooks/font-family.js @@ -13,7 +13,9 @@ 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'; +export const EXPERIMENTAL_FONT_FAMILY_SUPPORT_KEY = + 'typography.__experimentalFontFamily'; const { kebabCase } = unlock( componentsPrivateApis ); /** @@ -24,7 +26,10 @@ const { kebabCase } = unlock( componentsPrivateApis ); * @return {Object} Filtered block settings */ function addAttributes( settings ) { - if ( ! hasBlockSupport( settings, FONT_FAMILY_SUPPORT_KEY ) ) { + if ( + ! hasBlockSupport( settings, FONT_FAMILY_SUPPORT_KEY ) && + ! hasBlockSupport( settings, EXPERIMENTAL_FONT_FAMILY_SUPPORT_KEY ) + ) { return settings; } @@ -49,7 +54,10 @@ function addAttributes( settings ) { * @return {Object} Filtered props applied to save element */ function addSaveProps( props, blockType, attributes ) { - if ( ! hasBlockSupport( blockType, FONT_FAMILY_SUPPORT_KEY ) ) { + if ( + ! hasBlockSupport( blockType, FONT_FAMILY_SUPPORT_KEY ) && + ! hasBlockSupport( blockType, EXPERIMENTAL_FONT_FAMILY_SUPPORT_KEY ) + ) { return props; } @@ -85,7 +93,10 @@ export default { addSaveProps, attributeKeys: [ 'fontFamily' ], hasSupport( name ) { - return hasBlockSupport( name, FONT_FAMILY_SUPPORT_KEY ); + return ( + hasBlockSupport( name, FONT_FAMILY_SUPPORT_KEY ) || + hasBlockSupport( name, EXPERIMENTAL_FONT_FAMILY_SUPPORT_KEY ) + ); }, }; diff --git a/packages/block-editor/src/hooks/supports.js b/packages/block-editor/src/hooks/supports.js index 75f2bdf2dc219e..5d60cb60e93c86 100644 --- a/packages/block-editor/src/hooks/supports.js +++ b/packages/block-editor/src/hooks/supports.js @@ -9,17 +9,24 @@ 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 EXPERIMENTAL_FONT_FAMILY_SUPPORT_KEY = + 'typography.__experimentalFontFamily'; 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'; +const EXPERIMENTAL_FONT_STYLE_SUPPORT_KEY = + 'typography.__experimentalFontStyle'; /** * 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'; +const EXPERIMENTAL_FONT_WEIGHT_SUPPORT_KEY = + 'typography.__experimentalFontWeight'; + /** * Key within block settings' supports array indicating support for text * align e.g. settings found in `block.json`. @@ -34,36 +41,51 @@ 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'; +const EXPERIMENTAL_TEXT_DECORATION_SUPPORT_KEY = + 'typography.__experimentalTextDecoration'; /** * Key within block settings' supports array indicating support for writing mode * e.g. settings found in `block.json`. */ -const WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode'; +const WRITING_MODE_SUPPORT_KEY = 'typography.writingMode'; +const EXPERIMENTAL_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'; +const EXPERIMENTAL_TEXT_TRANSFORM_SUPPORT_KEY = + 'typography.__experimentalTextTransform'; /** * 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 EXPERIMENTAL_LETTER_SPACING_SUPPORT_KEY = + 'typography.__experimentalLetterSpacing'; const LAYOUT_SUPPORT_KEY = 'layout'; const TYPOGRAPHY_SUPPORT_KEYS = [ LINE_HEIGHT_SUPPORT_KEY, FONT_SIZE_SUPPORT_KEY, FONT_STYLE_SUPPORT_KEY, + EXPERIMENTAL_FONT_STYLE_SUPPORT_KEY, FONT_WEIGHT_SUPPORT_KEY, + EXPERIMENTAL_FONT_WEIGHT_SUPPORT_KEY, FONT_FAMILY_SUPPORT_KEY, + EXPERIMENTAL_FONT_FAMILY_SUPPORT_KEY, TEXT_ALIGN_SUPPORT_KEY, TEXT_COLUMNS_SUPPORT_KEY, TEXT_DECORATION_SUPPORT_KEY, + EXPERIMENTAL_TEXT_DECORATION_SUPPORT_KEY, TEXT_TRANSFORM_SUPPORT_KEY, + EXPERIMENTAL_TEXT_TRANSFORM_SUPPORT_KEY, WRITING_MODE_SUPPORT_KEY, + EXPERIMENTAL_WRITING_MODE_SUPPORT_KEY, LETTER_SPACING_SUPPORT_KEY, + EXPERIMENTAL_LETTER_SPACING_SUPPORT_KEY, ]; const EFFECTS_SUPPORT_KEYS = [ 'shadow' ]; const SPACING_SUPPORT_KEY = 'spacing'; @@ -284,7 +306,8 @@ export const getCustomClassNameSupport = ( nameOrType ) => * @return {boolean} Whether the block supports the feature. */ export const hasFontFamilySupport = ( nameOrType ) => - hasBlockSupport( nameOrType, FONT_FAMILY_SUPPORT_KEY ); + hasBlockSupport( nameOrType, FONT_FAMILY_SUPPORT_KEY ) || + hasBlockSupport( nameOrType, EXPERIMENTAL_FONT_FAMILY_SUPPORT_KEY ); /** * Returns the block support value for font family, if defined. @@ -293,7 +316,8 @@ export const hasFontFamilySupport = ( nameOrType ) => * @return {unknown} The block support value. */ export const getFontFamilySupport = ( nameOrType ) => - getBlockSupport( nameOrType, FONT_FAMILY_SUPPORT_KEY ); + getBlockSupport( nameOrType, FONT_FAMILY_SUPPORT_KEY ) || + getBlockSupport( nameOrType, EXPERIMENTAL_FONT_FAMILY_SUPPORT_KEY ); /** * Returns true if the block defines support for font size. diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js index cf3f4327c8f034..21194955a3d3b3 100644 --- a/packages/block-editor/src/hooks/typography.js +++ b/packages/block-editor/src/hooks/typography.js @@ -15,7 +15,10 @@ import { } from '../components/global-styles/typography-panel'; import { LINE_HEIGHT_SUPPORT_KEY } from './line-height'; -import { FONT_FAMILY_SUPPORT_KEY } from './font-family'; +import { + FONT_FAMILY_SUPPORT_KEY, + EXPERIMENTAL_FONT_FAMILY_SUPPORT_KEY, +} from './font-family'; import { FONT_SIZE_SUPPORT_KEY } from './font-size'; import { TEXT_ALIGN_SUPPORT_KEY } from './text-align'; import { cleanEmptyObject } from './utils'; @@ -27,13 +30,25 @@ 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 WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode'; +const FONT_STYLE_SUPPORT_KEY = 'typography.fontStyle'; +const FONT_WEIGHT_SUPPORT_KEY = 'typography.fontWeight'; +const WRITING_MODE_SUPPORT_KEY = 'typography.writingMode'; +const EXPERIMENTAL_LETTER_SPACING_SUPPORT_KEY = + 'typography.__experimentalLetterSpacing'; +const EXPERIMENTAL_TEXT_TRANSFORM_SUPPORT_KEY = + 'typography.__experimentalTextTransform'; +const EXPERIMENTAL_TEXT_DECORATION_SUPPORT_KEY = + 'typography.__experimentalTextDecoration'; +const EXPERIMENTAL_FONT_STYLE_SUPPORT_KEY = + 'typography.__experimentalFontStyle'; +const EXPERIMENTAL_FONT_WEIGHT_SUPPORT_KEY = + 'typography.__experimentalFontWeight'; +const EXPERIMENTAL_WRITING_MODE_SUPPORT_KEY = + 'typography.__experimentalWritingMode'; export const TYPOGRAPHY_SUPPORT_KEY = 'typography'; export const TYPOGRAPHY_SUPPORT_KEYS = [ LINE_HEIGHT_SUPPORT_KEY, @@ -47,6 +62,13 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [ WRITING_MODE_SUPPORT_KEY, TEXT_TRANSFORM_SUPPORT_KEY, LETTER_SPACING_SUPPORT_KEY, + EXPERIMENTAL_LETTER_SPACING_SUPPORT_KEY, + EXPERIMENTAL_TEXT_TRANSFORM_SUPPORT_KEY, + EXPERIMENTAL_TEXT_DECORATION_SUPPORT_KEY, + EXPERIMENTAL_FONT_STYLE_SUPPORT_KEY, + EXPERIMENTAL_FONT_WEIGHT_SUPPORT_KEY, + EXPERIMENTAL_WRITING_MODE_SUPPORT_KEY, + EXPERIMENTAL_FONT_FAMILY_SUPPORT_KEY, ]; function styleToAttributes( style ) { diff --git a/packages/blocks/src/store/private-selectors.js b/packages/blocks/src/store/private-selectors.js index 4cded8268ae97c..14c6cb9063825a 100644 --- a/packages/blocks/src/store/private-selectors.js +++ b/packages/blocks/src/store/private-selectors.js @@ -8,7 +8,7 @@ import { createSelector } from '@wordpress/data'; */ import { getBlockType } from './selectors'; import { getValueFromObjectPath } from './utils'; -import { __EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY } from '../api/constants'; +import { __EXPERIMENTAL_STYLE_PROPERTY as RAW_STYLE_PROPERTY } from '../api/constants'; const ROOT_BLOCK_SUPPORTS = [ 'background', @@ -32,6 +32,43 @@ const ROOT_BLOCK_SUPPORTS = [ 'letterSpacing', ]; +const TYPOGRAPHY_SUPPORTS_EXPERIMENTAL_TO_STABLE = { + __experimentalFontFamily: 'fontFamily', + __experimentalTextDecoration: 'textDecoration', + __experimentalFontStyle: 'fontStyle', + __experimentalFontWeight: 'fontWeight', + __experimentalLetterSpacing: 'letterSpacing', + __experimentalTextTransform: 'textTransform', + __experimentalWritingMode: 'writingMode', +}; + +// Stabilize the style property support keys by mapping experimental supports to stable supports. +const STYLE_PROPERTY = Object.keys( RAW_STYLE_PROPERTY ).reduce( + ( acc, key ) => { + const value = RAW_STYLE_PROPERTY[ key ]; + const support = value.support; + + if ( support[ 0 ] === 'typography' ) { + const stableSupport = + TYPOGRAPHY_SUPPORTS_EXPERIMENTAL_TO_STABLE[ support[ 1 ] ]; + + if ( stableSupport ) { + acc[ key ] = { + ...value, + support: [ 'typography', stableSupport ], + }; + } else { + acc[ key ] = value; + } + } else { + acc[ key ] = value; + } + + return acc; + }, + {} +); + /** * Filters the list of supported styles for a given element. * @@ -93,6 +130,36 @@ function filterElementBlockSupports( blockSupports, name, element ) { } ); } +function getStableBlockSupports( blockType ) { + if ( ! blockType.supports ) { + return {}; + } + + const supports = { ...blockType.supports }; + + if ( blockType.supports.typography ) { + supports.typography = {}; + Object.keys( blockType.supports.typography ).forEach( + ( typographySupport ) => { + const stableSupport = + TYPOGRAPHY_SUPPORTS_EXPERIMENTAL_TO_STABLE[ + typographySupport + ]; + + if ( stableSupport ) { + supports.typography[ stableSupport ] = + blockType.supports.typography[ typographySupport ]; + } else { + supports.typography[ typographySupport ] = + blockType.supports.typography[ typographySupport ]; + } + } + ); + } + + return supports; +} + /** * Returns the list of supported styles for a given block name and element. */ @@ -113,15 +180,16 @@ export const getSupportedStyles = createSelector( } const supportKeys = []; + const blockTypeSupports = getStableBlockSupports( blockType ); // Check for blockGap support. // Block spacing support doesn't map directly to a single style property, so needs to be handled separately. - if ( blockType?.supports?.spacing?.blockGap ) { + if ( blockTypeSupports?.spacing?.blockGap ) { supportKeys.push( 'blockGap' ); } // check for shadow support - if ( blockType?.supports?.shadow ) { + if ( blockTypeSupports?.shadow ) { supportKeys.push( 'shadow' ); } @@ -136,9 +204,9 @@ export const getSupportedStyles = createSelector( if ( STYLE_PROPERTY[ styleName ].requiresOptOut ) { if ( STYLE_PROPERTY[ styleName ].support[ 0 ] in - blockType.supports && + blockTypeSupports && getValueFromObjectPath( - blockType.supports, + blockTypeSupports, STYLE_PROPERTY[ styleName ].support ) !== false ) { @@ -149,7 +217,7 @@ export const getSupportedStyles = createSelector( if ( getValueFromObjectPath( - blockType.supports, + blockTypeSupports, STYLE_PROPERTY[ styleName ].support, false ) diff --git a/packages/blocks/src/store/test/private-selectors.js b/packages/blocks/src/store/test/private-selectors.js index ada2bd7c8cbcfe..591e29f47610a2 100644 --- a/packages/blocks/src/store/test/private-selectors.js +++ b/packages/blocks/src/store/test/private-selectors.js @@ -120,7 +120,7 @@ describe( 'private selectors', () => { expect( supports ).toEqual( [] ); } ); - it( 'return the allowed styles according to the blocks support keys', () => { + it( 'return the allowed styles according to the blocks support keys, falling back to experimental supports', () => { const supports = getSupportedStyles( getState( [ { @@ -153,5 +153,39 @@ describe( 'private selectors', () => { 'letterSpacing', ] ); } ); + + it( 'return the allowed styles according to the blocks support keys', () => { + const supports = getSupportedStyles( + getState( [ + { + name: 'core/example-block', + supports: { + typography: { + fontFamily: true, + fontStyle: true, + fontWeight: true, + textDecoration: true, + textTransform: true, + letterSpacing: true, + fontSize: true, + lineHeight: true, + }, + }, + }, + ] ), + 'core/example-block' + ); + + expect( supports ).toEqual( [ + 'fontFamily', + 'fontSize', + 'fontStyle', + 'fontWeight', + 'lineHeight', + 'textDecoration', + 'textTransform', + 'letterSpacing', + ] ); + } ); } ); } );