@wordpress/block-editor 8.4.0 → 8.5.2

package/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 <BlockListBlock { ...props } />;
 		}

package/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.

package/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 <BlockListBlock { ...props } />;
 		}
 		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

package/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;

package/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

package/src/hooks/gap.js

@@ -40,34 +40,36 @@ export function hasGapValue( props ) {
 }
 
 /**
- * Returns a BoxControl object value from a given blockGap style.
+ * Returns a BoxControl object value from a given blockGap style value.
  * The string check is for backwards compatibility before Gutenberg supported
  * split gap values (row and column) and the value was a string n + unit.
  *
- * @param {string? | Object?} rawBlockGapValue A style object.
- * @return {Object?}                           A value to pass to the BoxControl component.
+ * @param {string? | Object?} blockGapValue A block gap string or axial object value, e.g., '10px' or { top: '10px', left: '10px'}.
+ * @return {Object|null}                    A value to pass to the BoxControl component.
  */
-export function getGapValueFromStyle( rawBlockGapValue ) {
-	if ( ! rawBlockGapValue ) {
-		return rawBlockGapValue;
+export function getGapBoxControlValueFromStyle( blockGapValue ) {
+	if ( ! blockGapValue ) {
+		return null;
 	}
 
-	const isValueString = typeof rawBlockGapValue === 'string';
+	const isValueString = typeof blockGapValue === 'string';
 	return {
-		top: isValueString ? rawBlockGapValue : rawBlockGapValue?.top,
-		left: isValueString ? rawBlockGapValue : rawBlockGapValue?.left,
+		top: isValueString ? blockGapValue : blockGapValue?.top,
+		left: isValueString ? blockGapValue : blockGapValue?.left,
 	};
 }
 
 /**
  * Returns a CSS value for the `gap` property from a given blockGap style.
  *
- * @param {string? | Object?} blockGapValue A style object.
+ * @param {string? | Object?} blockGapValue A block gap string or axial object value, e.g., '10px' or { top: '10px', left: '10px'}.
  * @param {string?}           defaultValue  A default gap value.
  * @return {string|null}                    The concatenated gap value (row and column).
  */
 export function getGapCSSValue( blockGapValue, defaultValue = '0' ) {
-	const blockGapBoxControlValue = getGapValueFromStyle( blockGapValue );
+	const blockGapBoxControlValue = getGapBoxControlValueFromStyle(
+		blockGapValue
+	);
 	if ( ! blockGapBoxControlValue ) {
 		return null;
 	}
@@ -142,14 +144,22 @@ export function GapEdit( props ) {
 		return null;
 	}
 
+	const splitOnAxis =
+		sides && sides.some( ( side ) => AXIAL_SIDES.includes( side ) );
+
 	const onChange = ( next ) => {
+		let blockGap = next;
+
+		// If splitOnAxis activated we need to return a BoxControl object to the BoxControl component.
+		if ( !! next && splitOnAxis ) {
+			blockGap = { ...getGapBoxControlValueFromStyle( next ) };
+		}
+
 		const newStyle = {
 			...style,
 			spacing: {
 				...style?.spacing,
-				blockGap: {
-					...getGapValueFromStyle( next ),
-				},
+				blockGap,
 			},
 		};
 
@@ -171,9 +181,7 @@ export function GapEdit( props ) {
 		}
 	};
 
-	const splitOnAxis =
-		sides && sides.some( ( side ) => AXIAL_SIDES.includes( side ) );
-	const gapValue = getGapValueFromStyle( style?.spacing?.blockGap );
+	const gapValue = getGapBoxControlValueFromStyle( style?.spacing?.blockGap );
 
 	// The BoxControl component expects a full complement of side values.
 	// Gap row and column values translate to top/bottom and left/right respectively.

package/src/hooks/layout.js

@@ -56,6 +56,15 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 		return null;
 	}
 
+	// Only show the inherit toggle if it's supported,
+	// a default theme layout is set (e.g. one that provides `contentSize` and/or `wideSize` values),
+	// and that the default / flow layout type is in use, as this is the only one that supports inheritance.
+	const showInheritToggle = !! (
+		allowInheriting &&
+		!! defaultThemeLayout &&
+		( ! layout?.type || layout?.type === 'default' || layout?.inherit )
+	);
+
 	const usedLayout = layout || defaultBlockLayout || {};
 	const { inherit = false, type = 'default' } = usedLayout;
 	/**
@@ -77,7 +86,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 		<>
 			<InspectorControls>
 				<PanelBody title={ __( 'Layout' ) }>
-					{ allowInheriting && !! defaultThemeLayout && (
+					{ showInheritToggle && (
 						<ToggleControl
 							label={ __( 'Inherit default layout' ) }
 							checked={ !! inherit }
@@ -213,6 +222,7 @@ export const withLayoutStyles = createHigherOrderComponent(
 					element &&
 					createPortal(
 						<LayoutStyle
+							blockName={ name }
 							selector={ `.wp-container-${ id }` }
 							layout={ usedLayout }
 							style={ attributes?.style }

package/src/hooks/style.js

@@ -42,6 +42,7 @@ import {
 } from './typography';
 import { SPACING_SUPPORT_KEY, DimensionsPanel } from './dimensions';
 import useDisplayBlockControls from '../components/use-display-block-controls';
+import { shouldSkipSerialization } from './utils';
 
 const styleSupportKeys = [
 	...TYPOGRAPHY_SUPPORT_KEYS,
@@ -200,6 +201,19 @@ const skipSerializationPathsSave = {
 	[ `${ SPACING_SUPPORT_KEY }` ]: [ 'spacing.blockGap' ],
 };
 
+/**
+ * A dictionary used to normalize feature names between support flags, style
+ * object properties and __experimentSkipSerialization configuration arrays.
+ *
+ * This allows not having to provide a migration for a support flag and possible
+ * backwards compatibility bridges, while still achieving consistency between
+ * the support flag and the skip serialization array.
+ *
+ * @constant
+ * @type {Record<string, string>}
+ */
+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 );
 

package/src/hooks/test/gap.js

@@ -1,9 +1,33 @@
 /**
  * Internal dependencies
  */
-import { getGapCSSValue } from '../gap';
+import { getGapCSSValue, getGapBoxControlValueFromStyle } from '../gap';
 
 describe( 'gap', () => {
+	describe( 'getGapBoxControlValueFromStyle()', () => {
+		it( 'should return `null` if argument is falsey', () => {
+			expect( getGapBoxControlValueFromStyle( undefined ) ).toBeNull();
+			expect( getGapBoxControlValueFromStyle( '' ) ).toBeNull();
+		} );
+		it( 'should return box control value from string', () => {
+			const expectedValue = {
+				top: '88rem',
+				left: '88rem',
+			};
+			expect( getGapBoxControlValueFromStyle( '88rem' ) ).toEqual(
+				expectedValue
+			);
+		} );
+		it( 'should return box control value from object', () => {
+			const blockGapValue = {
+				top: '222em',
+				left: '22px',
+			};
+			expect( getGapBoxControlValueFromStyle( blockGapValue ) ).toEqual( {
+				...blockGapValue,
+			} );
+		} );
+	} );
 	describe( 'getGapCSSValue()', () => {
 		it( 'should return `null` if argument is falsey', () => {
 			expect( getGapCSSValue( undefined ) ).toBeNull();

package/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: () => <div className="default" />,
+		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',
+		} );
+	} );
+} );

package/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(
 				{},

package/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;
+}