@wordpress/block-editor 15.19.1-next.v.202605131032.0 → 15.20.0

package/src/layouts/constrained.js

@@ -7,7 +7,7 @@ import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
 	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
-	__experimentalVStack as VStack,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
@@ -27,7 +27,7 @@ import { useSettings } from '../components/use-settings';
 import { appendSelectors, getBlockGapCSS, getAlignmentsInfo } from './utils';
 import { getGapCSSValue } from '../hooks/gap';
 import { BlockControls, JustifyContentControl } from '../components';
-import { shouldSkipSerialization } from '../hooks/utils';
+import { cleanEmptyObject, shouldSkipSerialization } from '../hooks/utils';
 import { LAYOUT_DEFINITIONS } from './definitions';
 
 export default {
@@ -37,6 +37,8 @@ export default {
 		layout,
 		onChange,
 		layoutBlockSupport = {},
+		resetLayout = {},
+		clientId,
 	} ) {
 		const { wideSize, contentSize, justifyContent = 'center' } = layout;
 		const {
@@ -70,92 +72,143 @@ export default {
 		const units = useCustomUnits( {
 			availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],
 		} );
+		const hasLayoutValue = ( key, defaultValue ) =>
+			( layout?.[ key ] ?? defaultValue ) !==
+			( resetLayout?.[ key ] ?? defaultValue );
+		const resetContentSize = () =>
+			onChange(
+				cleanEmptyObject( {
+					...layout,
+					contentSize: resetLayout?.contentSize,
+				} )
+			);
+		const resetWideSize = () =>
+			onChange(
+				cleanEmptyObject( {
+					...layout,
+					wideSize: resetLayout?.wideSize,
+				} )
+			);
+		const resetJustification = () =>
+			onChange(
+				cleanEmptyObject( {
+					...layout,
+					justifyContent: resetLayout?.justifyContent,
+				} )
+			);
+		const hasContentSizeValue = () => hasLayoutValue( 'contentSize' );
+		const hasWideSizeValue = () => hasLayoutValue( 'wideSize' );
+		const hasJustificationValue = () =>
+			hasLayoutValue( 'justifyContent', 'center' );
+
 		return (
-			<VStack
-				spacing={ 4 }
-				className="block-editor-hooks__layout-constrained"
-			>
+			<>
 				{ allowCustomContentAndWideSize && (
 					<>
-						<UnitControl
-							__next40pxDefaultSize
+						<ToolsPanelItem
 							label={ __( 'Content width' ) }
-							labelPosition="top"
-							value={ contentSize || wideSize || '' }
-							onChange={ ( nextWidth ) => {
-								nextWidth =
-									0 > parseFloat( nextWidth )
-										? '0'
-										: nextWidth;
-								onChange( {
-									...layout,
-									contentSize:
-										nextWidth !== ''
-											? nextWidth
-											: undefined,
-								} );
-							} }
-							units={ units }
-							prefix={
-								<InputControlPrefixWrapper variant="icon">
-									<Icon icon={ alignNone } />
-								</InputControlPrefixWrapper>
-							}
-						/>
-						<UnitControl
-							__next40pxDefaultSize
+							hasValue={ hasContentSizeValue }
+							onDeselect={ resetContentSize }
+							panelId={ clientId }
+						>
+							<UnitControl
+								__next40pxDefaultSize
+								label={ __( 'Content width' ) }
+								labelPosition="top"
+								value={ contentSize || wideSize || '' }
+								onChange={ ( nextWidth ) => {
+									nextWidth =
+										0 > parseFloat( nextWidth )
+											? '0'
+											: nextWidth;
+									onChange(
+										cleanEmptyObject( {
+											...layout,
+											contentSize:
+												nextWidth !== ''
+													? nextWidth
+													: undefined,
+										} )
+									);
+								} }
+								units={ units }
+								prefix={
+									<InputControlPrefixWrapper variant="icon">
+										<Icon icon={ alignNone } />
+									</InputControlPrefixWrapper>
+								}
+							/>
+						</ToolsPanelItem>
+						<ToolsPanelItem
 							label={ __( 'Wide width' ) }
-							labelPosition="top"
-							value={ wideSize || contentSize || '' }
-							onChange={ ( nextWidth ) => {
-								nextWidth =
-									0 > parseFloat( nextWidth )
-										? '0'
-										: nextWidth;
-								onChange( {
-									...layout,
-									wideSize:
-										nextWidth !== ''
-											? nextWidth
-											: undefined,
-								} );
-							} }
-							units={ units }
-							prefix={
-								<InputControlPrefixWrapper variant="icon">
-									<Icon icon={ stretchWide } />
-								</InputControlPrefixWrapper>
-							}
-						/>
-						<p className="block-editor-hooks__layout-constrained-helptext">
-							{ __(
-								'Customize the width for all elements that are assigned to the center or wide columns.'
-							) }
-						</p>
+							hasValue={ hasWideSizeValue }
+							onDeselect={ resetWideSize }
+							panelId={ clientId }
+						>
+							<UnitControl
+								__next40pxDefaultSize
+								label={ __( 'Wide width' ) }
+								labelPosition="top"
+								value={ wideSize || contentSize || '' }
+								onChange={ ( nextWidth ) => {
+									nextWidth =
+										0 > parseFloat( nextWidth )
+											? '0'
+											: nextWidth;
+									onChange(
+										cleanEmptyObject( {
+											...layout,
+											wideSize:
+												nextWidth !== ''
+													? nextWidth
+													: undefined,
+										} )
+									);
+								} }
+								units={ units }
+								prefix={
+									<InputControlPrefixWrapper variant="icon">
+										<Icon icon={ stretchWide } />
+									</InputControlPrefixWrapper>
+								}
+							/>
+							<p className="block-editor-hooks__layout-constrained-helptext">
+								{ __(
+									'Customize the width for all elements that are assigned to the center or wide columns.'
+								) }
+							</p>
+						</ToolsPanelItem>
 					</>
 				) }
 				{ allowJustification && (
-					<ToggleGroupControl
-						__next40pxDefaultSize
+					<ToolsPanelItem
 						label={ __( 'Justification' ) }
-						value={ justifyContent }
-						onChange={ onJustificationChange }
+						hasValue={ hasJustificationValue }
+						onDeselect={ resetJustification }
+						panelId={ clientId }
 					>
-						{ justificationOptions.map(
-							( { value, icon, label } ) => {
-								return (
-									<ToggleGroupControlOptionIcon
-										key={ value }
-										value={ value }
-										icon={ icon }
-										label={ label }
-									/>
-								);
-							}
-						) }
-					</ToggleGroupControl>
+						<ToggleGroupControl
+							__next40pxDefaultSize
+							label={ __( 'Justification' ) }
+							value={ justifyContent }
+							onChange={ onJustificationChange }
+						>
+							{ justificationOptions.map(
+								( { value, icon, label } ) => {
+									return (
+										<ToggleGroupControlOptionIcon
+											key={ value }
+											value={ value }
+											icon={ icon }
+											label={ label }
+										/>
+									);
+								}
+							) }
+						</ToggleGroupControl>
+					</ToolsPanelItem>
 				) }
-			</VStack>
+			</>
 		);
 	},
 	toolBarControls: function DefaultLayoutToolbarControls( {
@@ -180,13 +233,26 @@ export default {
 	getLayoutStyle: function getLayoutStyle( {
 		selector,
 		layout = {},
+		viewportOverrides,
 		style,
 		blockName,
 		hasBlockGapSupport,
 		layoutDefinitions = LAYOUT_DEFINITIONS,
 	} ) {
-		const { contentSize, wideSize, justifyContent } = layout;
+		const hasViewportOverrides = viewportOverrides !== undefined;
+		const effectiveLayout = hasViewportOverrides
+			? { ...layout, ...viewportOverrides }
+			: layout;
+		const hasViewportOverride = ( key ) =>
+			Object.hasOwn( viewportOverrides || {}, key );
+		const { contentSize, wideSize, justifyContent } = effectiveLayout;
 		const blockGapStyleValue = getGapCSSValue( style?.spacing?.blockGap );
+		const hasBlockGapOverride =
+			! hasViewportOverrides ||
+			Object.hasOwn( style?.spacing || {}, 'blockGap' );
+		const hasBlockSpacingOverride =
+			! hasViewportOverrides ||
+			Object.hasOwn( style?.spacing || {}, 'padding' );
 
 		// If a block's block.json skips serialization for spacing or
 		// spacing.blockGap, don't apply the user-defined value to the styles.
@@ -205,16 +271,29 @@ export default {
 		const marginRight =
 			justifyContent === 'right' ? '0 !important' : 'auto !important';
 
+		const hasJustificationOverride =
+			hasViewportOverrides && hasViewportOverride( 'justifyContent' );
+		const shouldOutputConstrainedSizes =
+			! hasViewportOverrides ||
+			hasViewportOverride( 'contentSize' ) ||
+			hasViewportOverride( 'wideSize' );
+		const constrainedSizeDeclarations = [
+			`max-width: ${ contentSize ?? wideSize }`,
+		];
+		if ( ! hasViewportOverrides || hasJustificationOverride ) {
+			constrainedSizeDeclarations.push(
+				`margin-left: ${ marginLeft }`,
+				`margin-right: ${ marginRight }`
+			);
+		}
 		let output =
-			!! contentSize || !! wideSize
+			shouldOutputConstrainedSizes && ( !! contentSize || !! wideSize )
 				? `
-					${ appendSelectors(
-						selector,
-						'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'
-					) } {
-						max-width: ${ contentSize ?? wideSize };
-						margin-left: ${ marginLeft };
-						margin-right: ${ marginRight };
+						${ appendSelectors(
+							selector,
+							'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'
+						) } {
+						${ constrainedSizeDeclarations.join( '; ' ) };
 					}
 					${ appendSelectors( selector, '> .alignwide' ) }  {
 						max-width: ${ wideSize ?? contentSize };
@@ -222,25 +301,33 @@ export default {
 					${ appendSelectors( selector, '> .alignfull' ) } {
 						max-width: none;
 					}
-				`
+					`
 				: '';
 
-		if ( justifyContent === 'left' ) {
+		if ( hasJustificationOverride && ! shouldOutputConstrainedSizes ) {
 			output += `${ appendSelectors(
 				selector,
 				'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'
 			) }
+				{ margin-left: ${ marginLeft }; margin-right: ${ marginRight }; }`;
+		} else if ( ! hasViewportOverrides ) {
+			if ( justifyContent === 'left' ) {
+				output += `${ appendSelectors(
+					selector,
+					'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'
+				) }
 			{ margin-left: ${ marginLeft }; }`;
-		} else if ( justifyContent === 'right' ) {
-			output += `${ appendSelectors(
-				selector,
-				'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'
-			) }
+			} else if ( justifyContent === 'right' ) {
+				output += `${ appendSelectors(
+					selector,
+					'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'
+				) }
 			{ margin-right: ${ marginRight }; }`;
+			}
 		}
 
 		// If there is custom padding, add negative margins for alignfull blocks.
-		if ( style?.spacing?.padding ) {
+		if ( hasBlockSpacingOverride && 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 ) => {
@@ -269,7 +356,7 @@ export default {
 		}
 
 		// Output blockGap styles based on rules contained in layout definitions in theme.json.
-		if ( hasBlockGapSupport && blockGapValue ) {
+		if ( hasBlockGapSupport && hasBlockGapOverride && blockGapValue ) {
 			output += getBlockGapCSS(
 				selector,
 				layoutDefinitions,

package/src/layouts/flex.js

@@ -12,11 +12,11 @@ import {
 	arrowDown,
 } from '@wordpress/icons';
 import {
-	ToggleControl,
 	Flex,
-	FlexItem,
+	ToggleControl,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 
 /**
@@ -30,7 +30,7 @@ import {
 	JustifyContentControl,
 	BlockVerticalAlignmentControl,
 } from '../components';
-import { shouldSkipSerialization } from '../hooks/utils';
+import { cleanEmptyObject, shouldSkipSerialization } from '../hooks/utils';
 import { LAYOUT_DEFINITIONS } from './definitions';
 
 // Used with the default, horizontal flex orientation.
@@ -71,34 +71,110 @@ export default {
 		layout = {},
 		onChange,
 		layoutBlockSupport = {},
+		resetLayout = {},
+		clientId,
 	} ) {
 		const {
 			allowOrientation = true,
 			allowJustification = true,
 			allowWrap = true,
 		} = layoutBlockSupport;
+		const hasLayoutValue = ( key, defaultValue ) =>
+			( layout?.[ key ] ?? defaultValue ) !==
+			( resetLayout?.[ key ] ?? defaultValue );
+		const hasJustificationValue = () =>
+			hasLayoutValue( 'justifyContent', 'left' );
+		const hasOrientationValue = () =>
+			hasLayoutValue( 'orientation', 'horizontal' );
+		const hasWrapValue = () => hasLayoutValue( 'flexWrap', 'wrap' );
+		const resetJustification = () =>
+			onChange(
+				cleanEmptyObject( {
+					...layout,
+					justifyContent: resetLayout?.justifyContent,
+				} )
+			);
+		const resetOrientation = () => {
+			const { verticalAlignment, justifyContent } = layout;
+			const nextOrientation = resetLayout?.orientation;
+			const isHorizontal =
+				! nextOrientation || nextOrientation === 'horizontal';
+			onChange(
+				cleanEmptyObject( {
+					...layout,
+					orientation: nextOrientation,
+					verticalAlignment:
+						resetLayout?.verticalAlignment ??
+						( isHorizontal && verticalAlignment === 'space-between'
+							? 'center'
+							: verticalAlignment ),
+					justifyContent:
+						resetLayout?.justifyContent ??
+						( isHorizontal && justifyContent === 'stretch'
+							? 'left'
+							: justifyContent ),
+				} )
+			);
+		};
+		const resetWrap = () =>
+			onChange(
+				cleanEmptyObject( {
+					...layout,
+					flexWrap: resetLayout?.flexWrap,
+				} )
+			);
+
 		return (
 			<>
-				<Flex>
-					{ allowJustification && (
-						<FlexItem>
-							<FlexLayoutJustifyContentControl
-								layout={ layout }
-								onChange={ onChange }
-							/>
-						</FlexItem>
-					) }
-					{ allowOrientation && (
-						<FlexItem>
-							<OrientationControl
-								layout={ layout }
-								onChange={ onChange }
-							/>
-						</FlexItem>
-					) }
-				</Flex>
+				{ ( allowJustification || allowOrientation ) && (
+					<Flex
+						align="flex-start"
+						className="block-editor-hooks__flex-layout-controls"
+						gap={ 4 }
+						justify="flex-start"
+					>
+						{ allowJustification && (
+							<ToolsPanelItem
+								label={ __( 'Justification' ) }
+								hasValue={ hasJustificationValue }
+								onDeselect={ resetJustification }
+								isShownByDefault
+								panelId={ clientId }
+							>
+								<FlexLayoutJustifyContentControl
+									layout={ layout }
+									onChange={ onChange }
+								/>
+							</ToolsPanelItem>
+						) }
+						{ allowOrientation && (
+							<ToolsPanelItem
+								label={ __( 'Orientation' ) }
+								hasValue={ hasOrientationValue }
+								onDeselect={ resetOrientation }
+								isShownByDefault
+								panelId={ clientId }
+							>
+								<OrientationControl
+									layout={ layout }
+									onChange={ onChange }
+								/>
+							</ToolsPanelItem>
+						) }
+					</Flex>
+				) }
 				{ allowWrap && (
-					<FlexWrapControl layout={ layout } onChange={ onChange } />
+					<ToolsPanelItem
+						label={ __( 'Wrapping' ) }
+						hasValue={ hasWrapValue }
+						onDeselect={ resetWrap }
+						panelId={ clientId }
+					>
+						<FlexWrapControl
+							layout={ layout }
+							onChange={ onChange }
+						/>
+					</ToolsPanelItem>
 				) }
 			</>
 		);
@@ -135,14 +211,21 @@ export default {
 	},
 	getLayoutStyle: function getLayoutStyle( {
 		selector,
-		layout,
+		layout = {},
+		viewportOverrides,
 		style,
 		blockName,
 		hasBlockGapSupport,
 		globalBlockGapValue,
 		layoutDefinitions = LAYOUT_DEFINITIONS,
 	} ) {
-		const { orientation = 'horizontal' } = layout;
+		const hasViewportOverrides = viewportOverrides !== undefined;
+		const effectiveLayout = hasViewportOverrides
+			? { ...layout, ...viewportOverrides }
+			: layout;
+		const hasViewportOverride = ( key ) =>
+			Object.hasOwn( viewportOverrides || {}, key );
+		const { orientation = 'horizontal' } = effectiveLayout;
 
 		// Determine the fallback gap value using global styles (theme.json),
 		// falling back to '0.5em' for backwards compatibility.
@@ -163,35 +246,57 @@ export default {
 			! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
 				? getGapCSSValue( style?.spacing?.blockGap, fallbackGapValue )
 				: undefined;
-		const justifyContent = justifyContentMap[ layout.justifyContent ];
-		const flexWrap = flexWrapOptions.includes( layout.flexWrap )
-			? layout.flexWrap
+		const hasBlockGapOverride =
+			! hasViewportOverrides ||
+			Object.hasOwn( style?.spacing || {}, 'blockGap' );
+		const justifyContent =
+			justifyContentMap[ effectiveLayout.justifyContent ];
+		const flexWrap = flexWrapOptions.includes( effectiveLayout.flexWrap )
+			? effectiveLayout.flexWrap
 			: 'wrap';
 		const verticalAlignment =
-			verticalAlignmentMap[ layout.verticalAlignment ];
+			verticalAlignmentMap[ effectiveLayout.verticalAlignment ];
 		const alignItems =
-			alignItemsMap[ layout.justifyContent ] || alignItemsMap.left;
+			alignItemsMap[ effectiveLayout.justifyContent ] ||
+			alignItemsMap.left;
 
 		let output = '';
 		const rules = [];
 
-		if ( flexWrap && flexWrap !== 'wrap' ) {
+		const shouldOutputFlexWrap =
+			! hasViewportOverrides || hasViewportOverride( 'flexWrap' );
+		const shouldOutputFlexOrientation =
+			! hasViewportOverrides || hasViewportOverride( 'orientation' );
+		const shouldOutputFlexJustification =
+			! hasViewportOverrides ||
+			hasViewportOverride( 'justifyContent' ) ||
+			hasViewportOverride( 'orientation' );
+		const shouldOutputFlexAlignment =
+			! hasViewportOverrides ||
+			hasViewportOverride( 'verticalAlignment' ) ||
+			hasViewportOverride( 'orientation' );
+
+		if ( shouldOutputFlexWrap && flexWrap && flexWrap !== 'wrap' ) {
 			rules.push( `flex-wrap: ${ flexWrap }` );
 		}
 
 		if ( orientation === 'horizontal' ) {
-			if ( verticalAlignment ) {
+			if ( shouldOutputFlexAlignment && verticalAlignment ) {
 				rules.push( `align-items: ${ verticalAlignment }` );
 			}
-			if ( justifyContent ) {
+			if ( shouldOutputFlexJustification && justifyContent ) {
 				rules.push( `justify-content: ${ justifyContent }` );
 			}
 		} else {
-			if ( verticalAlignment ) {
+			if ( shouldOutputFlexAlignment && verticalAlignment ) {
 				rules.push( `justify-content: ${ verticalAlignment }` );
 			}
-			rules.push( 'flex-direction: column' );
-			rules.push( `align-items: ${ alignItems }` );
+			if ( shouldOutputFlexOrientation ) {
+				rules.push( 'flex-direction: column' );
+			}
+			if ( shouldOutputFlexJustification ) {
+				rules.push( `align-items: ${ alignItems }` );
+			}
 		}
 
 		if ( rules.length ) {
@@ -201,7 +306,7 @@ export default {
 		}
 
 		// Output blockGap styles based on rules contained in layout definitions in theme.json.
-		if ( hasBlockGapSupport && blockGapValue ) {
+		if ( hasBlockGapSupport && hasBlockGapOverride && blockGapValue ) {
 			output += getBlockGapCSS(
 				selector,
 				layoutDefinitions,