diff --git a/lib/block-supports/border.php b/lib/block-supports/border.php index c29bfd666efdc..0ea1b2e88f9b9 100644 --- a/lib/block-supports/border.php +++ b/lib/block-supports/border.php @@ -44,7 +44,7 @@ function gutenberg_register_border_support( $block_type ) { * @return array Border CSS classes and inline styles. */ function gutenberg_apply_border_support( $block_type, $block_attributes ) { - if ( gutenberg_skip_border_serialization( $block_type ) ) { + if ( gutenberg_should_skip_block_supports_serialization( $block_type, 'border' ) ) { return array(); } @@ -54,7 +54,8 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) { // Border radius. if ( gutenberg_has_border_feature_support( $block_type, 'radius' ) && - isset( $block_attributes['style']['border']['radius'] ) + isset( $block_attributes['style']['border']['radius'] ) && + ! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'radius' ) ) { $border_radius = $block_attributes['style']['border']['radius']; @@ -78,7 +79,8 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) { // Border style. if ( gutenberg_has_border_feature_support( $block_type, 'style' ) && - isset( $block_attributes['style']['border']['style'] ) + isset( $block_attributes['style']['border']['style'] ) && + ! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'style' ) ) { $border_style = $block_attributes['style']['border']['style']; $styles[] = sprintf( 'border-style: %s;', $border_style ); @@ -87,7 +89,8 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) { // Border width. if ( gutenberg_has_border_feature_support( $block_type, 'width' ) && - isset( $block_attributes['style']['border']['width'] ) + isset( $block_attributes['style']['border']['width'] ) && + ! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'width' ) ) { $border_width = $block_attributes['style']['border']['width']; @@ -100,7 +103,10 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) { } // Border color. - if ( gutenberg_has_border_feature_support( $block_type, 'color' ) ) { + if ( + gutenberg_has_border_feature_support( $block_type, 'color' ) && + ! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'color' ) + ) { $has_named_border_color = array_key_exists( 'borderColor', $block_attributes ); $has_custom_border_color = isset( $block_attributes['style']['border']['color'] ); @@ -130,22 +136,6 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) { return $attributes; } -/** - * Checks whether serialization of the current block's border properties should - * occur. - * - * @param WP_Block_type $block_type Block type. - * - * @return boolean - */ -function gutenberg_skip_border_serialization( $block_type ) { - $border_support = _wp_array_get( $block_type->supports, array( '__experimentalBorder' ), false ); - - return is_array( $border_support ) && - array_key_exists( '__experimentalSkipSerialization', $border_support ) && - $border_support['__experimentalSkipSerialization']; -} - /** * Checks whether the current block type supports the border feature requested. * diff --git a/lib/block-supports/colors.php b/lib/block-supports/colors.php index bd278f9b4f651..266c6716e4817 100644 --- a/lib/block-supports/colors.php +++ b/lib/block-supports/colors.php @@ -68,8 +68,7 @@ function gutenberg_apply_colors_support( $block_type, $block_attributes ) { if ( is_array( $color_support ) && - array_key_exists( '__experimentalSkipSerialization', $color_support ) && - $color_support['__experimentalSkipSerialization'] + gutenberg_should_skip_block_supports_serialization( $block_type, 'color' ) ) { return array(); } @@ -82,7 +81,7 @@ function gutenberg_apply_colors_support( $block_type, $block_attributes ) { // Text colors. // Check support for text colors. - if ( $has_text_colors_support ) { + if ( $has_text_colors_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'color', 'text' ) ) { $has_named_text_color = array_key_exists( 'textColor', $block_attributes ); $has_custom_text_color = isset( $block_attributes['style']['color']['text'] ); @@ -99,7 +98,7 @@ function gutenberg_apply_colors_support( $block_type, $block_attributes ) { } // Background colors. - if ( $has_background_colors_support ) { + if ( $has_background_colors_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'color', 'background' ) ) { $has_named_background_color = array_key_exists( 'backgroundColor', $block_attributes ); $has_custom_background_color = isset( $block_attributes['style']['color']['background'] ); @@ -116,7 +115,7 @@ function gutenberg_apply_colors_support( $block_type, $block_attributes ) { } // Gradients. - if ( $has_gradients_support ) { + if ( $has_gradients_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'color', 'gradients' ) ) { $has_named_gradient = array_key_exists( 'gradient', $block_attributes ); $has_custom_gradient = isset( $block_attributes['style']['color']['gradient'] ); diff --git a/lib/block-supports/dimensions.php b/lib/block-supports/dimensions.php index 2692b316d4db1..9f6ac8defe910 100644 --- a/lib/block-supports/dimensions.php +++ b/lib/block-supports/dimensions.php @@ -45,7 +45,7 @@ function gutenberg_register_dimensions_support( $block_type ) { * @return array Block dimensions CSS classes and inline styles. */ function gutenberg_apply_dimensions_support( $block_type, $block_attributes ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable - if ( gutenberg_skip_dimensions_serialization( $block_type ) ) { + if ( gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalDimensions' ) ) { return array(); } @@ -57,21 +57,6 @@ function gutenberg_apply_dimensions_support( $block_type, $block_attributes ) { return empty( $styles ) ? array() : array( 'style' => implode( ' ', $styles ) ); } -/** - * Checks whether serialization of the current block's dimensions properties - * should occur. - * - * @param WP_Block_type $block_type Block type. - * - * @return boolean Whether to serialize spacing support styles & classes. - */ -function gutenberg_skip_dimensions_serialization( $block_type ) { - $dimensions_support = _wp_array_get( $block_type->supports, array( '__experimentalDimensions' ), false ); - return is_array( $dimensions_support ) && - array_key_exists( '__experimentalSkipSerialization', $dimensions_support ) && - $dimensions_support['__experimentalSkipSerialization']; -} - // Register the block support. WP_Block_Supports::get_instance()->register( 'dimensions', diff --git a/lib/block-supports/elements.php b/lib/block-supports/elements.php index a0087fb040b35..04bada4f39782 100644 --- a/lib/block-supports/elements.php +++ b/lib/block-supports/elements.php @@ -18,6 +18,13 @@ function gutenberg_render_elements_support( $block_content, $block ) { return $block_content; } + $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); + $skip_link_color_serialization = gutenberg_should_skip_block_supports_serialization( $block_type, 'color', 'link' ); + + if ( $skip_link_color_serialization ) { + return $block_content; + } + $link_color = null; if ( ! empty( $block['attrs'] ) ) { $link_color = _wp_array_get( $block['attrs'], array( 'style', 'elements', 'link', 'color', 'text' ), null ); diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index c2f988592f1d0..ed17b00f037df 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -28,14 +28,15 @@ function gutenberg_register_layout_support( $block_type ) { /** * Generates the CSS corresponding to the provided layout. * - * @param string $selector CSS selector. - * @param array $layout Layout object. The one that is passed has already checked the existence of default block layout. - * @param boolean $has_block_gap_support Whether the theme has support for the block gap. - * @param string $gap_value The block gap value to apply. + * @param string $selector CSS selector. + * @param array $layout Layout object. The one that is passed has already checked the existence of default block layout. + * @param boolean $has_block_gap_support Whether the theme has support for the block gap. + * @param string $gap_value The block gap value to apply. + * @param boolean $should_skip_gap_serialization Whether to skip applying the user-defined value set in the editor. * - * @return string CSS style. + * @return string CSS style. */ -function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null ) { +function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false ) { $layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default'; $style = ''; @@ -69,7 +70,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support if ( is_array( $gap_value ) ) { $gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null; } - $gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap )'; + $gap_style = $gap_value && ! $should_skip_gap_serialization ? $gap_value : 'var( --wp--style--block-gap )'; $style .= "$selector > * { margin-block-start: 0; margin-block-end: 0; }"; $style .= "$selector > * + * { margin-block-start: $gap_style; margin-block-end: 0; }"; } @@ -99,7 +100,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $gap_column = isset( $gap_value['left'] ) ? $gap_value['left'] : '0.5em'; $gap_value = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column; } - $gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap, 0.5em )'; + $gap_style = $gap_value && ! $should_skip_gap_serialization ? $gap_value : 'var( --wp--style--block-gap, 0.5em )'; $style .= "gap: $gap_style;"; } else { $style .= 'gap: 0.5em;'; @@ -172,7 +173,10 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { $gap_value = preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value; } - $style = gutenberg_get_layout_style( ".$class_name", $used_layout, $has_block_gap_support, $gap_value ); + // If a block's block.json skips serialization for spacing or spacing.blockGap, + // don't apply the user-defined value to the styles. + $should_skip_gap_serialization = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' ); + $style = gutenberg_get_layout_style( ".$class_name", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization ); // This assumes the hook only applies to blocks with a single wrapper. // I think this is a reasonable limitation for that particular hook. $content = preg_replace( diff --git a/lib/block-supports/spacing.php b/lib/block-supports/spacing.php index bb24d3d7b052f..6217be9f04964 100644 --- a/lib/block-supports/spacing.php +++ b/lib/block-supports/spacing.php @@ -39,9 +39,10 @@ function gutenberg_register_spacing_support( $block_type ) { * @return array Block spacing CSS classes and inline styles. */ function gutenberg_apply_spacing_support( $block_type, $block_attributes ) { - if ( gutenberg_skip_spacing_serialization( $block_type ) ) { + if ( gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing' ) ) { return array(); } + $attributes = array(); $has_padding_support = gutenberg_block_has_support( $block_type, array( 'spacing', 'padding' ), false ); $has_margin_support = gutenberg_block_has_support( $block_type, array( 'spacing', 'margin' ), false ); @@ -52,9 +53,11 @@ function gutenberg_apply_spacing_support( $block_type, $block_attributes ) { } $style_engine = WP_Style_Engine_Gutenberg::get_instance(); + $skip_padding = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'padding' ); + $skip_margin = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'margin' ); $spacing_block_styles = array(); - $spacing_block_styles['padding'] = $has_padding_support ? _wp_array_get( $block_styles, array( 'spacing', 'padding' ), null ) : null; - $spacing_block_styles['margin'] = $has_margin_support ? _wp_array_get( $block_styles, array( 'spacing', 'margin' ), null ) : null; + $spacing_block_styles['padding'] = $has_padding_support && ! $skip_padding ? _wp_array_get( $block_styles, array( 'spacing', 'padding' ), null ) : null; + $spacing_block_styles['margin'] = $has_margin_support && ! $skip_margin ? _wp_array_get( $block_styles, array( 'spacing', 'margin' ), null ) : null; $inline_styles = $style_engine->generate( array( 'spacing' => $spacing_block_styles ), array( @@ -69,22 +72,6 @@ function gutenberg_apply_spacing_support( $block_type, $block_attributes ) { return $attributes; } -/** - * Checks whether serialization of the current block's spacing properties should - * occur. - * - * @param WP_Block_type $block_type Block type. - * - * @return boolean Whether to serialize spacing support styles & classes. - */ -function gutenberg_skip_spacing_serialization( $block_type ) { - $spacing_support = _wp_array_get( $block_type->supports, array( 'spacing' ), false ); - - return is_array( $spacing_support ) && - array_key_exists( '__experimentalSkipSerialization', $spacing_support ) && - $spacing_support['__experimentalSkipSerialization']; -} - // Register the block support. WP_Block_Supports::get_instance()->register( 'spacing', diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index ffa515cd8bae4..9661277c1c7b9 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -75,8 +75,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { return array(); } - $skip_typography_serialization = _wp_array_get( $typography_supports, array( '__experimentalSkipSerialization' ), false ); - if ( $skip_typography_serialization ) { + if ( gutenberg_should_skip_block_supports_serialization( $block_type, 'typography' ) ) { return array(); } @@ -93,7 +92,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { $has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false ); $has_text_transform_support = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false ); - if ( $has_font_size_support ) { + if ( $has_font_size_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'fontSize' ) ) { $has_named_font_size = array_key_exists( 'fontSize', $block_attributes ); $has_custom_font_size = isset( $block_attributes['style']['typography']['fontSize'] ); @@ -104,7 +103,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { } } - if ( $has_font_family_support ) { + if ( $has_font_family_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'fontFamily' ) ) { $has_named_font_family = array_key_exists( 'fontFamily', $block_attributes ); $has_custom_font_family = isset( $block_attributes['style']['typography']['fontFamily'] ); @@ -123,42 +122,42 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { } } - if ( $has_font_style_support ) { + if ( $has_font_style_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'fontStyle' ) ) { $font_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'fontStyle', 'font-style' ); if ( $font_style ) { $styles[] = $font_style; } } - if ( $has_font_weight_support ) { + if ( $has_font_weight_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'fontWeight' ) ) { $font_weight = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'fontWeight', 'font-weight' ); if ( $font_weight ) { $styles[] = $font_weight; } } - if ( $has_line_height_support ) { + if ( $has_line_height_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'lineHeight' ) ) { $has_line_height = isset( $block_attributes['style']['typography']['lineHeight'] ); if ( $has_line_height ) { $styles[] = sprintf( 'line-height: %s;', $block_attributes['style']['typography']['lineHeight'] ); } } - if ( $has_text_decoration_support ) { + if ( $has_text_decoration_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'textDecoration' ) ) { $text_decoration_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'textDecoration', 'text-decoration' ); if ( $text_decoration_style ) { $styles[] = $text_decoration_style; } } - if ( $has_text_transform_support ) { + if ( $has_text_transform_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'textTransform' ) ) { $text_transform_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'textTransform', 'text-transform' ); if ( $text_transform_style ) { $styles[] = $text_transform_style; } } - if ( $has_letter_spacing_support ) { + if ( $has_letter_spacing_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'letterSpacing' ) ) { $letter_spacing_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'letterSpacing', 'letter-spacing' ); if ( $letter_spacing_style ) { $styles[] = $letter_spacing_style; @@ -214,3 +213,5 @@ function gutenberg_typography_get_css_variable_inline_style( $attributes, $featu 'apply' => 'gutenberg_apply_typography_support', ) ); + + diff --git a/lib/block-supports/utils.php b/lib/block-supports/utils.php new file mode 100644 index 0000000000000..89199ac644cb0 --- /dev/null +++ b/lib/block-supports/utils.php @@ -0,0 +1,31 @@ +supports, $path, false ); + + if ( is_array( $skip_serialization ) ) { + return in_array( $feature, $skip_serialization, true ); + } + + return $skip_serialization; +} diff --git a/lib/load.php b/lib/load.php index 0e2b3e2796ed7..404c9b66a9f2a 100644 --- a/lib/load.php +++ b/lib/load.php @@ -128,6 +128,7 @@ function gutenberg_is_experiment_enabled( $name ) { // similar to the loading behaviour in `blocks.php`. require __DIR__ . '/style-engine/class-wp-style-engine-gutenberg.php'; +require __DIR__ . '/block-supports/utils.php'; require __DIR__ . '/block-supports/elements.php'; require __DIR__ . '/block-supports/colors.php'; require __DIR__ . '/block-supports/typography.php'; diff --git a/packages/block-editor/src/hooks/border-color.js b/packages/block-editor/src/hooks/border-color.js index e26af52e364f5..204d4b7e0d28f 100644 --- a/packages/block-editor/src/hooks/border-color.js +++ b/packages/block-editor/src/hooks/border-color.js @@ -23,11 +23,11 @@ import { } from '../components/colors'; import useSetting from '../components/use-setting'; import { + BORDER_SUPPORT_KEY, hasBorderSupport, removeBorderAttribute, - shouldSkipSerialization, } from './border'; -import { cleanEmptyObject } from './utils'; +import { cleanEmptyObject, shouldSkipSerialization } from './utils'; // Defining empty array here instead of inline avoids unnecessary re-renders of // color control. @@ -200,7 +200,7 @@ function addAttributes( settings ) { function addSaveProps( props, blockType, attributes ) { if ( ! hasBorderSupport( blockType, 'color' ) || - shouldSkipSerialization( blockType ) + shouldSkipSerialization( blockType, BORDER_SUPPORT_KEY, 'color' ) ) { return props; } @@ -231,7 +231,7 @@ function addSaveProps( props, blockType, attributes ) { function addEditProps( settings ) { if ( ! hasBorderSupport( settings, 'color' ) || - shouldSkipSerialization( settings ) + shouldSkipSerialization( settings, BORDER_SUPPORT_KEY, 'color' ) ) { return settings; } @@ -266,7 +266,7 @@ export const withBorderColorPaletteStyles = createHigherOrderComponent( if ( ! hasBorderSupport( name, 'color' ) || - shouldSkipSerialization( name ) + shouldSkipSerialization( name, BORDER_SUPPORT_KEY, 'color' ) ) { return ; } diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js index 77523ad70894f..f17eeab4e3de9 100644 --- a/packages/block-editor/src/hooks/border.js +++ b/packages/block-editor/src/hooks/border.js @@ -171,19 +171,6 @@ export function hasBorderSupport( blockName, feature = 'any' ) { return !! support?.[ feature ]; } -/** - * Check whether serialization of border classes and styles should be skipped. - * - * @param {string|Object} blockType Block name or block type object. - * - * @return {boolean} Whether serialization of border properties should occur. - */ -export function shouldSkipSerialization( blockType ) { - const support = getBlockSupport( blockType, BORDER_SUPPORT_KEY ); - - return support?.__experimentalSkipSerialization; -} - /** * Returns a new style object where the specified border attribute has been * removed. diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index 680784293ad0a..b02b9f2bfbbad 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -26,7 +26,12 @@ import { getGradientValueBySlug, getGradientSlugByValue, } from '../components/gradients'; -import { cleanEmptyObject, transformStyles, immutableSet } from './utils'; +import { + cleanEmptyObject, + transformStyles, + immutableSet, + shouldSkipSerialization, +} from './utils'; import ColorPanel from './color-panel'; import useSetting from '../components/use-setting'; @@ -43,12 +48,6 @@ const hasColorSupport = ( blockType ) => { ); }; -const shouldSkipSerialization = ( blockType ) => { - const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY ); - - return colorSupport?.__experimentalSkipSerialization; -}; - const hasLinkColorSupport = ( blockType ) => { if ( Platform.OS !== 'web' ) { return false; @@ -248,7 +247,7 @@ function addAttributes( settings ) { export function addSaveProps( props, blockType, attributes ) { if ( ! hasColorSupport( blockType ) || - shouldSkipSerialization( blockType ) + shouldSkipSerialization( blockType, COLOR_SUPPORT_KEY ) ) { return props; } @@ -258,12 +257,31 @@ export function addSaveProps( props, blockType, attributes ) { // I'd have preferred to avoid the "style" attribute usage here const { backgroundColor, textColor, gradient, style } = attributes; - const backgroundClass = getColorClassName( - 'background-color', - backgroundColor - ); - const gradientClass = __experimentalGetGradientClass( gradient ); - const textClass = getColorClassName( 'color', textColor ); + const shouldSerialize = ( feature ) => + ! shouldSkipSerialization( blockType, COLOR_SUPPORT_KEY, feature ); + + // Primary color classes must come before the `has-text-color`, + // `has-background` and `has-link-color` classes to maintain backwards + // compatibility and avoid block invalidations. + const textClass = shouldSerialize( 'text' ) + ? getColorClassName( 'color', textColor ) + : undefined; + + const gradientClass = shouldSerialize( 'gradients' ) + ? __experimentalGetGradientClass( gradient ) + : undefined; + + const backgroundClass = shouldSerialize( 'background' ) + ? getColorClassName( 'background-color', backgroundColor ) + : undefined; + + const serializeHasBackground = + shouldSerialize( 'background' ) || shouldSerialize( 'gradients' ); + const hasBackground = + backgroundColor || + style?.color?.background || + ( hasGradient && ( gradient || style?.color?.gradient ) ); + const newClassName = classnames( props.className, textClass, @@ -273,12 +291,12 @@ export function addSaveProps( props, blockType, attributes ) { [ backgroundClass ]: ( ! hasGradient || ! style?.color?.gradient ) && !! backgroundClass, - 'has-text-color': textColor || style?.color?.text, - 'has-background': - backgroundColor || - style?.color?.background || - ( hasGradient && ( gradient || style?.color?.gradient ) ), - 'has-link-color': style?.elements?.link?.color, + 'has-text-color': + shouldSerialize( 'text' ) && + ( textColor || style?.color?.text ), + 'has-background': serializeHasBackground && hasBackground, + 'has-link-color': + shouldSerialize( 'link' ) && style?.elements?.link?.color, } ); props.className = newClassName ? newClassName : undefined; @@ -297,7 +315,7 @@ export function addSaveProps( props, blockType, attributes ) { export function addEditProps( settings ) { if ( ! hasColorSupport( settings ) || - shouldSkipSerialization( settings ) + shouldSkipSerialization( settings, COLOR_SUPPORT_KEY ) ) { return settings; } @@ -589,18 +607,27 @@ export const withColorPaletteStyles = createHigherOrderComponent( ], [ userPalette, themePalette, defaultPalette ] ); - if ( ! hasColorSupport( name ) || shouldSkipSerialization( name ) ) { + if ( + ! hasColorSupport( name ) || + shouldSkipSerialization( name, COLOR_SUPPORT_KEY ) + ) { return ; } const extraStyles = {}; - if ( textColor ) { + if ( + textColor && + ! shouldSkipSerialization( name, COLOR_SUPPORT_KEY, 'text' ) + ) { extraStyles.color = getColorObjectByAttributeValues( colors, textColor )?.color; } - if ( backgroundColor ) { + if ( + backgroundColor && + ! shouldSkipSerialization( name, COLOR_SUPPORT_KEY, 'background' ) + ) { extraStyles.backgroundColor = getColorObjectByAttributeValues( colors, backgroundColor diff --git a/packages/block-editor/src/hooks/font-family.js b/packages/block-editor/src/hooks/font-family.js index 193896fadf862..9f77261b3adec 100644 --- a/packages/block-editor/src/hooks/font-family.js +++ b/packages/block-editor/src/hooks/font-family.js @@ -15,6 +15,8 @@ import TokenList from '@wordpress/token-list'; */ import useSetting from '../components/use-setting'; import FontFamilyControl from '../components/font-family'; +import { shouldSkipSerialization } from './utils'; +import { TYPOGRAPHY_SUPPORT_KEY } from './typography'; export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily'; @@ -56,9 +58,10 @@ function addSaveProps( props, blockType, attributes ) { } if ( - hasBlockSupport( + shouldSkipSerialization( blockType, - 'typography.__experimentalSkipSerialization' + TYPOGRAPHY_SUPPORT_KEY, + 'fontFamily' ) ) { return props; diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js index 8753df354ceb8..f0b7315d02330 100644 --- a/packages/block-editor/src/hooks/font-size.js +++ b/packages/block-editor/src/hooks/font-size.js @@ -15,7 +15,12 @@ import { getFontSizeObjectByValue, FontSizePicker, } from '../components/font-sizes'; -import { cleanEmptyObject, transformStyles } from './utils'; +import { TYPOGRAPHY_SUPPORT_KEY } from './typography'; +import { + cleanEmptyObject, + transformStyles, + shouldSkipSerialization, +} from './utils'; import useSetting from '../components/use-setting'; export const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize'; @@ -60,10 +65,7 @@ function addSaveProps( props, blockType, attributes ) { } if ( - hasBlockSupport( - blockType, - 'typography.__experimentalSkipSerialization' - ) + shouldSkipSerialization( blockType, TYPOGRAPHY_SUPPORT_KEY, 'fontSize' ) ) { return props; } @@ -223,9 +225,10 @@ const withFontSizeInlineStyles = createHigherOrderComponent( // and does have a class to extract the font size from. if ( ! hasBlockSupport( blockName, FONT_SIZE_SUPPORT_KEY ) || - hasBlockSupport( + shouldSkipSerialization( blockName, - 'typography.__experimentalSkipSerialization' + TYPOGRAPHY_SUPPORT_KEY, + 'fontSize' ) || ! fontSize || style?.typography?.fontSize diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index cf6840d7b577e..586b38bf4c8a0 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -222,6 +222,7 @@ export const withLayoutStyles = createHigherOrderComponent( element && createPortal( } + */ +const renamedFeatures = { gradients: 'gradient' }; + /** * Override props assigned to save component to inject the CSS variables definition. * @@ -223,9 +237,18 @@ export function addSaveProps( let { style } = attributes; forEach( skipPaths, ( path, indicator ) => { - if ( getBlockSupport( blockType, indicator ) ) { + const skipSerialization = getBlockSupport( blockType, indicator ); + + if ( skipSerialization === true ) { style = omit( style, path ); } + + if ( Array.isArray( skipSerialization ) ) { + skipSerialization.forEach( ( featureName ) => { + const feature = renamedFeatures[ featureName ] || featureName; + style = omit( style, [ [ ...path, feature ] ] ); + } ); + } } ); props.style = { @@ -304,14 +327,27 @@ export const withBlockControls = createHigherOrderComponent( */ const withElementsStyles = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => { - const elements = props.attributes.style?.elements; - const blockElementsContainerIdentifier = `wp-elements-${ useInstanceId( BlockListBlock ) }`; + + const skipLinkColorSerialization = shouldSkipSerialization( + props.name, + COLOR_SUPPORT_KEY, + 'link' + ); + + // The Elements API only supports link colors for now, + // hence the specific omission of `link` in the elements styles. + // This might need to be refactored or removed if the Elements API + // changes or `link` supports styles beyond `color`. + const elements = skipLinkColorSerialization + ? omit( props.attributes.style?.elements, [ 'link' ] ) + : props.attributes.style?.elements; + const styles = compileElementsStyles( blockElementsContainerIdentifier, - props.attributes.style?.elements + elements ); const element = useContext( BlockList.__unstableElementContext ); diff --git a/packages/block-editor/src/hooks/test/style.js b/packages/block-editor/src/hooks/test/style.js index ac2b0690dd498..40cc8f49c59f5 100644 --- a/packages/block-editor/src/hooks/test/style.js +++ b/packages/block-editor/src/hooks/test/style.js @@ -1,3 +1,8 @@ +/** + * WordPress dependencies + */ +import { applyFilters } from '@wordpress/hooks'; + /** * Internal dependencies */ @@ -108,3 +113,92 @@ describe( 'getInlineStyles', () => { } ); } ); } ); + +describe( 'addSaveProps', () => { + const addSaveProps = applyFilters.bind( + null, + 'blocks.getSaveContent.extraProps' + ); + + const blockSettings = { + save: () =>
, + category: 'text', + title: 'block title', + supports: { + spacing: { padding: true }, + color: { gradients: true, text: true }, + typography: { + fontSize: true, + __experimentalTextTransform: true, + __experimentalTextDecoration: true, + }, + }, + }; + + const applySkipSerialization = ( features ) => { + const updatedSettings = { ...blockSettings }; + Object.keys( features ).forEach( ( key ) => { + updatedSettings.supports[ key ].__experimentalSkipSerialization = + features[ key ]; + } ); + return updatedSettings; + }; + + const attributes = { + style: { + color: { + text: '#d92828', + gradient: + 'linear-gradient(135deg,rgb(6,147,227) 0%,rgb(223,13,13) 46%,rgb(155,81,224) 100%)', + }, + spacing: { padding: '10px' }, + typography: { + fontSize: '1rem', + textDecoration: 'underline', + textTransform: 'uppercase', + }, + }, + }; + + it( 'should serialize all styles by default', () => { + const extraProps = addSaveProps( {}, blockSettings, attributes ); + + expect( extraProps.style ).toEqual( { + background: + 'linear-gradient(135deg,rgb(6,147,227) 0%,rgb(223,13,13) 46%,rgb(155,81,224) 100%)', + color: '#d92828', + padding: '10px', + fontSize: '1rem', + textDecoration: 'underline', + textTransform: 'uppercase', + } ); + } ); + + it( 'should skip serialization of entire feature set if flag is true', () => { + const settings = applySkipSerialization( { + typography: true, + } ); + const extraProps = addSaveProps( {}, settings, attributes ); + + expect( extraProps.style ).toEqual( { + background: + 'linear-gradient(135deg,rgb(6,147,227) 0%,rgb(223,13,13) 46%,rgb(155,81,224) 100%)', + color: '#d92828', + padding: '10px', + } ); + } ); + + it( 'should skip serialization of individual features if flag is an array', () => { + const settings = applySkipSerialization( { + color: [ 'gradient' ], + typography: [ 'textDecoration', 'textTransform' ], + } ); + const extraProps = addSaveProps( {}, settings, attributes ); + + expect( extraProps.style ).toEqual( { + color: '#d92828', + padding: '10px', + fontSize: '1rem', + } ); + } ); +} ); diff --git a/packages/block-editor/src/hooks/test/utils.js b/packages/block-editor/src/hooks/test/utils.js index adaa37f4816c6..185b286efb307 100644 --- a/packages/block-editor/src/hooks/test/utils.js +++ b/packages/block-editor/src/hooks/test/utils.js @@ -97,7 +97,7 @@ describe( 'anchor', () => { expect( extraProps.id ).toBe( 'foo' ); } ); - it( 'should remove an anchor attribute ID when feild is cleared', () => { + it( 'should remove an anchor attribute ID when field is cleared', () => { const attributes = { anchor: '' }; const extraProps = getSaveContentExtraProps( {}, diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js index a84b2ac142e7b..b49ab4fd8836c 100644 --- a/packages/block-editor/src/hooks/utils.js +++ b/packages/block-editor/src/hooks/utils.js @@ -14,6 +14,11 @@ import { every, } from 'lodash'; +/** + * WordPress dependencies + */ +import { getBlockSupport } from '@wordpress/blocks'; + /** * Removed falsy values from nested object. * @@ -87,3 +92,24 @@ export function transformStyles( } ); return returnBlock; } + +/** + * Check whether serialization of specific block support feature or set should + * be skipped. + * + * @param {string|Object} blockType Block name or block type object. + * @param {string} featureSet Name of block support feature set. + * @param {string} feature Name of the individual feature to check. + * + * @return {boolean} Whether serialization should occur. + */ +export function shouldSkipSerialization( blockType, featureSet, feature ) { + const support = getBlockSupport( blockType, featureSet ); + const skipSerialization = support?.__experimentalSkipSerialization; + + if ( Array.isArray( skipSerialization ) ) { + return skipSerialization.includes( feature ); + } + + return skipSerialization; +} diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js index 84a966ca0fdeb..c7953ce25f5e3 100644 --- a/packages/block-editor/src/layouts/flex.js +++ b/packages/block-editor/src/layouts/flex.js @@ -19,6 +19,7 @@ import { appendSelectors } from './utils'; import { getGapCSSValue } from '../hooks/gap'; import useSetting from '../components/use-setting'; import { BlockControls, JustifyContentControl } from '../components'; +import { shouldSkipSerialization } from '../hooks/utils'; // Used with the default, horizontal flex orientation. const justifyContentMap = { @@ -86,13 +87,17 @@ export default { ); }, - save: function FlexLayoutStyle( { selector, layout, style } ) { + save: function FlexLayoutStyle( { selector, layout, style, blockName } ) { const { orientation = 'horizontal' } = layout; const blockGapSupport = useSetting( 'spacing.blockGap' ); const hasBlockGapStylesSupport = blockGapSupport !== null; + // If a block's block.json skips serialization for spacing or spacing.blockGap, + // don't apply the user-defined value to the styles. const blockGapValue = - getGapCSSValue( style?.spacing?.blockGap, '0.5em' ) ?? - 'var( --wp--style--block-gap, 0.5em )'; + style?.spacing?.blockGap && + ! shouldSkipSerialization( blockName, 'spacing', 'blockGap' ) + ? getGapCSSValue( style?.spacing?.blockGap, '0.5em' ) + : 'var( --wp--style--block-gap, 0.5em )'; const justifyContent = justifyContentMap[ layout.justifyContent ] || justifyContentMap.left; diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js index f8251c33a3dba..82851cb015075 100644 --- a/packages/block-editor/src/layouts/flow.js +++ b/packages/block-editor/src/layouts/flow.js @@ -15,6 +15,7 @@ import { Icon, positionCenter, stretchWide } from '@wordpress/icons'; import useSetting from '../components/use-setting'; import { appendSelectors } from './utils'; import { getGapBoxControlValueFromStyle } from '../hooks/gap'; +import { shouldSkipSerialization } from '../hooks/utils'; export default { name: 'default', @@ -106,15 +107,25 @@ export default { toolBarControls: function DefaultLayoutToolbarControls() { return null; }, - save: function DefaultLayoutStyle( { selector, layout = {}, style } ) { + save: function DefaultLayoutStyle( { + selector, + layout = {}, + style, + blockName, + } ) { const { contentSize, wideSize } = layout; const blockGapSupport = useSetting( 'spacing.blockGap' ); const hasBlockGapStylesSupport = blockGapSupport !== null; const blockGapStyleValue = getGapBoxControlValueFromStyle( style?.spacing?.blockGap ); + // If a block's block.json skips serialization for spacing or + // spacing.blockGap, don't apply the user-defined value to the styles. const blockGapValue = - blockGapStyleValue?.top ?? 'var( --wp--style--block-gap )'; + blockGapStyleValue?.top && + ! shouldSkipSerialization( blockName, 'spacing', 'blockGap' ) + ? blockGapStyleValue?.top + : 'var( --wp--style--block-gap )'; let output = !! contentSize || !! wideSize diff --git a/phpunit/block-supports/border-test.php b/phpunit/block-supports/border-test.php new file mode 100644 index 0000000000000..bf09bc39ee087 --- /dev/null +++ b/phpunit/block-supports/border-test.php @@ -0,0 +1,143 @@ + 2, + 'attributes' => array( + 'borderColor' => array( + 'type' => 'string', + ), + 'style' => array( + 'type' => 'object', + ), + ), + 'supports' => array( + '__experimentalBorder' => array( + 'color' => true, + 'radius' => true, + 'width' => true, + 'style' => true, + ), + ), + ) + ); + $registry = WP_Block_Type_Registry::get_instance(); + $block_type = $registry->get_registered( $block_name ); + $block_atts = array( + 'borderColor' => 'red', + 'style' => array( + 'border' => array( + 'radius' => '10px', + 'width' => '1px', + 'style' => 'dashed', + ), + ), + ); + + $actual = gutenberg_apply_border_support( $block_type, $block_atts ); + $expected = array( + 'class' => 'has-border-color has-red-border-color', + 'style' => 'border-radius: 10px; border-style: dashed; border-width: 1px;', + ); + + $this->assertSame( $expected, $actual ); + unregister_block_type( $block_name ); + } + + function test_border_with_skipped_serialization_block_supports() { + $block_name = 'test/border-with-skipped-serialization-block-supports'; + register_block_type( + $block_name, + array( + 'api_version' => 2, + 'attributes' => array( + 'style' => array( + 'type' => 'object', + ), + ), + 'supports' => array( + '__experimentalBorder' => array( + 'color' => true, + 'radius' => true, + 'width' => true, + 'style' => true, + '__experimentalSkipSerialization' => true, + ), + ), + ) + ); + $registry = WP_Block_Type_Registry::get_instance(); + $block_type = $registry->get_registered( $block_name ); + $block_atts = array( + 'style' => array( + 'border' => array( + 'color' => '#eeeeee', + 'width' => '1px', + 'style' => 'dotted', + 'radius' => '10px', + ), + ), + ); + + $actual = gutenberg_apply_border_support( $block_type, $block_atts ); + $expected = array(); + + $this->assertSame( $expected, $actual ); + unregister_block_type( $block_name ); + } + + function test_radius_with_individual_skipped_serialization_block_supports() { + $block_name = 'test/radius-with-individual-skipped-serialization-block-supports'; + register_block_type( + $block_name, + array( + 'api_version' => 2, + 'attributes' => array( + 'style' => array( + 'type' => 'object', + ), + ), + 'supports' => array( + '__experimentalBorder' => array( + 'color' => true, + 'radius' => true, + 'width' => true, + 'style' => true, + '__experimentalSkipSerialization' => array( 'radius', 'color' ), + ), + ), + ) + ); + $registry = WP_Block_Type_Registry::get_instance(); + $block_type = $registry->get_registered( $block_name ); + $block_atts = array( + 'style' => array( + 'border' => array( + 'color' => '#eeeeee', + 'width' => '1px', + 'style' => 'dotted', + 'radius' => '10px', + ), + ), + ); + + $actual = gutenberg_apply_border_support( $block_type, $block_atts ); + $expected = array( + 'style' => 'border-style: dotted; border-width: 1px;', + ); + + $this->assertSame( $expected, $actual ); + unregister_block_type( $block_name ); + } +} diff --git a/phpunit/block-supports/colors-test.php b/phpunit/block-supports/colors-test.php index 9548b83dde743..88e3994eb226b 100644 --- a/phpunit/block-supports/colors-test.php +++ b/phpunit/block-supports/colors-test.php @@ -48,4 +48,84 @@ function test_color_slugs_with_numbers_are_kebab_cased_properly() { $this->assertSame( $expected, $actual ); unregister_block_type( 'test/color-slug-with-numbers' ); } + + function test_color_with_skipped_serialization_block_supports() { + $block_name = 'test/color-with-skipped-serialization-block-supports'; + register_block_type( + $block_name, + array( + 'api_version' => 2, + 'attributes' => array( + 'style' => array( + 'type' => 'object', + ), + ), + 'supports' => array( + 'color' => array( + 'text' => true, + 'gradients' => true, + '__experimentalSkipSerialization' => true, + ), + ), + ) + ); + + $registry = WP_Block_Type_Registry::get_instance(); + $block_type = $registry->get_registered( $block_name ); + $block_atts = array( + 'style' => array( + 'color' => array( + 'text' => '#d92828', + 'gradient' => 'linear-gradient(135deg,rgb(6,147,227) 0%,rgb(223,13,13) 46%,rgb(155,81,224) 100%)', + ), + ), + ); + + $actual = gutenberg_apply_colors_support( $block_type, $block_atts ); + $expected = array(); + + $this->assertSame( $expected, $actual ); + unregister_block_type( $block_name ); + } + + function test_gradient_with_individual_skipped_serialization_block_supports() { + $block_name = 'test/gradient-with-individual-skipped-serialization-block-support'; + register_block_type( + $block_name, + array( + 'api_version' => 2, + 'attributes' => array( + 'style' => array( + 'type' => 'object', + ), + ), + 'supports' => array( + 'color' => array( + 'text' => true, + 'gradients' => true, + '__experimentalSkipSerialization' => array( 'gradients' ), + ), + ), + ) + ); + + $registry = WP_Block_Type_Registry::get_instance(); + $block_type = $registry->get_registered( $block_name ); + $block_atts = array( + 'style' => array( + 'color' => array( + 'text' => '#d92828', + ), + ), + ); + + $actual = gutenberg_apply_colors_support( $block_type, $block_atts ); + $expected = array( + 'class' => 'has-text-color', + 'style' => 'color: #d92828;', + ); + + $this->assertSame( $expected, $actual ); + unregister_block_type( $block_name ); + } } diff --git a/phpunit/block-supports/spacing-test.php b/phpunit/block-supports/spacing-test.php new file mode 100644 index 0000000000000..324514b15a4e4 --- /dev/null +++ b/phpunit/block-supports/spacing-test.php @@ -0,0 +1,148 @@ + 2, + 'attributes' => array( + 'style' => array( + 'type' => 'object', + ), + ), + 'supports' => array( + 'spacing' => array( + 'margin' => true, + 'padding' => true, + 'blockGap' => true, + ), + ), + ) + ); + $registry = WP_Block_Type_Registry::get_instance(); + $block_type = $registry->get_registered( $block_name ); + $block_atts = array( + 'style' => array( + 'spacing' => array( + 'margin' => array( + 'top' => '1px', + 'right' => '2px', + 'bottom' => '3px', + 'left' => '4px', + ), + 'padding' => '111px', + 'blockGap' => '2em', + ), + ), + ); + + $actual = gutenberg_apply_spacing_support( $block_type, $block_atts ); + $expected = array( + 'style' => 'padding:111px;margin-top:1px;margin-right:2px;margin-bottom:3px;margin-left:4px;', + ); + + $this->assertSame( $expected, $actual ); + unregister_block_type( $block_name ); + } + + function test_spacing_with_skipped_serialization_block_supports() { + $block_name = 'test/spacing-with-skipped-serialization-block-supports'; + register_block_type( + $block_name, + array( + 'api_version' => 2, + 'attributes' => array( + 'style' => array( + 'type' => 'object', + ), + ), + 'supports' => array( + 'spacing' => array( + 'margin' => true, + 'padding' => true, + 'blockGap' => true, + '__experimentalSkipSerialization' => true, + ), + ), + ) + ); + $registry = WP_Block_Type_Registry::get_instance(); + $block_type = $registry->get_registered( $block_name ); + $block_atts = array( + 'style' => array( + 'spacing' => array( + 'margin' => array( + 'top' => '1px', + 'right' => '2px', + 'bottom' => '3px', + 'left' => '4px', + ), + 'padding' => '111px', + 'blockGap' => '2em', + ), + ), + ); + + $actual = gutenberg_apply_spacing_support( $block_type, $block_atts ); + $expected = array(); + + $this->assertSame( $expected, $actual ); + unregister_block_type( $block_name ); + } + + function test_margin_with_individual_skipped_serialization_block_supports() { + $block_name = 'test/margin-with-individual-skipped-serialization-block-supports'; + register_block_type( + $block_name, + array( + 'api_version' => 2, + 'attributes' => array( + 'style' => array( + 'type' => 'object', + ), + ), + 'supports' => array( + 'spacing' => array( + 'margin' => true, + 'padding' => true, + 'blockGap' => true, + '__experimentalSkipSerialization' => array( 'margin' ), + ), + ), + ) + ); + $registry = WP_Block_Type_Registry::get_instance(); + $block_type = $registry->get_registered( $block_name ); + $block_atts = array( + 'style' => array( + 'spacing' => array( + 'padding' => array( + 'top' => '1px', + 'right' => '2px', + 'bottom' => '3px', + 'left' => '4px', + ), + 'margin' => '111px', + 'blockGap' => '2em', + ), + ), + ); + + $actual = gutenberg_apply_spacing_support( $block_type, $block_atts ); + $expected = array( + 'style' => 'padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;', + ); + + $this->assertSame( $expected, $actual ); + unregister_block_type( $block_name ); + } +} diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php index dbca89457a209..312b86f6a0b38 100644 --- a/phpunit/block-supports/typography-test.php +++ b/phpunit/block-supports/typography-test.php @@ -66,6 +66,80 @@ function test_font_family_with_legacy_inline_styles_using_a_value() { unregister_block_type( $block_name ); } + function test_typography_with_skipped_serialization_block_supports() { + $block_name = 'test/typography-with-skipped-serialization-block-supports'; + register_block_type( + $block_name, + array( + 'api_version' => 2, + 'attributes' => array( + 'style' => array( + 'type' => 'object', + ), + ), + 'supports' => array( + 'typography' => array( + 'fontSize' => true, + 'lineHeight' => true, + '__experimentalFontFamily' => true, + '__experimentalLetterSpacing' => true, + '__experimentalSkipSerialization' => true, + ), + ), + ) + ); + $registry = WP_Block_Type_Registry::get_instance(); + $block_type = $registry->get_registered( $block_name ); + $block_atts = array( + 'style' => array( + 'typography' => array( + 'fontSize' => 'serif', + 'lineHeight' => 'serif', + 'fontFamily' => '22px', + 'letterSpacing' => '22px', + ), + ), + ); + + $actual = gutenberg_apply_typography_support( $block_type, $block_atts ); + $expected = array(); + + $this->assertSame( $expected, $actual ); + unregister_block_type( $block_name ); + } + + function test_letter_spacing_with_individual_skipped_serialization_block_supports() { + $block_name = 'test/letter-spacing-with-individua-skipped-serialization-block-supports'; + register_block_type( + $block_name, + array( + 'api_version' => 2, + 'attributes' => array( + 'style' => array( + 'type' => 'object', + ), + ), + 'supports' => array( + 'typography' => array( + '__experimentalLetterSpacing' => true, + '__experimentalSkipSerialization' => array( + 'letterSpacing', + ), + ), + ), + ) + ); + $registry = WP_Block_Type_Registry::get_instance(); + $block_type = $registry->get_registered( $block_name ); + $block_atts = array( 'style' => array( 'typography' => array( 'letterSpacing' => '22px' ) ) ); + + $actual = gutenberg_apply_typography_support( $block_type, $block_atts ); + $expected = array(); + + $this->assertSame( $expected, $actual ); + unregister_block_type( $block_name ); + } + function test_font_family_with_legacy_inline_styles_using_a_css_var() { $block_name = 'test/font-family-with-inline-styles-using-css-var'; register_block_type(