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

package/src/hooks/layout.js

@@ -8,6 +8,7 @@ import clsx from 'clsx';
  */
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
+import { useCallback } from '@wordpress/element';
 import {
 	getBlockSupport,
 	hasBlockSupport,
@@ -18,7 +19,7 @@ import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	ToggleControl,
-	PanelBody,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -32,16 +33,93 @@ import { useSettings } from '../components/use-settings';
 import { getLayoutType, getLayoutTypes } from '../layouts';
 import { useBlockEditingMode } from '../components/block-editing-mode';
 import { LAYOUT_DEFINITIONS } from '../layouts/definitions';
-import { useBlockSettings, useStyleOverride } from './utils';
+import { cleanEmptyObject, useBlockSettings, useStyleOverride } from './utils';
 import { unlock } from '../lock-unlock';
 import { globalStylesDataKey } from '../store/private-keys';
 import { getVariationNameFromClass } from './block-style-variation';
+import {
+	DEFAULT_BLOCK_STYLE_STATE,
+	getStyleForState,
+	hasPseudoBlockStyleState,
+	hasViewportBlockStyleState,
+	isDefaultBlockStyleState,
+	setStyleForState,
+} from './block-style-state';
 
 const VARIATION_PREFIX = 'is-style-';
 
 const layoutBlockSupportKey = 'layout';
+// Keep in sync with WP_Theme_JSON_Gutenberg::RESPONSIVE_BREAKPOINTS and
+// packages/global-styles-engine/src/core/render.tsx.
+const RESPONSIVE_BREAKPOINTS = {
+	mobile: '@media (width <= 480px)',
+	tablet: '@media (480px < width <= 782px)',
+};
+const CHILD_LAYOUT_KEYS = [
+	'selfStretch',
+	'flexSize',
+	'columnStart',
+	'columnSpan',
+	'rowStart',
+	'rowSpan',
+];
 const { kebabCase } = unlock( componentsPrivateApis );
 
+function getDefaultLayout( layoutBlockSupport = {}, blockVariation ) {
+	const defaultBlockLayout = layoutBlockSupport?.default;
+
+	return blockVariation?.attributes?.layout ?? defaultBlockLayout;
+}
+
+/**
+ * Returns the layout values to use when resetting layout controls.
+ *
+ * @param { Object }           layoutBlockSupport Block layout support settings.
+ * @param { Object|undefined } blockVariation     Block variation settings.
+ *
+ * @return { Object|undefined } Reset layout values.
+ */
+export function getResetLayout( layoutBlockSupport = {}, blockVariation ) {
+	return cleanEmptyObject( {
+		...getDefaultLayout( layoutBlockSupport, blockVariation ),
+	} );
+}
+
+function getLayoutStateOverrides(
+	layout = {},
+	baseLayout = {},
+	existingLayout = {}
+) {
+	const overrides = {};
+	const childLayoutValues = Object.fromEntries(
+		CHILD_LAYOUT_KEYS.filter( ( key ) =>
+			Object.hasOwn( existingLayout || {}, key )
+		).map( ( key ) => [ key, existingLayout[ key ] ] )
+	);
+
+	Object.entries( layout || {} ).forEach( ( [ key, value ] ) => {
+		if (
+			! CHILD_LAYOUT_KEYS.includes( key ) &&
+			value !== baseLayout?.[ key ]
+		) {
+			overrides[ key ] = value;
+		}
+	} );
+
+	return cleanEmptyObject( {
+		...childLayoutValues,
+		...overrides,
+	} );
+}
+
+function getLayoutContainerValues( layout = {} ) {
+	return Object.fromEntries(
+		Object.entries( layout || {} ).filter(
+			( [ key ] ) => ! CHILD_LAYOUT_KEYS.includes( key )
+		)
+	);
+}
+
 function hasLayoutBlockSupport( blockName ) {
 	return (
 		hasBlockSupport( blockName, 'layout' ) ||
@@ -148,8 +226,71 @@ export function useLayoutStyles( blockAttributes = {}, blockName, selector ) {
 	} );
 }
 
+/**
+ * Generates responsive layout CSS for viewport state styles.
+ *
+ * Viewport state blockGap values need to go through the layout definitions
+ * because flow/constrained layouts use child margins while flex/grid use gap.
+ *
+ * @param { Object }  options                     Options.
+ * @param { Object }  options.attributes          Block attributes.
+ * @param { string }  options.blockName           Block name.
+ * @param { string }  options.selector            CSS selector.
+ * @param { Object }  options.layout              Active block layout.
+ * @param { boolean } options.hasBlockGapSupport  Whether block gap is supported.
+ * @param { * }       options.globalBlockGapValue Global block gap fallback.
+ *
+ * @return { string } CSS rule.
+ */
+export function getResponsiveLayoutStyles( {
+	attributes = {},
+	blockName,
+	selector,
+	layout = {},
+	hasBlockGapSupport,
+	globalBlockGapValue,
+} ) {
+	return Object.entries( RESPONSIVE_BREAKPOINTS )
+		.map( ( [ viewport, mediaQuery ] ) => {
+			const viewportStyle = attributes?.style?.[ viewport ];
+			const viewportLayout = getLayoutContainerValues(
+				viewportStyle?.layout
+			);
+			const hasViewportLayout = Object.keys( viewportLayout ).length > 0;
+			const hasViewportBlockGap =
+				viewportStyle?.spacing &&
+				Object.hasOwn( viewportStyle.spacing, 'blockGap' );
+			const hasViewportPadding =
+				viewportStyle?.spacing &&
+				Object.hasOwn( viewportStyle.spacing, 'padding' );
+			if (
+				! hasViewportLayout &&
+				! hasViewportBlockGap &&
+				! hasViewportPadding
+			) {
+				return '';
+			}
+
+			const layoutType = getLayoutType( layout?.type || 'default' );
+			const viewportCSS = layoutType?.getLayoutStyle?.( {
+				blockName,
+				selector,
+				layout,
+				viewportOverrides: viewportLayout,
+				style: viewportStyle,
+				hasBlockGapSupport,
+				globalBlockGapValue,
+			} );
+
+			return viewportCSS ? `${ mediaQuery }{${ viewportCSS }}` : '';
+		} )
+		.filter( Boolean )
+		.join( '' );
+}
+
 function LayoutPanelPure( {
 	layout,
+	style,
 	setAttributes,
 	name: blockName,
 	clientId,
@@ -157,13 +298,81 @@ function LayoutPanelPure( {
 	const settings = useBlockSettings( blockName );
 	// Block settings come from theme.json under settings.[blockName].
 	const { layout: layoutSettings } = settings;
-	const { themeSupportsLayout } = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return {
-			themeSupportsLayout: getSettings().supportsLayout,
-		};
-	}, [] );
+	const { themeSupportsLayout, activeBlockVariation, selectedState } =
+		useSelect(
+			( select ) => {
+				const blockEditorSelect = select( blockEditorStore );
+				const { getBlockAttributes, getSettings } = blockEditorSelect;
+				const { getSelectedBlockStyleState } =
+					unlock( blockEditorSelect );
+				return {
+					activeBlockVariation: select(
+						blocksStore
+					).getActiveBlockVariation(
+						blockName,
+						getBlockAttributes( clientId ) || {},
+						'block'
+					),
+					themeSupportsLayout: getSettings().supportsLayout,
+					selectedState:
+						getSelectedBlockStyleState?.( clientId ) ??
+						DEFAULT_BLOCK_STYLE_STATE,
+				};
+			},
+			[ blockName, clientId ]
+		);
+
 	const blockEditingMode = useBlockEditingMode();
+	const isViewportLayoutState =
+		hasViewportBlockStyleState( selectedState ) &&
+		! hasPseudoBlockStyleState( selectedState );
+	const resetLayoutFilter = useCallback(
+		( ...resetArgs ) => {
+			const attributes = resetArgs[ 0 ] || {};
+			const context = resetArgs[ 1 ] || {};
+
+			if ( isViewportLayoutState ) {
+				const existingStateStyle =
+					getStyleForState(
+						attributes.style ?? style,
+						selectedState
+					) || {};
+				const nextStateStyle = cleanEmptyObject( {
+					...existingStateStyle,
+					layout: undefined,
+				} );
+
+				return {
+					style: setStyleForState(
+						attributes.style ?? style,
+						selectedState,
+						nextStateStyle
+					),
+				};
+			}
+
+			const resetBlockName = context.name || blockName;
+			const resetLayoutBlockSupport = getBlockSupport(
+				resetBlockName,
+				layoutBlockSupportKey,
+				{}
+			);
+
+			return {
+				layout: getResetLayout(
+					resetLayoutBlockSupport,
+					activeBlockVariation
+				),
+			};
+		},
+		[
+			blockName,
+			activeBlockVariation,
+			isViewportLayoutState,
+			selectedState,
+			style,
+		]
+	);
 
 	if ( blockEditingMode !== 'default' ) {
 		return null;
@@ -194,9 +403,23 @@ function LayoutPanelPure( {
 	 * Try to find the layout type from either the
 	 * block's layout settings or any saved layout config.
 	 */
+	const baseLayout = layout || defaultBlockLayout || {};
+	const stateStyle = isViewportLayoutState
+		? getStyleForState( style, selectedState )
+		: undefined;
+	const stateLayout = stateStyle?.layout;
+	const usedLayout = isViewportLayoutState
+		? cleanEmptyObject( {
+				...baseLayout,
+				...stateLayout,
+		  } ) || {}
+		: baseLayout;
+	const resetLayoutDefaults = isViewportLayoutState
+		? baseLayout
+		: getResetLayout( layoutBlockSupport, activeBlockVariation );
 	const blockSupportAndLayout = {
 		...layoutBlockSupport,
-		...layout,
+		...usedLayout,
 	};
 	const { type, default: { type: defaultType = 'default' } = {} } =
 		blockSupportAndLayout;
@@ -212,7 +435,6 @@ function LayoutPanelPure( {
 			blockSupportAndLayout.inherit )
 	);
 
-	const usedLayout = layout || defaultBlockLayout || {};
 	const { inherit = false, contentSize = null } = usedLayout;
 	/**
 	 * `themeSupportsLayout` is only relevant to the `default/flow` or
@@ -231,76 +453,117 @@ function LayoutPanelPure( {
 	const displayControlsForLegacyLayouts =
 		! usedLayout.type && ( contentSize || inherit );
 	const hasContentSizeOrLegacySettings = !! inherit || !! contentSize;
-
-	const onChangeType = ( newType ) =>
-		setAttributes( { layout: { type: newType } } );
-	const onChangeLayout = ( newLayout ) =>
-		setAttributes( { layout: newLayout } );
+	const showLayoutTypeSwitcher =
+		isDefaultBlockStyleState( selectedState ) &&
+		! inherit &&
+		allowSwitching;
+
+	const onChangeLayout = ( newLayout ) => {
+		if ( isViewportLayoutState ) {
+			const nextStateStyle = cleanEmptyObject( {
+				...stateStyle,
+				layout: getLayoutStateOverrides(
+					cleanEmptyObject( newLayout ),
+					baseLayout,
+					stateStyle?.layout
+				),
+			} );
+			setAttributes( {
+				style: setStyleForState( style, selectedState, nextStateStyle ),
+			} );
+			return;
+		}
+
+		setAttributes( { layout: cleanEmptyObject( newLayout ) } );
+	};
+	const onChangeType = ( newType ) => onChangeLayout( { type: newType } );
+	const resetLayout = () => onChangeLayout( resetLayoutDefaults );
+	const resetInheritToggle = () => onChangeLayout( { type: 'default' } );
+	const isUsingContentWidth = () =>
+		layoutType?.name === 'constrained' || hasContentSizeOrLegacySettings;
+	const hasInheritToggleValue = () =>
+		isViewportLayoutState
+			? ( usedLayout?.type ?? 'default' ) !==
+			  ( resetLayoutDefaults?.type ?? 'default' )
+			: layout?.type === 'constrained';
+	const hasLayoutTypeValue = () =>
+		( usedLayout?.type ?? 'default' ) !==
+		( resetLayoutDefaults?.type ?? 'default' );
 
 	return (
 		<>
-			<InspectorControls>
-				<PanelBody title={ __( 'Layout' ) }>
-					{ showInheritToggle && (
-						<>
-							<ToggleControl
-								label={ __( 'Inner blocks use content width' ) }
-								checked={
-									layoutType?.name === 'constrained' ||
-									hasContentSizeOrLegacySettings
-								}
-								onChange={ () =>
-									setAttributes( {
-										layout: {
-											type:
-												layoutType?.name ===
-													'constrained' ||
-												hasContentSizeOrLegacySettings
-													? 'default'
-													: 'constrained',
-										},
-									} )
-								}
-								help={
-									layoutType?.name === 'constrained' ||
-									hasContentSizeOrLegacySettings
-										? __(
-												'Nested blocks use content width with options for full and wide widths.'
-										  )
-										: __(
-												'Nested blocks will fill the width of this container.'
-										  )
-								}
-							/>
-						</>
-					) }
-
-					{ ! inherit && allowSwitching && (
+			<InspectorControls
+				group="layout"
+				resetAllFilter={ resetLayoutFilter }
+			>
+				{ showInheritToggle && (
+					<ToolsPanelItem
+						label={ __( 'Use content width' ) }
+						hasValue={ hasInheritToggleValue }
+						onDeselect={ resetInheritToggle }
+						isShownByDefault
+						panelId={ clientId }
+					>
+						<ToggleControl
+							label={ __( 'Inner blocks use content width' ) }
+							checked={ isUsingContentWidth() }
+							onChange={ () =>
+								onChangeLayout( {
+									type: isUsingContentWidth()
+										? 'default'
+										: 'constrained',
+								} )
+							}
+							help={
+								isUsingContentWidth()
+									? __(
+											'Nested blocks use content width with options for full and wide widths.'
+									  )
+									: __(
+											'Nested blocks will fill the width of this container.'
+									  )
+							}
+						/>
+					</ToolsPanelItem>
+				) }
+
+				{ showLayoutTypeSwitcher && (
+					<ToolsPanelItem
+						label={ __( 'Layout type' ) }
+						hasValue={ hasLayoutTypeValue }
+						onDeselect={ resetLayout }
+						isShownByDefault
+						panelId={ clientId }
+					>
 						<LayoutTypeSwitcher
 							type={ blockLayoutType }
 							onChange={ onChangeType }
 						/>
-					) }
-
-					{ layoutType && layoutType.name !== 'default' && (
-						<layoutType.inspectorControls
-							layout={ usedLayout }
-							onChange={ onChangeLayout }
-							layoutBlockSupport={ blockSupportAndThemeSettings }
-							name={ blockName }
-							clientId={ clientId }
-						/>
-					) }
-					{ constrainedType && displayControlsForLegacyLayouts && (
-						<constrainedType.inspectorControls
-							layout={ usedLayout }
-							onChange={ onChangeLayout }
-							layoutBlockSupport={ blockSupportAndThemeSettings }
-							name={ blockName }
-							clientId={ clientId }
-						/>
-					) }
-				</PanelBody>
+					</ToolsPanelItem>
+				) }
+
+				{ layoutType && layoutType.name !== 'default' && (
+					<layoutType.inspectorControls
+						layout={ usedLayout }
+						value={ layout }
+						onChange={ onChangeLayout }
+						layoutBlockSupport={ blockSupportAndThemeSettings }
+						resetLayout={ resetLayoutDefaults }
+						name={ blockName }
+						clientId={ clientId }
+					/>
+				) }
+				{ constrainedType && displayControlsForLegacyLayouts && (
+					<constrainedType.inspectorControls
+						layout={ usedLayout }
+						value={ layout }
+						onChange={ onChangeLayout }
+						layoutBlockSupport={ blockSupportAndThemeSettings }
+						resetLayout={ resetLayoutDefaults }
+						name={ blockName }
+						clientId={ clientId }
+					/>
+				) }
 			</InspectorControls>
 			{ ! inherit && layoutType && (
 				<layoutType.toolBarControls
@@ -318,7 +581,7 @@ function LayoutPanelPure( {
 export default {
 	shareWithChildBlocks: true,
 	edit: LayoutPanelPure,
-	attributeKeys: [ 'layout' ],
+	attributeKeys: [ 'layout', 'style' ],
 	hasSupport( name ) {
 		return hasLayoutBlockSupport( name );
 	},
@@ -396,7 +659,7 @@ function BlockWithLayoutStyles( {
 	// Get CSS string for the current layout type.
 	// The CSS and `style` element is only output if it is not empty.
 	const fullLayoutType = getLayoutType( usedLayout?.type || 'default' );
-	const css = fullLayoutType?.getLayoutStyle?.( {
+	const baseLayoutCSS = fullLayoutType?.getLayoutStyle?.( {
 		blockName: name,
 		selector,
 		layout: usedLayout,
@@ -404,6 +667,17 @@ function BlockWithLayoutStyles( {
 		hasBlockGapSupport,
 		globalBlockGapValue,
 	} );
+	const responsiveLayoutCSS = getResponsiveLayoutStyles( {
+		attributes,
+		blockName: name,
+		selector,
+		layout: usedLayout,
+		hasBlockGapSupport,
+		globalBlockGapValue,
+	} );
+	const css = [ baseLayoutCSS, responsiveLayoutCSS ]
+		.filter( Boolean )
+		.join( '' );
 
 	// Attach a `wp-container-` id-based class name as well as a layout class name such as `is-layout-flex`.
 	const layoutClassNames = clsx(

package/src/hooks/layout.scss

@@ -13,6 +13,12 @@
 	margin-bottom: 0; // Cancel out margins added by common.css
 }
 
+.layout-block-support-panel {
+	.block-editor-hooks__flex-layout-controls {
+		grid-column: 1 / -1;
+	}
+}
+
 .block-editor-hooks__flex-layout-justification-controls,
 .block-editor-hooks__flex-layout-orientation-controls {
 	margin-bottom: $grid-unit-15;

package/src/hooks/state-utils.js

@@ -0,0 +1,158 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockType } from '@wordpress/blocks';
+import { splitSelectorList } from '@wordpress/global-styles-engine';
+
+/**
+ * Given a block's `selectors.root` value, returns the part of the selector
+ * that is relative to the block wrapper — i.e., everything after the first
+ * compound selector segment.
+ *
+ * Examples:
+ *   ".wp-block-button .wp-block-button__link" → ".wp-block-button__link"
+ *   ".wp-block-foo > .inner"                 → "> .inner"
+ *   ".wp-block-foo"                          → null (no descendant)
+ *
+ * @param {string} rootSelector The block's `selectors.root` value.
+ * @return {string|null} Relative selector, or null if rootSelector targets the wrapper itself.
+ */
+export function getRelativeRootSelector( rootSelector ) {
+	// Match everything after the first compound selector (up to the first
+	// whitespace or combinator character).
+	// Require at least one combinator character (space, >, +, ~) between the
+	// first compound selector and the rest. Without this anchor, a greedy
+	// quantifier would backtrack into the first token and produce false matches.
+	const match = rootSelector.trim().match( /^[^ >+~]+[ >+~](.*)$/ );
+	if ( ! match ) {
+		return null;
+	}
+	const rest = match[ 1 ].trim();
+	return rest || null;
+}
+
+/**
+ * Builds a scoped selector from a block selector and optional suffix.
+ *
+ * If the block selector targets a descendant, the descendant portion is scoped
+ * under the provided base selector. Otherwise the base selector itself is used.
+ *
+ * @param {string} baseSelector  The block-instance scoping selector.
+ * @param {string} blockSelector The block or feature selector from block metadata.
+ * @param {string} suffix        Optional selector suffix, e.g. ":hover".
+ * @return {string} The scoped CSS selector.
+ */
+export function buildScopedBlockSelector(
+	baseSelector,
+	blockSelector,
+	suffix = ''
+) {
+	if ( typeof blockSelector !== 'string' || ! blockSelector ) {
+		return splitSelectorList( baseSelector )
+			.map( ( selector ) => `${ selector.trim() }${ suffix }` )
+			.join( ', ' );
+	}
+
+	const baseSelectors = splitSelectorList( baseSelector ).filter(
+		( selector ) => selector.trim()
+	);
+	const selectors = splitSelectorList( blockSelector ).filter( ( selector ) =>
+		selector.trim()
+	);
+
+	if ( ! selectors.length ) {
+		return baseSelectors
+			.map( ( selector ) => `${ selector.trim() }${ suffix }` )
+			.join( ', ' );
+	}
+
+	return selectors
+		.map( ( selector ) => {
+			selector = selector.trim();
+
+			/*
+			 * Replace only the leading block selector part (e.g. class name,
+			 * attribute selector, ID, or tag name) with the block instance selector.
+			 * Preserve anything after that prefix, including modifier classes on the
+			 * same element and combinators without spaces.
+			 */
+			const match = selector.match( /^([.#]?[-_a-zA-Z0-9]+|\[[^\]]+\])/ );
+			if ( match ) {
+				return baseSelectors
+					.map(
+						( base ) =>
+							`${ base.trim() }${ selector.slice(
+								match[ 0 ].length
+							) }${ suffix }`
+					)
+					.join( ', ' );
+			}
+
+			return baseSelectors
+				.map( ( base ) => `${ base.trim() }${ suffix }` )
+				.join( ', ' );
+		} )
+		.join( ', ' );
+}
+
+/**
+ * Builds the scoped selector for root block style state styles.
+ *
+ * Uses the block's `selectors.root` to determine which element should receive
+ * root-level state styles. If `selectors.root` describes a descendant element
+ * (e.g. `.wp-block-button .wp-block-button__link`), the relative portion is
+ * scoped under `baseSelector`. If no descendant is present, falls back to the
+ * base selector.
+ *
+ * @param {string} baseSelector The block-instance scoping class selector.
+ * @param {string} name         The block name, used to look up selectors.
+ * @return {string} The fully-scoped CSS selector for root state styles.
+ */
+export function buildRootStyleStateSelector( baseSelector, name ) {
+	const rootSelector = getBlockType( name )?.selectors?.root;
+	return buildScopedBlockSelector( baseSelector, rootSelector );
+}
+
+/**
+ * Builds the scoped CSS selector for a block state (e.g. :hover, :focus).
+ *
+ * Uses the block's `selectors.root` to determine which element the state
+ * pseudo-class should apply to. If `selectors.root` describes a descendant
+ * element (e.g. ".wp-block-button .wp-block-button__link"), the relative
+ * portion (".wp-block-button__link") is scoped under `baseSelector`. If no
+ * descendant is present, falls back to appending the state to `baseSelector`.
+ *
+ * @param {string} baseSelector The block-instance scoping class selector.
+ * @param {string} name         The block name, used to look up selectors.
+ * @param {string} state        The pseudo-class string, e.g. ":hover".
+ * @return {string} The fully-scoped CSS selector for this state.
+ */
+export function buildPseudoStyleStateSelector( baseSelector, name, state ) {
+	return `${ buildRootStyleStateSelector( baseSelector, name ) }${ state }`;
+}
+
+export function buildStateSelector( baseSelector, name, state ) {
+	const rootSelector = getBlockType( name )?.selectors?.root;
+	return buildScopedBlockSelector( baseSelector, rootSelector, state );
+}
+
+/**
+ * Builds the CSS selector used to preview a state on the editor canvas,
+ * scoped to a specific block instance via its `data-block` attribute.
+ *
+ * For blocks whose `selectors.root` targets a descendant element
+ * (e.g. ".wp-block-button .wp-block-button__link"), the selector targets
+ * that descendant inside the block wrapper. Otherwise it targets the wrapper
+ * itself.
+ *
+ * @param {string} clientId The block's clientId.
+ * @param {string} name     The block name, used to look up selectors.
+ * @return {string} CSS selector scoped to this block instance.
+ */
+export function buildCanvasStateSelector( clientId, name ) {
+	const rootSelector = getBlockType( name )?.selectors?.root;
+	return buildScopedBlockSelector(
+		`[data-block="${ clientId }"]`,
+		rootSelector
+	);
+}