@wordpress/block-editor 8.3.0 → 8.5.0

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

@@ -0,0 +1,66 @@
+/**
+ * Internal dependencies
+ */
+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();
+			expect( getGapCSSValue( '' ) ).toBeNull();
+		} );
+
+		it( 'should return single value for gap if argument is valid string', () => {
+			expect( getGapCSSValue( '88rem' ) ).toEqual( '88rem' );
+		} );
+
+		it( 'should return single value for gap if row and column are the same', () => {
+			const blockGapValue = {
+				top: '88rem',
+				left: '88rem',
+			};
+			expect( getGapCSSValue( blockGapValue ) ).toEqual( '88rem' );
+		} );
+
+		it( 'should return shorthand value for gap if row and column are different', () => {
+			const blockGapValue = {
+				top: '88px',
+				left: '88rem',
+			};
+			expect( getGapCSSValue( blockGapValue ) ).toEqual( '88px 88rem' );
+		} );
+
+		it( 'should return default value if a top or left is missing', () => {
+			const blockGapValue = {
+				top: '88px',
+			};
+			expect( getGapCSSValue( blockGapValue, '1px' ) ).toEqual(
+				'88px 1px'
+			);
+		} );
+	} );
+} );

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

package/src/layouts/flex.js

@@ -16,8 +16,14 @@ import { Button, ToggleControl, Flex, FlexItem } from '@wordpress/components';
  * Internal dependencies
  */
 import { appendSelectors } from './utils';
+import { getGapCSSValue } from '../hooks/gap';
 import useSetting from '../components/use-setting';
