@wordpress/block-editor 9.5.0 → 9.7.1-next.d6164808d3.0

package/src/hooks/style.js

@@ -1,22 +1,21 @@
 /**
  * External dependencies
  */
-import { get, has, isEmpty, kebabCase, omit } from 'lodash';
+import { omit } from 'lodash';
 import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import { useContext, createPortal } from '@wordpress/element';
+import { useContext, useMemo, createPortal } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import {
 	getBlockSupport,
 	hasBlockSupport,
-	__EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,
 	__EXPERIMENTAL_ELEMENTS as ELEMENTS,
 } from '@wordpress/blocks';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
-import { getCSSRules } from '@wordpress/style-engine';
+import { getCSSRules, compileCSS } from '@wordpress/style-engine';
 
 /**
  * Internal dependencies
@@ -43,20 +42,6 @@ const styleSupportKeys = [
 const hasStyleSupport = ( blockType ) =>
 	styleSupportKeys.some( ( key ) => hasBlockSupport( blockType, key ) );
 
-const VARIABLE_REFERENCE_PREFIX = 'var:';
-const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
-const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
-function compileStyleValue( uncompiledValue ) {
-	if ( uncompiledValue?.startsWith?.( VARIABLE_REFERENCE_PREFIX ) ) {
-		const variable = uncompiledValue
-			.slice( VARIABLE_REFERENCE_PREFIX.length )
-			.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )
-			.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );
-		return `var(--wp--${ variable })`;
-	}
-	return uncompiledValue;
-}
-
 /**
  * Returns the inline styles to add depending on the style object
  *
@@ -65,68 +50,16 @@ function compileStyleValue( uncompiledValue ) {
  * @return {Object} Flattened CSS variables declaration.
  */
 export function getInlineStyles( styles = {} ) {
-	const ignoredStyles = [ 'spacing.blockGap' ];
 	const output = {};
-	Object.keys( STYLE_PROPERTY ).forEach( ( propKey ) => {
-		const path = STYLE_PROPERTY[ propKey ].value;
-		const subPaths = STYLE_PROPERTY[ propKey ].properties;
-		// Ignore styles on elements because they are handled on the server.
-		if ( has( styles, path ) && 'elements' !== path?.[ 0 ] ) {
-			// Checking if style value is a string allows for shorthand css
-			// option and backwards compatibility for border radius support.
-			const styleValue = get( styles, path );
-
-			if ( ! STYLE_PROPERTY[ propKey ].useEngine ) {
-				if ( !! subPaths && typeof styleValue !== 'string' ) {
-					Object.entries( subPaths ).forEach( ( entry ) => {
-						const [ name, subPath ] = entry;
-						const value = get( styleValue, [ subPath ] );
-
-						if ( value ) {
-							output[ name ] = compileStyleValue( value );
-						}
-					} );
-				} else if ( ! ignoredStyles.includes( path.join( '.' ) ) ) {
-					output[ propKey ] = compileStyleValue(
-						get( styles, path )
-					);
-				}
-			}
-		}
-	} );
-
 	// The goal is to move everything to server side generated engine styles
 	// This is temporary as we absorb more and more styles into the engine.
-	const extraRules = getCSSRules( styles );
-	extraRules.forEach( ( rule ) => {
+	getCSSRules( styles ).forEach( ( rule ) => {
 		output[ rule.key ] = rule.value;
 	} );
 
 	return output;
 }
 
-function compileElementsStyles( selector, elements = {} ) {
-	return Object.entries( elements )
-		.map( ( [ element, styles ] ) => {
-			const elementStyles = getInlineStyles( styles );
-			if ( ! isEmpty( elementStyles ) ) {
-				// The .editor-styles-wrapper selector is required on elements styles. As it is
-				// added to all other editor styles, not providing it causes reset and global
-				// styles to override element styles because of higher specificity.
-				return [
-					`.editor-styles-wrapper .${ selector } ${ ELEMENTS[ element ] }{`,
-					...Object.entries( elementStyles ).map(
-						( [ cssProperty, value ] ) =>
-							`\t${ kebabCase( cssProperty ) }: ${ value };`
-					),
-					'}',
-				].join( '\n' );
-			}
-			return '';
-		} )
-		.join( '\n' );
-}
-
 /**
  * Filters registered block settings, extending attributes to include `style` attribute.
  *
@@ -306,7 +239,7 @@ export const withBlockControls = createHigherOrderComponent(
 );
 
 /**
- * Override the default block element to include duotone styles.
+ * Override the default block element to include elements styles.
  *
  * @param {Function} BlockListBlock Original component
  * @return {Function}                Wrapped component
@@ -323,23 +256,46 @@ const withElementsStyles = createHigherOrderComponent(
 			'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,
-			elements
-		);
+		const styles = useMemo( () => {
+			const rawElementsStyles = props.attributes.style?.elements;
+			const elementCssRules = [];
+			if (
+				rawElementsStyles &&
+				Object.keys( rawElementsStyles ).length > 0
+			) {
+				// Remove values based on whether serialization has been skipped for a specific style.
+				const filteredElementsStyles = {
+					...rawElementsStyles,
+					link: {
+						...rawElementsStyles.link,
+						color: ! skipLinkColorSerialization
+							? rawElementsStyles.link?.color
+							: undefined,
+					},
+				};
+
+				for ( const [ elementName, elementStyles ] of Object.entries(
+					filteredElementsStyles
+				) ) {
+					const cssRule = compileCSS( elementStyles, {
+						// The .editor-styles-wrapper selector is required on elements styles. As it is
+						// added to all other editor styles, not providing it causes reset and global
+						// styles to override element styles because of higher specificity.
+						selector: `.editor-styles-wrapper .${ blockElementsContainerIdentifier } ${ ELEMENTS[ elementName ] }`,
+					} );
+					if ( !! cssRule ) {
+						elementCssRules.push( cssRule );
+					}
+				}
+			}
+			return elementCssRules.length > 0 ? elementCssRules : undefined;
+		}, [ props.attributes.style?.elements ] );
+
 		const element = useContext( BlockList.__unstableElementContext );
 
 		return (
 			<>
-				{ elements &&
+				{ styles &&
 					element &&
 					createPortal(
 						<style
@@ -353,7 +309,7 @@ const withElementsStyles = createHigherOrderComponent(
 				<BlockListBlock
 					{ ...props }
 					className={
-						elements
+						props.attributes.style?.elements
 							? classnames(
 									props.className,
 									blockElementsContainerIdentifier

package/src/hooks/test/gap.js

@@ -27,6 +27,28 @@ describe( 'gap', () => {
 				...blockGapValue,
 			} );
 		} );
+		it( 'should unwrap var: values from a string into a CSS var() function', () => {
+			const expectedValue = {
+				top: 'var(--wp--preset--spacing--60)',
+				left: 'var(--wp--preset--spacing--60)',
+			};
+			expect(
+				getGapBoxControlValueFromStyle( 'var:preset|spacing|60' )
+			).toEqual( expectedValue );
+		} );
+		it( 'should unwrap var: values from an object into a CSS var() function', () => {
+			const expectedValue = {
+				top: 'var(--wp--preset--spacing--20)',
+				left: 'var(--wp--preset--spacing--60)',
+			};
+			const blockGapValue = {
+				top: 'var:preset|spacing|20',
+				left: 'var:preset|spacing|60',
+			};
+			expect( getGapBoxControlValueFromStyle( blockGapValue ) ).toEqual(
+				expectedValue
+			);
+		} );
 	} );
 	describe( 'getGapCSSValue()', () => {
 		it( 'should return `null` if argument is falsey', () => {

package/src/hooks/typography.scss

@@ -1,5 +1,4 @@
 .typography-block-support-panel {
-	.components-font-appearance-control,
 	.components-font-size-picker__controls,
 	.block-editor-text-decoration-control__buttons,
 	.block-editor-text-transform-control__buttons {

package/src/layouts/constrained.js

@@ -0,0 +1,217 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
+import { getCSSRules } from '@wordpress/style-engine';
+
+/**
+ * Internal dependencies
+ */
+import useSetting from '../components/use-setting';
+import { appendSelectors, getBlockGapCSS, getAlignmentsInfo } from './utils';
+import { getGapBoxControlValueFromStyle } from '../hooks/gap';
+import { shouldSkipSerialization } from '../hooks/utils';
+
+export default {
+	name: 'constrained',
+	label: __( 'Constrained' ),
+	inspectorControls: function DefaultLayoutInspectorControls( {
+		layout,
+		onChange,
+	} ) {
+		const { wideSize, contentSize } = layout;
+		const units = useCustomUnits( {
+			availableUnits: useSetting( 'spacing.units' ) || [
+				'%',
+				'px',
+				'em',
+				'rem',
+				'vw',
+			],
+		} );
+
+		return (
+			<>
+				<div className="block-editor-hooks__layout-controls">
+					<div className="block-editor-hooks__layout-controls-unit">
+						<UnitControl
+							label={ __( 'Content' ) }
+							labelPosition="top"
+							__unstableInputWidth="80px"
+							value={ contentSize || wideSize || '' }
+							onChange={ ( nextWidth ) => {
+								nextWidth =
+									0 > parseFloat( nextWidth )
+										? '0'
+										: nextWidth;
+								onChange( {
+									...layout,
+									contentSize: nextWidth,
+								} );
+							} }
+							units={ units }
+						/>
+						<Icon icon={ positionCenter } />
+					</div>
+					<div className="block-editor-hooks__layout-controls-unit">
+						<UnitControl
+							label={ __( 'Wide' ) }
+							labelPosition="top"
+							__unstableInputWidth="80px"
+							value={ wideSize || contentSize || '' }
+							onChange={ ( nextWidth ) => {
+								nextWidth =
+									0 > parseFloat( nextWidth )
+										? '0'
+										: nextWidth;
+								onChange( {
+									...layout,
+									wideSize: nextWidth,
+								} );
+							} }
+							units={ units }
+						/>
+						<Icon icon={ stretchWide } />
+					</div>
+				</div>
+				<div className="block-editor-hooks__layout-controls-reset">
+					<Button
+						variant="secondary"
+						isSmall
+						disabled={ ! contentSize && ! wideSize }
+						onClick={ () =>
+							onChange( {
+								contentSize: undefined,
+								wideSize: undefined,
+								inherit: false,
+							} )
+						}
+					>
+						{ __( 'Reset' ) }
+					</Button>
+				</div>
+
+				<p className="block-editor-hooks__layout-controls-helptext">
+					{ __(
+						'Customize the width for all elements that are assigned to the center or wide columns.'
+					) }
+				</p>
+			</>
+		);
+	},
+	toolBarControls: function DefaultLayoutToolbarControls() {
+		return null;
+	},
+	getLayoutStyle: function getLayoutStyle( {
+		selector,
+		layout = {},
+		style,
+		blockName,
+		hasBlockGapSupport,
+		layoutDefinitions,
+	} ) {
+		const { contentSize, wideSize } = layout;
+		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 =
+			blockGapStyleValue?.top &&
+			! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
+				? blockGapStyleValue?.top
+				: '';
+
+		let output =
+			!! contentSize || !! wideSize
+				? `
+					${ appendSelectors(
+						selector,
+						'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'
+					) } {
+						max-width: ${ contentSize ?? wideSize };
+						margin-left: auto !important;
+						margin-right: auto !important;
+					}
+					${ appendSelectors( selector, '> .alignwide' ) }  {
+						max-width: ${ wideSize ?? contentSize };
+					}
+					${ appendSelectors( selector, '> .alignfull' ) } {
+						max-width: none;
+					}
+				`
+				: '';
+
+		// If there is custom padding, add negative margins for alignfull blocks.
+		if ( style?.spacing?.padding ) {
+			// The style object might be storing a preset so we need to make sure we get a usable value.
+			const paddingValues = getCSSRules( style );
+			paddingValues.forEach( ( rule ) => {
+				if ( rule.key === 'paddingRight' ) {
+					output += `
+					${ appendSelectors( selector, '> .alignfull' ) } {
+						margin-right: calc(${ rule.value } * -1);
+					}
+					`;
+				} else if ( rule.key === 'paddingLeft' ) {
+					output += `
+					${ appendSelectors( selector, '> .alignfull' ) } {
+						margin-left: calc(${ rule.value } * -1);
+					}
+					`;
+				}
+			} );
+		}
+
+		// Output blockGap styles based on rules contained in layout definitions in theme.json.
+		if ( hasBlockGapSupport && blockGapValue ) {
+			output += getBlockGapCSS(
+				selector,
+				layoutDefinitions,
+				'constrained',
+				blockGapValue
+			);
+		}
+		return output;
+	},
+	getOrientation() {
+		return 'vertical';
+	},
+	getAlignments( layout ) {
+		const alignmentInfo = getAlignmentsInfo( layout );
+		if ( layout.alignments !== undefined ) {
+			if ( ! layout.alignments.includes( 'none' ) ) {
+				layout.alignments.unshift( 'none' );
+			}
+			return layout.alignments.map( ( alignment ) => ( {
+				name: alignment,
+				info: alignmentInfo[ alignment ],
+			} ) );
+		}
+		const { contentSize, wideSize } = layout;
+
+		const alignments = [
+			{ name: 'left' },
+			{ name: 'center' },
+			{ name: 'right' },
+		];
+
+		if ( contentSize ) {
+			alignments.unshift( { name: 'full' } );
+		}
+
+		if ( wideSize ) {
+			alignments.unshift( { name: 'wide', info: alignmentInfo.wide } );
+		}
+
+		alignments.unshift( { name: 'none', info: alignmentInfo.none } );
+
+		return alignments;
+	},
+};

package/src/layouts/flex.js

@@ -120,7 +120,7 @@ export default {
 		const blockGapValue =
 			style?.spacing?.blockGap &&
 			! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
-				? getGapCSSValue( style?.spacing?.blockGap )
+				? getGapCSSValue( style?.spacing?.blockGap, '0.5em' )
 				: undefined;
 		const justifyContent = justifyContentMap[ layout.justifyContent ];
 		const flexWrap = flexWrapOptions.includes( layout.flexWrap )

package/src/layouts/flow.js

@@ -1,121 +1,32 @@
 /**
  * WordPress dependencies
  */
-import {
-	Button,
-	__experimentalUseCustomUnits as useCustomUnits,
-	__experimentalUnitControl as UnitControl,
-} from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import useSetting from '../components/use-setting';
-import { appendSelectors, getBlockGapCSS } from './utils';
+
+import { getBlockGapCSS, getAlignmentsInfo } from './utils';
 import { getGapBoxControlValueFromStyle } from '../hooks/gap';
 import { shouldSkipSerialization } from '../hooks/utils';
 
 export default {
 	name: 'default',
 	label: __( 'Flow' ),
-	inspectorControls: function DefaultLayoutInspectorControls( {
-		layout,
-		onChange,
-	} ) {
-		const { wideSize, contentSize } = layout;
-		const units = useCustomUnits( {
-			availableUnits: useSetting( 'spacing.units' ) || [
-				'%',
-				'px',
-				'em',
-				'rem',
-				'vw',
-			],
-		} );
-
-		return (
-			<>
-				<div className="block-editor-hooks__layout-controls">
-					<div className="block-editor-hooks__layout-controls-unit">
-						<UnitControl
-							label={ __( 'Content' ) }
-							labelPosition="top"
-							__unstableInputWidth="80px"
-							value={ contentSize || wideSize || '' }
-							onChange={ ( nextWidth ) => {
-								nextWidth =
-									0 > parseFloat( nextWidth )
-										? '0'
-										: nextWidth;
-								onChange( {
-									...layout,
-									contentSize: nextWidth,
-								} );
-							} }
-							units={ units }
-						/>
-						<Icon icon={ positionCenter } />
-					</div>
-					<div className="block-editor-hooks__layout-controls-unit">
-						<UnitControl
-							label={ __( 'Wide' ) }
-							labelPosition="top"
-							__unstableInputWidth="80px"
-							value={ wideSize || contentSize || '' }
-							onChange={ ( nextWidth ) => {
-								nextWidth =
-									0 > parseFloat( nextWidth )
-										? '0'
-										: nextWidth;
-								onChange( {
-									...layout,
-									wideSize: nextWidth,
-								} );
-							} }
-							units={ units }
-						/>
-						<Icon icon={ stretchWide } />
-					</div>
-				</div>
-				<div className="block-editor-hooks__layout-controls-reset">
-					<Button
-						variant="secondary"
-						isSmall
-						disabled={ ! contentSize && ! wideSize }
-						onClick={ () =>
-							onChange( {
-								contentSize: undefined,
-								wideSize: undefined,
-								inherit: false,
-							} )
-						}
-					>
-						{ __( 'Reset' ) }
-					</Button>
-				</div>
-
-				<p className="block-editor-hooks__layout-controls-helptext">
-					{ __(
-						'Customize the width for all elements that are assigned to the center or wide columns.'
-					) }
-				</p>
-			</>
-		);
+	inspectorControls: function DefaultLayoutInspectorControls() {
+		return null;
 	},
 	toolBarControls: function DefaultLayoutToolbarControls() {
 		return null;
 	},
 	getLayoutStyle: function getLayoutStyle( {
 		selector,
-		layout = {},
 		style,
 		blockName,
 		hasBlockGapSupport,
 		layoutDefinitions,
 	} ) {
-		const { contentSize, wideSize } = layout;
 		const blockGapStyleValue = getGapBoxControlValueFromStyle(
 			style?.spacing?.blockGap
 		);
@@ -127,25 +38,7 @@ export default {
 				? blockGapStyleValue?.top
 				: '';
 
-		let output =
-			!! contentSize || !! wideSize
-				? `
-					${ appendSelectors(
-						selector,
-						'> :where(:not(.alignleft):not(.alignright))'
-					) } {
-						max-width: ${ contentSize ?? wideSize };
-						margin-left: auto !important;
-						margin-right: auto !important;
-					}
-					${ appendSelectors( selector, '> .alignwide' ) }  {
-						max-width: ${ wideSize ?? contentSize };
-					}
-					${ appendSelectors( selector, '> .alignfull' ) } {
-						max-width: none;
-					}
-				`
-				: '';
+		let output = '';
 
 		// Output blockGap styles based on rules contained in layout definitions in theme.json.
 		if ( hasBlockGapSupport && blockGapValue ) {
@@ -172,7 +65,6 @@ export default {
 				info: alignmentInfo[ alignment ],
 			} ) );
 		}
-		const { contentSize, wideSize } = layout;
 
 		const alignments = [
 			{ name: 'left' },
@@ -180,45 +72,8 @@ export default {
 			{ name: 'right' },
 		];
 
-		if ( contentSize ) {
-			alignments.unshift( { name: 'full' } );
-		}
-
-		if ( wideSize ) {
-			alignments.unshift( { name: 'wide', info: alignmentInfo.wide } );
-		}
-
 		alignments.unshift( { name: 'none', info: alignmentInfo.none } );
 
 		return alignments;
 	},
 };
-
-/**
- * Helper method to assign contextual info to clarify
- * alignment settings.
- *
- * Besides checking if `contentSize` and `wideSize` have a
- * value, we now show this information only if their values
- * are not a `css var`. This needs to change when parsing
- * css variables land.
- *
- * @see https://github.com/WordPress/gutenberg/pull/34710#issuecomment-918000752
- *
- * @param {Object} layout The layout object.
- * @return {Object} An object with contextual info per alignment.
- */
-function getAlignmentsInfo( layout ) {
-	const { contentSize, wideSize } = layout;
-	const alignmentInfo = {};
-	const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%)?$/i;
-	if ( sizeRegex.test( contentSize ) ) {
-		// translators: %s: container size (i.e. 600px etc)
-		alignmentInfo.none = sprintf( __( 'Max %s wide' ), contentSize );
-	}
-	if ( sizeRegex.test( wideSize ) ) {
-		// translators: %s: container size (i.e. 600px etc)
-		alignmentInfo.wide = sprintf( __( 'Max %s wide' ), wideSize );
-	}
-	return alignmentInfo;
-}

package/src/layouts/index.js

@@ -3,8 +3,9 @@
  */
 import flex from './flex';
 import flow from './flow';
+import constrained from './constrained';
 
-const layoutTypes = [ flow, flex ];
+const layoutTypes = [ flow, flex, constrained ];
 
 /**
  * Retrieves a layout type by name.

package/src/layouts/test/constrained.js

@@ -0,0 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import constrained from '../constrained';
+
+describe( 'getLayoutStyle', () => {
+	it( 'should return an empty string if no non-default params are provided', () => {
+		const expected = '';
+
+		const result = constrained.getLayoutStyle( {
+			selector: '.my-container',
+			layout: {},
+			style: {},
+			blockName: 'test-block',
+			hasBlockGapSupport: false,
+			layoutDefinitions: undefined,
+		} );
+
+		expect( result ).toBe( expected );
+	} );
+} );