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,