-import { BlockControls, JustifyContentControl } from '../components';
+import {
+	BlockControls,
+	JustifyContentControl,
+	BlockVerticalAlignmentControl,
+} from '../components';
+import { shouldSkipSerialization } from '../hooks/utils';
 
 // Used with the default, horizontal flex orientation.
 const justifyContentMap = {
@@ -34,6 +40,12 @@ const alignItemsMap = {
 	center: 'center',
 };
 
+const verticalAlignmentMap = {
+	top: 'flex-start',
+	center: 'center',
+	bottom: 'flex-end',
+};
+
 const flexWrapOptions = [ 'wrap', 'nowrap' ];
 
 export default {
@@ -42,8 +54,9 @@ export default {
 	inspectorControls: function FlexLayoutInspectorControls( {
 		layout = {},
 		onChange,
+		layoutBlockSupport = {},
 	} ) {
-		const { allowOrientation = true } = layout;
+		const { allowOrientation = true } = layoutBlockSupport;
 		return (
 			<>
 				<Flex>
@@ -74,6 +87,7 @@ export default {
 		if ( layoutBlockSupport?.allowSwitching ) {
 			return null;
 		}
+		const { allowVerticalAlignment = true } = layoutBlockSupport;
 		return (
 			<BlockControls group="block" __experimentalShareWithChildBlocks>
 				<FlexLayoutJustifyContentControl
@@ -81,24 +95,40 @@ export default {
 					onChange={ onChange }
 					isToolbar
 				/>
+				{ allowVerticalAlignment &&
+					layout?.orientation !== 'vertical' && (
+						<FlexLayoutVerticalAlignmentControl
+							layout={ layout }
+							onChange={ onChange }
+							isToolbar
+						/>
+					) }
 			</BlockControls>
 		);
 	},
-	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 =
-			style?.spacing?.blockGap ?? '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;
 		const flexWrap = flexWrapOptions.includes( layout.flexWrap )
 			? layout.flexWrap
 			: 'wrap';
+		const verticalAlignment =
+			verticalAlignmentMap[ layout.verticalAlignment ] ||
+			verticalAlignmentMap.center;
 		const rowOrientation = `
 		flex-direction: row;
-		align-items: center;
+		align-items: ${ verticalAlignment };
 		justify-content: ${ justifyContent };
 		`;
 		const alignItems =
@@ -112,8 +142,8 @@ export default {
 			<style>{ `
 				${ appendSelectors( selector ) } {
 					display: flex;
-					gap: ${ hasBlockGapStylesSupport ? blockGapValue : '0.5em' };
 					flex-wrap: ${ flexWrap };
+					gap: ${ hasBlockGapStylesSupport ? blockGapValue : '0.5em' };
 					${ orientation === 'horizontal' ? rowOrientation : columnOrientation }
 				}
 
@@ -132,6 +162,63 @@ export default {
 	},
 };
 
+function FlexLayoutVerticalAlignmentControl( {
+	layout,
+	onChange,
+	isToolbar = false,
+} ) {
+	const { verticalAlignment = verticalAlignmentMap.center } = layout;
+
+	const onVerticalAlignmentChange = ( value ) => {
+		onChange( {
+			...layout,
+			verticalAlignment: value,
+		} );
+	};
+	if ( isToolbar ) {
+		return (
+			<BlockVerticalAlignmentControl
+				onChange={ onVerticalAlignmentChange }
+				value={ verticalAlignment }
+			/>
+		);
+	}
+
+	const verticalAlignmentOptions = [
+		{
+			value: 'flex-start',
+			label: __( 'Align items top' ),
+		},
+		{
+			value: 'center',
+			label: __( 'Align items center' ),
+		},
+		{
+			value: 'flex-end',
+			label: __( 'Align items bottom' ),
+		},
+	];
+
+	return (
+		<fieldset className="block-editor-hooks__flex-layout-vertical-alignment-control">
+			<legend>{ __( 'Vertical alignment' ) }</legend>
+			<div>
+				{ verticalAlignmentOptions.map( ( value, icon, label ) => {
+					return (
+						<Button
+							key={ value }
+							label={ label }
+							icon={ icon }
+							isPressed={ verticalAlignment === value }
+							onClick={ () => onVerticalAlignmentChange( value ) }
+						/>
+					);
+				} ) }
+			</div>
+		</fieldset>
+	);
+}
+
 function FlexLayoutJustifyContentControl( {
 	layout,
 	onChange,

package/src/layouts/flow.js

@@ -14,6 +14,8 @@ 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',
@@ -105,12 +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 =
-			style?.spacing?.blockGap ?? 'var( --wp--style--block-gap )';
+			blockGapStyleValue?.top &&
+			! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
+				? blockGapStyleValue?.top
+				: 'var( --wp--style--block-gap )';
 
 		let output =
 			!! contentSize || !! wideSize
@@ -123,11 +138,9 @@ export default {
 						margin-left: auto !important;
 						margin-right: auto !important;
 					}
-
 					${ appendSelectors( selector, '> .alignwide' ) }  {
 						max-width: ${ wideSize ?? contentSize };
 					}
-
 					${ appendSelectors( selector, '> .alignfull' ) } {
 						max-width: none;
 					}
@@ -137,26 +150,29 @@ export default {
 		output += `
 			${ appendSelectors( selector, '> .alignleft' ) } {
 				float: left;
-				margin-right: 2em;
-				margin-left: 0;
+				margin-inline-start: 0;
+				margin-inline-end: 2em;
 			}
-
 			${ appendSelectors( selector, '> .alignright' ) } {
 				float: right;
-				margin-left: 2em;
-				margin-right: 0;
+				margin-inline-start: 2em;
+				margin-inline-end: 0;
 			}
 
+			${ appendSelectors( selector, '> .aligncenter' ) } {
+				margin-left: auto !important;
+				margin-right: auto !important;
+			}
 		`;
 
 		if ( hasBlockGapStylesSupport ) {
 			output += `
 				${ appendSelectors( selector, '> *' ) } {
-					margin-top: 0;
-					margin-bottom: 0;
+					margin-block-start: 0;
+					margin-block-end: 0;
 				}
 				${ appendSelectors( selector, '> * + *' ) } {
-					margin-top: ${ blockGapValue };
+					margin-block-start: ${ blockGapValue };
 				}
 			`;
 		}