@wordpress/block-editor 9.7.0 → 9.8.1-next.957ca95e4c.0

package/src/hooks/layout.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { has, kebabCase } from 'lodash';
+import { kebabCase } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -110,25 +110,37 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 
 	// 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.
+	// and either the default / flow or the constrained layout type is in use, as the toggle switches from one to the other.
 	const showInheritToggle = !! (
 		allowInheriting &&
 		!! defaultThemeLayout &&
-		( ! layout?.type || layout?.type === 'default' || layout?.inherit )
+		( ! layout?.type ||
+			layout?.type === 'default' ||
+			layout?.type === 'constrained' ||
+			layout?.inherit )
 	);
 
 	const usedLayout = layout || defaultBlockLayout || {};
-	const { inherit = false, type = 'default' } = usedLayout;
+	const {
+		inherit = false,
+		type = 'default',
+		contentSize = null,
+	} = usedLayout;
 	/**
-	 * `themeSupportsLayout` is only relevant to the `default/flow`
-	 * layout and it should not be taken into account when other
+	 * `themeSupportsLayout` is only relevant to the `default/flow` or
+	 * `constrained` layouts and it should not be taken into account when other
 	 * `layout` types are used.
 	 */
-	if ( type === 'default' && ! themeSupportsLayout ) {
+	if (
+		( type === 'default' || type === 'constrained' ) &&
+		! themeSupportsLayout
+	) {
 		return null;
 	}
 	const layoutType = getLayoutType( type );
 
+	const constrainedType = getLayoutType( 'constrained' );
+
 	const onChangeType = ( newType ) =>
 		setAttributes( { layout: { type: newType } } );
 	const onChangeLayout = ( newLayout ) =>
@@ -141,18 +153,29 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 					{ showInheritToggle && (
 						<>
 							<ToggleControl
-								label={ __( 'Inner blocks use full width' ) }
-								checked={ ! inherit }
+								label={ __(
+									'Inner blocks respect content width'
+								) }
+								checked={
+									layoutType?.name === 'constrained' ||
+									!! inherit ||
+									!! contentSize
+								}
 								onChange={ () =>
 									setAttributes( {
 										layout: {
-											inherit: ! inherit,
+											type:
+												layoutType?.name ===
+												'constrained'
+													? 'default'
+													: 'constrained',
 										},
 									} )
 								}
 							/>
 							<p className="block-editor-hooks__layout-controls-helptext">
-								{ !! inherit
+								{ !! inherit ||
+								layoutType?.name === 'constrained'
 									? __(
 											'Nested blocks use theme content width with options for full and wide widths.'
 									  )
@@ -170,13 +193,20 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 						/>
 					) }
 
-					{ ! inherit && layoutType && (
+					{ layoutType && layoutType.name !== 'default' && (
 						<layoutType.inspectorControls
 							layout={ usedLayout }
 							onChange={ onChangeLayout }
 							layoutBlockSupport={ layoutBlockSupport }
 						/>
 					) }
+					{ constrainedType && !! contentSize && (
+						<constrainedType.inspectorControls
+							layout={ usedLayout }
+							onChange={ onChangeLayout }
+							layoutBlockSupport={ layoutBlockSupport }
+						/>
+					) }
 				</PanelBody>
 			</InspectorControls>
 			{ ! inherit && layoutType && (
@@ -216,7 +246,7 @@ function LayoutTypeSwitcher( { type, onChange } ) {
  * @return {Object} Filtered block settings.
  */
 export function addAttribute( settings ) {
-	if ( has( settings.attributes, [ 'layout', 'type' ] ) ) {
+	if ( 'type' in ( settings.attributes?.layout ?? {} ) ) {
 		return settings;
 	}
 	if ( hasBlockSupport( settings, layoutBlockSupportKey ) ) {
@@ -280,9 +310,10 @@ export const withLayoutStyles = createHigherOrderComponent(
 		const { layout } = attributes;
 		const { default: defaultBlockLayout } =
 			getBlockSupport( name, layoutBlockSupportKey ) || {};
-		const usedLayout = layout?.inherit
-			? defaultThemeLayout
-			: layout || defaultBlockLayout || {};
+		const usedLayout =
+			layout?.inherit || layout?.contentSize || layout?.wideSize
+				? { ...layout, type: 'constrained' }
+				: layout || defaultBlockLayout || {};
 		const layoutClasses = hasLayoutBlockSupport
 			? useLayoutClasses( usedLayout, defaultThemeLayout?.definitions )
 			: null;

package/src/hooks/letter-spacing.js

@@ -46,6 +46,7 @@ export function LetterSpacingEdit( props ) {
 			value={ style?.typography?.letterSpacing }
 			onChange={ onChange }
 			__unstableInputWidth={ '100%' }
+			size="__unstable-large"
 		/>
 	);
 }

package/src/hooks/line-height.js

@@ -42,6 +42,7 @@ export function LineHeightEdit( props ) {
 			__nextHasNoMarginBottom={ true }
 			value={ style?.typography?.lineHeight }
 			onChange={ onChange }
+			size="__unstable-large"
 		/>
 	);
 }

package/src/hooks/lock.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { has } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -17,7 +12,7 @@ import { addFilter } from '@wordpress/hooks';
  */
 export function addAttribute( settings ) {
 	// Allow blocks to specify their own attribute definition with default values if needed.
-	if ( has( settings.attributes, [ 'lock', 'type' ] ) ) {
+	if ( 'type' in ( settings.attributes?.lock ?? {} ) ) {
 		return settings;
 	}
 	// Gracefully handle if settings.attributes is undefined.

package/src/hooks/margin.js

@@ -28,6 +28,8 @@ import {
 } from './dimensions';
 import { cleanEmptyObject } from './utils';
 import BlockPopover from '../components/block-popover';
+import SpacingSizesControl from '../components/spacing-sizes-control';
+import { getCustomValueFromPreset } from '../components/spacing-sizes-control/utils';
 
 /**
  * Determines if there is margin support.
@@ -101,6 +103,8 @@ export function MarginEdit( props ) {
 		setAttributes,
 	} = props;
 
+	const spacingSizes = useSetting( 'spacing.spacingSizes' );
+
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' ) || [
 			'%',
@@ -135,15 +139,28 @@ export function MarginEdit( props ) {
 	return Platform.select( {
 		web: (
 			<>
-				<BoxControl
-					values={ style?.spacing?.margin }
-					onChange={ onChange }
-					label={ __( 'Margin' ) }
-					sides={ sides }
-					units={ units }
-					allowReset={ false }
-					splitOnAxis={ splitOnAxis }
-				/>
+				{ ( ! spacingSizes || spacingSizes?.length === 0 ) && (
+					<BoxControl
+						values={ style?.spacing?.margin }
+						onChange={ onChange }
+						label={ __( 'Margin' ) }
+						sides={ sides }
+						units={ units }
+						allowReset={ false }
+						splitOnAxis={ splitOnAxis }
+					/>
+				) }
+				{ spacingSizes?.length > 0 && (
+					<SpacingSizesControl
+						values={ style?.spacing?.margin }
+						onChange={ onChange }
+						label={ __( 'Margin' ) }
+						sides={ sides }
+						units={ units }
+						allowReset={ false }
+						splitOnAxis={ false }
+					/>
+				) }
 			</>
 		),
 		native: null,
@@ -152,16 +169,31 @@ export function MarginEdit( props ) {
 
 export function MarginVisualizer( { clientId, attributes } ) {
 	const margin = attributes?.style?.spacing?.margin;
+	const spacingSizes = useSetting( 'spacing.spacingSizes' );
+
 	const style = useMemo( () => {
+		const marginTop = margin?.top
+			? getCustomValueFromPreset( margin?.top, spacingSizes )
+			: 0;
+		const marginRight = margin?.right
+			? getCustomValueFromPreset( margin?.right, spacingSizes )
+			: 0;
+		const marginBottom = margin?.bottom
+			? getCustomValueFromPreset( margin?.bottom, spacingSizes )
+			: 0;
+		const marginLeft = margin?.left
+			? getCustomValueFromPreset( margin?.left, spacingSizes )
+			: 0;
+
 		return {
-			borderTopWidth: margin?.top ?? 0,
-			borderRightWidth: margin?.right ?? 0,
-			borderBottomWidth: margin?.bottom ?? 0,
-			borderLeftWidth: margin?.left ?? 0,
-			top: margin?.top ? `-${ margin.top }` : 0,
-			right: margin?.right ? `-${ margin.right }` : 0,
-			bottom: margin?.bottom ? `-${ margin.bottom }` : 0,
-			left: margin?.left ? `-${ margin.left }` : 0,
+			borderTopWidth: marginTop,
+			borderRightWidth: marginRight,
+			borderBottomWidth: marginBottom,
+			borderLeftWidth: marginLeft,
+			top: marginTop !== 0 ? `-${ marginTop }` : 0,
+			right: marginRight !== 0 ? `-${ marginRight }` : 0,
+			bottom: marginBottom !== 0 ? `-${ marginBottom }` : 0,
+			left: marginLeft !== 0 ? `-${ marginLeft }` : 0,
 		};
 	}, [ margin ] );
 

package/src/hooks/padding.js

@@ -28,7 +28,11 @@ import {
 } from './dimensions';
 import { cleanEmptyObject } from './utils';
 import BlockPopover from '../components/block-popover';
-
+import SpacingSizesControl from '../components/spacing-sizes-control';
+import {
+	getSpacingPresetCssVar,
+	isValueSpacingPreset,
+} from '../components/spacing-sizes-control/utils';
 /**
  * Determines if there is padding support.
  *
@@ -101,6 +105,8 @@ export function PaddingEdit( props ) {
 		setAttributes,
 	} = props;
 
+	const spacingSizes = useSetting( 'spacing.spacingSizes' );
+
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' ) || [
 			'%',
@@ -135,15 +141,28 @@ export function PaddingEdit( props ) {
 	return Platform.select( {
 		web: (
 			<>
-				<BoxControl
-					values={ style?.spacing?.padding }
-					onChange={ onChange }
-					label={ __( 'Padding' ) }
-					sides={ sides }
-					units={ units }
-					allowReset={ false }
-					splitOnAxis={ splitOnAxis }
-				/>
+				{ ( ! spacingSizes || spacingSizes?.length === 0 ) && (
+					<BoxControl
+						values={ style?.spacing?.padding }
+						onChange={ onChange }
+						label={ __( 'Padding' ) }
+						sides={ sides }
+						units={ units }
+						allowReset={ false }
+						splitOnAxis={ splitOnAxis }
+					/>
+				) }
+				{ spacingSizes?.length > 0 && (
+					<SpacingSizesControl
+						values={ style?.spacing?.padding }
+						onChange={ onChange }
+						label={ __( 'Padding' ) }
+						sides={ sides }
+						units={ units }
+						allowReset={ false }
+						splitOnAxis={ splitOnAxis }
+					/>
+				) }
 			</>
 		),
 		native: null,
@@ -154,10 +173,18 @@ export function PaddingVisualizer( { clientId, attributes } ) {
 	const padding = attributes?.style?.spacing?.padding;
 	const style = useMemo( () => {
 		return {
-			borderTopWidth: padding?.top ?? 0,
-			borderRightWidth: padding?.right ?? 0,
-			borderBottomWidth: padding?.bottom ?? 0,
-			borderLeftWidth: padding?.left ?? 0,
+			borderTopWidth: isValueSpacingPreset( padding?.top )
+				? getSpacingPresetCssVar( padding?.top )
+				: padding?.top,
+			borderRightWidth: isValueSpacingPreset( padding?.right )
+				? getSpacingPresetCssVar( padding?.right )
+				: padding?.right,
+			borderBottomWidth: isValueSpacingPreset( padding?.bottom )
+				? getSpacingPresetCssVar( padding?.bottom )
+				: padding?.bottom,
+			borderLeftWidth: isValueSpacingPreset( padding?.left )
+				? getSpacingPresetCssVar( padding?.left )
+				: padding?.left,
 		};
 	}, [ padding ] );
 

package/src/hooks/style.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, has, omit } from 'lodash';
+import { omit } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -12,14 +12,10 @@ 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,
-	generate as generateStyles,
-} from '@wordpress/style-engine';
+import { getCSSRules, compileCSS } from '@wordpress/style-engine';
 
 /**
  * Internal dependencies
@@ -46,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
  *
@@ -68,43 +50,10 @@ 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 ) => {
-		if ( STYLE_PROPERTY[ propKey ].rootOnly ) {
-			return;
-		}
-		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;
 	} );
 
@@ -290,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
@@ -328,7 +277,7 @@ const withElementsStyles = createHigherOrderComponent(
 				for ( const [ elementName, elementStyles ] of Object.entries(
 					filteredElementsStyles
 				) ) {
-					const cssRule = generateStyles( elementStyles, {
+					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.

package/src/hooks/test/gap.js

@@ -62,5 +62,21 @@ describe( 'gap', () => {
 				'88px 1px'
 			);
 		} );
+
+		it( 'should unwrap var: values from a string into a CSS var() function', () => {
+			expect( getGapCSSValue( 'var:preset|spacing|60' ) ).toEqual(
+				'var(--wp--preset--spacing--60)'
+			);
+		} );
+
+		it( 'should unwrap var: values from an object into a CSS var() function and return shorthand values', () => {
+			const blockGapValue = {
+				top: 'var:preset|spacing|20',
+				left: 'var:preset|spacing|60',
+			};
+			expect( getGapCSSValue( blockGapValue ) ).toEqual(
+				'var(--wp--preset--spacing--20) var(--wp--preset--spacing--60)'
+			);
+		} );
 	} );
 } );

package/src/hooks/text-decoration.js

@@ -46,6 +46,7 @@ export function TextDecorationEdit( props ) {
 		<TextDecorationControl
 			value={ style?.typography?.textDecoration }
 			onChange={ onChange }
+			size="__unstable-large"
 		/>
 	);
 }

package/src/hooks/text-transform.js

@@ -46,6 +46,7 @@ export function TextTransformEdit( props ) {
 		<TextTransformControl
 			value={ style?.typography?.textTransform }
 			onChange={ onChange }
+			size="__unstable-large"
 		/>
 	);
 }

package/src/hooks/typography.scss

@@ -1,11 +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 {
-		margin-bottom: 0;
-	}
-
 	.single-column {
 		grid-column: span 1;
 	}