Block Supports: Allow skipping serialization of font size (#30879)

Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
WordPress · Apr 28, 2021 · a4003a0 · a4003a0
1 parent 6fbb4ab
commit a4003a0
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 19 deletions.
diff --git 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
@@ -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 <BlockListBlock { ...props } />;
+		}
+
+		const fontSizeValue = getFontSize(
+			fontSizes,
+			fontSize,
+			style?.typography?.fontSize
+		).size;
 
-			newProps.wrapperProps = {
+		const newProps = {
+			...props,
+			wrapperProps: {
 				...wrapperProps,
 				style: {
 					fontSize: fontSizeValue,
 					...wrapperProps?.style,
 				},
-			};
-		}
+			},
+		};
 
 		return <BlockListBlock { ...newProps } />;
 	},

diff --git 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,