diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 6ad07caae3487c..f2babdc7e6c969 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -72,8 +72,10 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { $has_text_decoration_support = _wp_array_get( $block_type->supports, array( '__experimentalTextDecoration' ), false ); $has_text_transform_support = _wp_array_get( $block_type->supports, array( '__experimentalTextTransform' ), false ); + $skip_font_size_support_serialization = _wp_array_get( $block_type->supports, array( '__experimentalSkipFontSizeSerialization' ), false ); + // Font Size. - if ( $has_font_size_support ) { + if ( $has_font_size_support && ! $skip_font_size_support_serialization ) { $has_named_font_size = array_key_exists( 'fontSize', $block_attributes ); $has_custom_font_size = isset( $block_attributes['style']['typography']['fontSize'] ); diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js index 277c413e98b0a7..152f20602d65a1 100644 --- a/packages/block-editor/src/hooks/font-size.js +++ b/packages/block-editor/src/hooks/font-size.js @@ -57,6 +57,12 @@ function addSaveProps( props, blockType, attributes ) { return props; } + if ( + hasBlockSupport( blockType, '__experimentalSkipFontSizeSerialization' ) + ) { + return props; + } + // Use TokenList to dedupe classes. const classes = new TokenList( props.className ); classes.add( getFontSizeClass( attributes.fontSize ) ); @@ -168,30 +174,38 @@ const withFontSizeInlineStyles = createHigherOrderComponent( wrapperProps, } = props; - const newProps = { ...props }; - - // Only add inline styles if the block supports font sizes, doesn't - // already have an inline font size, and does have a class to extract - // the font size from. + // Only add inline styles if the block supports font sizes, + // doesn't skip serialization of font sizes, + // doesn't already have an inline font size, + // and does have a class to extract the font size from. if ( - hasBlockSupport( blockName, FONT_SIZE_SUPPORT_KEY ) && - fontSize && - ! style?.typography?.fontSize + ! hasBlockSupport( blockName, FONT_SIZE_SUPPORT_KEY ) || + hasBlockSupport( + blockName, + '__experimentalSkipFontSizeSerialization' + ) || + ! fontSize || + style?.typography?.fontSize ) { - const fontSizeValue = getFontSize( - fontSizes, - fontSize, - style?.typography?.fontSize - ).size; + return ; + } + + const fontSizeValue = getFontSize( + fontSizes, + fontSize, + style?.typography?.fontSize + ).size; - newProps.wrapperProps = { + const newProps = { + ...props, + wrapperProps: { ...wrapperProps, style: { fontSize: fontSizeValue, ...wrapperProps?.style, }, - }; - } + }, + }; return ; }, diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index b1c7239b2d791d..af59e918d61b93 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { capitalize, get, has, omitBy, startsWith } from 'lodash'; +import { capitalize, get, has, omit, omitBy, startsWith } from 'lodash'; /** * WordPress dependencies @@ -19,6 +19,7 @@ import { createHigherOrderComponent } from '@wordpress/compose'; */ import { BORDER_SUPPORT_KEY, BorderPanel } from './border'; import { COLOR_SUPPORT_KEY, ColorEdit } from './color'; +import { FONT_SIZE_SUPPORT_KEY } from './font-size'; import { TypographyPanel, TYPOGRAPHY_SUPPORT_KEYS } from './typography'; import { SPACING_SUPPORT_KEY, PaddingEdit } from './padding'; import SpacingPanelControl from '../components/spacing-panel-control'; @@ -127,10 +128,19 @@ export function addSaveProps( props, blockType, attributes ) { } const { style } = attributes; - const filteredStyle = omitKeysNotToSerialize( style, { + let filteredStyle = omitKeysNotToSerialize( style, { border: getBlockSupport( blockType, BORDER_SUPPORT_KEY ), [ COLOR_SUPPORT_KEY ]: getBlockSupport( blockType, COLOR_SUPPORT_KEY ), } ); + + if ( + getBlockSupport( blockType, '__experimentalSkipFontSizeSerialization' ) + ) { + filteredStyle = omit( filteredStyle, [ + [ 'typography', FONT_SIZE_SUPPORT_KEY ], + ] ); + } + props.style = { ...getInlineStyles( filteredStyle ), ...props.style,