diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 746ab9eff24e3a..fed915d6005075 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -61,8 +61,9 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { return array(); } - $classes = array(); - $styles = array(); + $attributes = array(); + $classes = array(); + $styles = array(); $has_font_family_support = _wp_array_get( $block_type->supports, array( '__experimentalFontFamily' ), false ); $has_font_style_support = _wp_array_get( $block_type->supports, array( '__experimentalFontStyle' ), false ); @@ -74,6 +75,9 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { $skip_font_size_support_serialization = _wp_array_get( $block_type->supports, array( '__experimentalSkipFontSizeSerialization' ), false ); + // Covers all typography features _except_ font size. + $skip_typography_serialization = _wp_array_get( $block_type->supports, array( '__experimentalSkipTypographySerialization' ), false ); + // Font Size. if ( $has_font_size_support && ! $skip_font_size_support_serialization ) { $has_named_font_size = array_key_exists( 'fontSize', $block_attributes ); @@ -88,7 +92,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { } // Font Family. - if ( $has_font_family_support ) { + if ( $has_font_family_support && ! $skip_typography_serialization ) { $has_font_family = isset( $block_attributes['style']['typography']['fontFamily'] ); // Apply required class and style. if ( $has_font_family ) { @@ -105,7 +109,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { } // Font style. - if ( $has_font_style_support ) { + if ( $has_font_style_support && ! $skip_typography_serialization ) { // Apply font style. $font_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'fontStyle', 'font-style' ); if ( $font_style ) { @@ -114,7 +118,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { } // Font weight. - if ( $has_font_weight_support ) { + if ( $has_font_weight_support && ! $skip_typography_serialization ) { // Apply font weight. $font_weight = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'fontWeight', 'font-weight' ); if ( $font_weight ) { @@ -123,7 +127,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { } // Line Height. - if ( $has_line_height_support ) { + if ( $has_line_height_support && ! $skip_typography_serialization ) { $has_line_height = isset( $block_attributes['style']['typography']['lineHeight'] ); // Add the style (no classes for line-height). if ( $has_line_height ) { @@ -132,7 +136,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { } // Text Decoration. - if ( $has_text_decoration_support ) { + if ( $has_text_decoration_support && ! $skip_typography_serialization ) { $text_decoration_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'textDecoration', 'text-decoration' ); if ( $text_decoration_style ) { $styles[] = $text_decoration_style; @@ -140,14 +144,13 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { } // Text Transform. - if ( $has_text_transform_support ) { + if ( $has_text_transform_support && ! $skip_typography_serialization ) { $text_transform_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'textTransform', 'text-transform' ); if ( $text_transform_style ) { $styles[] = $text_transform_style; } } - $attributes = array(); if ( ! empty( $classes ) ) { $attributes['class'] = implode( ' ', $classes ); } diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index e856f8e91bd828..de7ac89d601cca 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -1,7 +1,17 @@ /** * External dependencies */ -import { capitalize, get, has, omit, omitBy, startsWith } from 'lodash'; +import { + capitalize, + find, + forEach, + get, + has, + isEqual, + omit, + startsWith, + without, +} from 'lodash'; /** * WordPress dependencies @@ -98,21 +108,22 @@ function addAttribute( settings ) { return settings; } -/** - * Filters a style object returning only the keys - * that are serializable for a given block. - * - * @param {Object} style Input style object to filter. - * @param {Object} blockSupports Info about block supports. - * @return {Object} Filtered style. - */ -export function omitKeysNotToSerialize( style, blockSupports ) { - return omitBy( - style, - ( value, key ) => - !! blockSupports[ key ]?.__experimentalSkipSerialization - ); -} +const skipSerializationPaths = { + [ `${ BORDER_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ 'border' ], + [ `${ COLOR_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ + COLOR_SUPPORT_KEY, + ], + [ `__experimentalSkipFontSizeSerialization` ]: [ 'typography', 'fontSize' ], + [ `__experimentalSkipTypographySerialization` ]: without( + TYPOGRAPHY_SUPPORT_KEYS, + FONT_SIZE_SUPPORT_KEY + ).map( + ( feature ) => + find( STYLE_PROPERTY, ( property ) => + isEqual( property.support, [ feature ] ) + )?.value + ), +}; /** * Override props assigned to save component to inject the CSS variables definition. @@ -127,22 +138,16 @@ export function addSaveProps( props, blockType, attributes ) { return props; } - const { style } = attributes; - let filteredStyle = omitKeysNotToSerialize( style, { - border: getBlockSupport( blockType, BORDER_SUPPORT_KEY ), - [ COLOR_SUPPORT_KEY ]: getBlockSupport( blockType, COLOR_SUPPORT_KEY ), - } ); + let { style } = attributes; - if ( - getBlockSupport( blockType, '__experimentalSkipFontSizeSerialization' ) - ) { - filteredStyle = omit( filteredStyle, [ - [ 'typography', FONT_SIZE_SUPPORT_KEY ], - ] ); - } + forEach( skipSerializationPaths, ( path, indicator ) => { + if ( getBlockSupport( blockType, indicator ) ) { + style = omit( style, path ); + } + } ); props.style = { - ...getInlineStyles( filteredStyle ), + ...getInlineStyles( style ), ...props.style, }; diff --git a/packages/block-editor/src/hooks/test/style.js b/packages/block-editor/src/hooks/test/style.js index 3067d104674491..75a520b14ec6f5 100644 --- a/packages/block-editor/src/hooks/test/style.js +++ b/packages/block-editor/src/hooks/test/style.js @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import { getInlineStyles, omitKeysNotToSerialize } from '../style'; +import { getInlineStyles } from '../style'; describe( 'getInlineStyles', () => { it( 'should return an empty object when called with undefined', () => { @@ -42,31 +42,3 @@ describe( 'getInlineStyles', () => { } ); } ); } ); - -describe( 'omitKeysNotToSerialize', () => { - it( 'should return the same style if no keys are skipped from serialization', () => { - const style = { - color: { text: 'red' }, - lineHeight: 2, - }; - expect( omitKeysNotToSerialize( style, {} ) ).toEqual( { - color: { text: 'red' }, - lineHeight: 2, - } ); - } ); - - it( 'should omit the color key if it is skipped for serialization', () => { - const style = { - color: { text: 'red' }, - lineHeight: 2, - }; - const blockSupports = { - color: { - __experimentalSkipSerialization: true, - }, - }; - expect( omitKeysNotToSerialize( style, blockSupports ) ).toEqual( { - lineHeight: 2, - } ); - } ); -} );