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

package/src/layouts/grid.js

@@ -13,7 +13,7 @@ import {
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalUnitControl as UnitControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
-	__experimentalVStack as VStack,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 
@@ -23,7 +23,7 @@ import { useState } from '@wordpress/element';
 import { appendSelectors, getBlockGapCSS } from './utils';
 import { getGapCSSValue, getGapBoxControlValueFromStyle } from '../hooks/gap';
 import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
-import { shouldSkipSerialization } from '../hooks/utils';
+import { cleanEmptyObject, shouldSkipSerialization } from '../hooks/utils';
 import { LAYOUT_DEFINITIONS } from './definitions';
 
 const RANGE_CONTROL_MAX_VALUES = {
@@ -70,6 +70,8 @@ export default {
 		layout = {},
 		onChange,
 		layoutBlockSupport = {},
+		resetLayout = {},
+		clientId,
 	} ) {
 		const { allowSizingOnChildren = false } = layoutBlockSupport;
 
@@ -79,29 +81,87 @@ export default {
 		const showMinWidthControl =
 			! layout?.isManualPlacement ||
 			window.__experimentalEnableGridInteractivity;
+		const defaultColumnCount = layout.isManualPlacement ? 3 : undefined;
+		const hasLayoutValue = ( key, defaultValue ) =>
+			( layout?.[ key ] ?? defaultValue ) !==
+			( resetLayout?.[ key ] ?? defaultValue );
+		const hasGridTypeValue = () =>
+			hasLayoutValue( 'isManualPlacement', false );
+		const hasColumnsAndRowsValue = () =>
+			hasLayoutValue( 'columnCount', defaultColumnCount ) ||
+			hasLayoutValue( 'rowCount' );
+		const hasMinimumColumnWidthValue = () =>
+			hasLayoutValue( 'minimumColumnWidth' );
+		const resetGridType = () =>
+			onChange(
+				cleanEmptyObject( {
+					...layout,
+					isManualPlacement: resetLayout?.isManualPlacement,
+					rowCount: resetLayout?.rowCount,
+					minimumColumnWidth: resetLayout?.minimumColumnWidth,
+				} )
+			);
+		const resetColumnsAndRows = () =>
+			onChange(
+				cleanEmptyObject( {
+					...layout,
+					columnCount: resetLayout?.columnCount ?? defaultColumnCount,
+					rowCount: resetLayout?.rowCount,
+				} )
+			);
+		const resetMinimumColumnWidth = () =>
+			onChange(
+				cleanEmptyObject( {
+					...layout,
+					minimumColumnWidth: resetLayout?.minimumColumnWidth,
+				} )
+			);
+
 		return (
 			<>
 				{ window.__experimentalEnableGridInteractivity && (
-					<GridLayoutTypeControl
-						layout={ layout }
-						onChange={ onChange }
-					/>
+					<ToolsPanelItem
+						label={ __( 'Grid item position' ) }
+						hasValue={ hasGridTypeValue }
+						onDeselect={ resetGridType }
+						isShownByDefault
+						panelId={ clientId }
+					>
+						<GridLayoutTypeControl
+							layout={ layout }
+							onChange={ onChange }
+						/>
+					</ToolsPanelItem>
 				) }
-				<VStack spacing={ 4 }>
-					{ showColumnsControl && (
+				{ showColumnsControl && (
+					<ToolsPanelItem
+						label={ __( 'Columns and rows' ) }
+						hasValue={ hasColumnsAndRowsValue }
+						onDeselect={ resetColumnsAndRows }
+						isShownByDefault
+						panelId={ clientId }
+					>
 						<GridLayoutColumnsAndRowsControl
 							layout={ layout }
 							onChange={ onChange }
 							allowSizingOnChildren={ allowSizingOnChildren }
 						/>
-					) }
-					{ showMinWidthControl && (
+					</ToolsPanelItem>
+				) }
+				{ showMinWidthControl && (
+					<ToolsPanelItem
+						label={ __( 'Min. column width' ) }
+						hasValue={ hasMinimumColumnWidthValue }
+						onDeselect={ resetMinimumColumnWidth }
+						isShownByDefault
+						panelId={ clientId }
+					>
 						<GridLayoutMinimumWidthControl
 							layout={ layout }
 							onChange={ onChange }
 						/>
-					) }
-				</VStack>
+					</ToolsPanelItem>
+				) }
 			</>
 		);
 	},
@@ -110,18 +170,25 @@ export default {
 	},
 	getLayoutStyle: function getLayoutStyle( {
 		selector,
-		layout,
+		layout = {},
+		viewportOverrides,
 		style,
 		blockName,
 		hasBlockGapSupport,
 		globalBlockGapValue,
 		layoutDefinitions = LAYOUT_DEFINITIONS,
 	} ) {
+		const hasViewportOverrides = viewportOverrides !== undefined;
+		const effectiveLayout = hasViewportOverrides
+			? { ...layout, ...viewportOverrides }
+			: layout;
+		const hasViewportOverride = ( key ) =>
+			Object.hasOwn( viewportOverrides || {}, key );
 		const {
 			minimumColumnWidth = null,
 			columnCount = null,
 			rowCount = null,
-		} = layout;
+		} = effectiveLayout;
 
 		// Check that the grid layout attributes are of the correct type, so that we don't accidentally
 		// write code that stores a string attribute instead of a number.
@@ -159,11 +226,27 @@ export default {
 			! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
 				? getGapCSSValue( style?.spacing?.blockGap, fallbackGapValue )
 				: undefined;
+		const hasBlockGapOverride =
+			! hasViewportOverrides ||
+			Object.hasOwn( style?.spacing || {}, 'blockGap' );
 
 		let output = '';
 		const rules = [];
+		const shouldOutputGridColumns =
+			! hasViewportOverrides ||
+			hasViewportOverride( 'minimumColumnWidth' ) ||
+			hasViewportOverride( 'columnCount' ) ||
+			( hasBlockGapOverride && minimumColumnWidth && columnCount > 0 );
+		const shouldOutputGridRows =
+			( ! hasViewportOverrides || hasViewportOverride( 'rowCount' ) ) &&
+			columnCount &&
+			rowCount;
 
-		if ( minimumColumnWidth && columnCount > 0 ) {
+		if (
+			shouldOutputGridColumns &&
+			minimumColumnWidth &&
+			columnCount > 0
+		) {
 			let blockGapToUse = blockGapValue || fallbackGapValue;
 			// Ensure 0 values have a unit so they work in calc().
 			if ( blockGapToUse === '0' || blockGapToUse === 0 ) {
@@ -173,29 +256,36 @@ export default {
 				columnCount - 1
 			}) ) / ${ columnCount })`;
 			rules.push(
-				`grid-template-columns: repeat(auto-fill, minmax(${ maxValue }, 1fr))`,
-				`container-type: inline-size`
+				`grid-template-columns: repeat(auto-fill, minmax(${ maxValue }, 1fr))`
 			);
-			if ( rowCount ) {
-				rules.push(
-					`grid-template-rows: repeat(${ rowCount }, minmax(1rem, auto))`
-				);
-			}
-		} else if ( columnCount ) {
+		} else if ( shouldOutputGridColumns && columnCount ) {
 			rules.push(
 				`grid-template-columns: repeat(${ columnCount }, minmax(0, 1fr))`
 			);
-			if ( rowCount ) {
-				rules.push(
-					`grid-template-rows: repeat(${ rowCount }, minmax(1rem, auto))`
-				);
-			}
-		} else {
+		} else if ( shouldOutputGridColumns ) {
 			rules.push(
 				`grid-template-columns: repeat(auto-fill, minmax(min(${
 					minimumColumnWidth || '12rem'
-				}, 100%), 1fr))`,
-				'container-type: inline-size'
+				}, 100%), 1fr))`
+			);
+		}
+
+		if ( shouldOutputGridColumns ) {
+			const baseHasContainerType =
+				! layout?.columnCount ||
+				( layout?.columnCount && layout?.minimumColumnWidth );
+			const needsContainerType = ! columnCount || minimumColumnWidth;
+			if (
+				needsContainerType &&
+				( ! hasViewportOverrides || ! baseHasContainerType )
+			) {
+				rules.push( 'container-type: inline-size' );
+			}
+		}
+
+		if ( shouldOutputGridRows ) {
+			rules.push(
+				`grid-template-rows: repeat(${ rowCount }, minmax(1rem, auto))`
 			);
 		}
 
@@ -206,7 +296,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/test/flex.js

@@ -2,6 +2,12 @@
  * External dependencies
  */
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -9,6 +15,20 @@ import { render, screen } from '@testing-library/react';
 import flex from '../flex';
 
 const FlexLayoutInspectorControls = flex.inspectorControls;
+const PANEL_ID = 'test-panel';
+
+function renderInspectorControls( props = {} ) {
+	return render(
+		<ToolsPanel label="Layout" resetAll={ jest.fn() } panelId={ PANEL_ID }>
+			<FlexLayoutInspectorControls
+				clientId={ PANEL_ID }
+				layout={ {} }
+				onChange={ jest.fn() }
+				{ ...props }
+			/>
+		</ToolsPanel>
+	);
+}
 
 describe( 'getLayoutStyle', () => {
 	it( 'should return an empty string if no non-default params are provided', () => {
@@ -28,10 +48,20 @@ describe( 'getLayoutStyle', () => {
 } );
 
 describe( 'FlexLayoutInspectorControls', () => {
-	it( 'should render the wrap toggle by default', () => {
-		render(
-			<FlexLayoutInspectorControls layout={ {} } onChange={ jest.fn() } />
-		);
+	it( 'should not render the wrap toggle by default', () => {
+		renderInspectorControls();
+
+		expect(
+			screen.queryByRole( 'checkbox', {
+				name: 'Allow to wrap to multiple lines',
+			} )
+		).not.toBeInTheDocument();
+	} );
+
+	it( 'should render the wrap toggle when it has a value', () => {
+		renderInspectorControls( {
+			layout: { flexWrap: 'nowrap' },
+		} );
 
 		expect(
 			screen.getByRole( 'checkbox', {
@@ -40,13 +70,19 @@ describe( 'FlexLayoutInspectorControls', () => {
 		).toBeInTheDocument();
 	} );
 
-	it( 'should render the wrap toggle when allowWrap is true', () => {
-		render(
-			<FlexLayoutInspectorControls
-				layout={ {} }
-				onChange={ jest.fn() }
-				layoutBlockSupport={ { allowWrap: true } }
-			/>
+	it( 'should allow the wrap toggle to be selected from the tools panel menu', async () => {
+		const user = userEvent.setup();
+		renderInspectorControls( {
+			layoutBlockSupport: { allowWrap: true },
+		} );
+
+		await user.click(
+			screen.getByRole( 'button', { name: /Layout options/i } )
+		);
+		await user.click(
+			screen.getByRole( 'menuitemcheckbox', {
+				name: 'Show Wrapping',
+			} )
 		);
 
 		expect(
@@ -56,18 +92,19 @@ describe( 'FlexLayoutInspectorControls', () => {
 		).toBeInTheDocument();
 	} );
 
-	it( 'should not render the wrap toggle when allowWrap is false', () => {
-		render(
-			<FlexLayoutInspectorControls
-				layout={ {} }
-				onChange={ jest.fn() }
-				layoutBlockSupport={ { allowWrap: false } }
-			/>
+	it( 'should not include the wrap toggle in the tools panel menu when allowWrap is false', async () => {
+		const user = userEvent.setup();
+		renderInspectorControls( {
+			layoutBlockSupport: { allowWrap: false },
+		} );
+
+		await user.click(
+			screen.getByRole( 'button', { name: /Layout options/i } )
 		);
 
 		expect(
-			screen.queryByRole( 'checkbox', {
-				name: 'Allow to wrap to multiple lines',
+			screen.queryByRole( 'menuitemcheckbox', {
+				name: 'Show Wrapping',
 			} )
 		).not.toBeInTheDocument();
 	} );

package/src/private-apis.js

@@ -40,12 +40,14 @@ import { useFlashEditableBlocks } from './components/use-flash-editable-blocks';
 import {
 	selectBlockPatternsKey,
 	reusableBlocksSelectKey,
+	userPatternCategoriesSelectKey,
 	globalStylesDataKey,
 	globalStylesLinksDataKey,
 	sectionRootClientIdKey,
 	mediaEditKey,
 	getMediaSelectKey,
 	deviceTypeKey,
+	onViewportStateChangeKey,
 	isIsolatedEditorKey,
 	isNavigationOverlayContextKey,
 	isNavigationPostEditorKey,
@@ -118,6 +120,7 @@ lock( privateApis, {
 	PrivateRichText,
 	PrivateInserterLibrary,
 	reusableBlocksSelectKey,
+	userPatternCategoriesSelectKey,
 	PrivateBlockPopover,
 	PrivatePublishDateTimePicker,
 	useSpacingSizes,
@@ -130,6 +133,7 @@ lock( privateApis, {
 	mediaEditKey,
 	getMediaSelectKey,
 	deviceTypeKey,
+	onViewportStateChangeKey,
 	isIsolatedEditorKey,
 	isNavigationOverlayContextKey,
 	isNavigationPostEditorKey,

package/src/store/private-actions.js

@@ -529,3 +529,35 @@ export function clearRequestedInspectorTab() {
 		type: 'CLEAR_REQUESTED_INSPECTOR_TAB',
 	};
 }
+
+/**
+ * Sets the selected style state for a block's style controls.
+ *
+ * @param {string} clientId The block client ID.
+ * @param {Object} value    The selected state value.
+ *
+ * @return {Object} Action object.
+ */
+export function setSelectedBlockStyleState( clientId, value ) {
+	return {
+		type: 'SET_SELECTED_BLOCK_STYLE_STATE',
+		clientId,
+		value,
+	};
+}
+
+/**
+ * Sets whether the selected style state is shown on the canvas.
+ *
+ * @param {string}  clientId The block client ID.
+ * @param {boolean} value    Whether to show the selected state on the canvas.
+ *
+ * @return {Object} Action object.
+ */
+export function setSelectedBlockStyleStateCanvasPreview( clientId, value ) {
+	return {
+		type: 'SET_SELECTED_BLOCK_STYLE_STATE_CANVAS_PREVIEW',
+		clientId,
+		value,
+	};
+}

package/src/store/private-keys.js

@@ -2,11 +2,15 @@ export const globalStylesDataKey = Symbol( 'globalStylesDataKey' );
 export const globalStylesLinksDataKey = Symbol( 'globalStylesLinks' );
 export const selectBlockPatternsKey = Symbol( 'selectBlockPatternsKey' );
 export const reusableBlocksSelectKey = Symbol( 'reusableBlocksSelect' );
+export const userPatternCategoriesSelectKey = Symbol(
+	'userPatternCategoriesSelect'
+);
 export const sectionRootClientIdKey = Symbol( 'sectionRootClientIdKey' );
 export const mediaEditKey = Symbol( 'mediaEditKey' );
 export const getMediaSelectKey = Symbol( 'getMediaSelect' );
 export const isIsolatedEditorKey = Symbol( 'isIsolatedEditor' );
 export const deviceTypeKey = Symbol( 'deviceTypeKey' );
+export const onViewportStateChangeKey = Symbol( 'onViewportStateChangeKey' );
 export const isNavigationOverlayContextKey = Symbol(
 	'isNavigationOverlayContext'
 );

package/src/store/private-selectors.js

@@ -34,6 +34,7 @@ import { unlock } from '../lock-unlock';
 import {
 	selectBlockPatternsKey,
 	reusableBlocksSelectKey,
+	userPatternCategoriesSelectKey,
 	sectionRootClientIdKey,
 	isIsolatedEditorKey,
 } from './private-keys';
@@ -361,7 +362,9 @@ export const getPatternBySlug = createRegistrySelector( ( select ) =>
 
 				return mapUserPattern(
 					block,
-					state.settings.__experimentalUserPatternCategories
+					state.settings[ userPatternCategoriesSelectKey ]?.(
+						select
+					) ?? state.settings.__experimentalUserPatternCategories
 				);
 			}
 
@@ -393,7 +396,9 @@ export const getAllPatterns = createRegistrySelector( ( select ) =>
 				.map( ( userPattern ) =>
 					mapUserPattern(
 						userPattern,
-						state.settings.__experimentalUserPatternCategories
+						state.settings[ userPatternCategoriesSelectKey ]?.(
+							select
+						) ?? state.settings.__experimentalUserPatternCategories
 					)
 				),
 			// This setting is left for back compat.
@@ -1052,3 +1057,40 @@ export function getViewportModalClientIds( state ) {
 export function getRequestedInspectorTab( state ) {
 	return state.requestedInspectorTab;
 }
+
+const DEFAULT_BLOCK_STYLE_STATE = {
+	viewport: 'default',
+	pseudo: 'default',
+};
+
+/**
+ * Returns the selected style state for a block's style controls.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId The block client ID.
+ *
+ * @return {Object} The selected block style state.
+ */
+export function getSelectedBlockStyleState( state, clientId ) {
+	if ( state.selectedBlockStyleState?.clientId !== clientId ) {
+		return DEFAULT_BLOCK_STYLE_STATE;
+	}
+
+	return state.selectedBlockStyleState.value ?? DEFAULT_BLOCK_STYLE_STATE;
+}
+
+/**
+ * Returns whether the selected style state is shown on the canvas.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId The block client ID.
+ *
+ * @return {boolean} Whether the selected style state is shown on the canvas.
+ */
+export function isSelectedBlockStyleStateShownOnCanvas( state, clientId ) {
+	if ( state.selectedBlockStyleState?.clientId !== clientId ) {
+		return true;
+	}
+
+	return state.selectedBlockStyleState.showStateOnCanvas ?? true;
+}

package/src/store/reducer.js

@@ -2259,7 +2259,7 @@ export function listViewContentPanelOpen( state = false, action ) {
  * @param {Object|null} state  Current state.
  * @param {Object}      action Dispatched action.
  *
- * @return {Object|null} Updated state.
+ * @return {Object|undefined} Updated state.
  */
 export function requestedInspectorTab( state = null, action ) {
 	switch ( action.type ) {
@@ -2275,6 +2275,109 @@ export function requestedInspectorTab( state = null, action ) {
 	return state;
 }
 
+/**
+ * Reducer tracking the selected style state for block style controls.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object|null} Updated state.
+ */
+export function selectedBlockStyleState( state = undefined, action ) {
+	switch ( action.type ) {
+		case 'SET_SELECTED_BLOCK_STYLE_STATE': {
+			if ( ! action.clientId || ! action.value ) {
+				return undefined;
+			}
+			const showStateOnCanvas =
+				state?.clientId === action.clientId
+					? state.showStateOnCanvas ?? true
+					: true;
+			const previousValue =
+				state?.clientId === action.clientId ? state.value : {};
+
+			return {
+				clientId: action.clientId,
+				showStateOnCanvas,
+				value: {
+					viewport: 'default',
+					pseudo: 'default',
+					...previousValue,
+					...action.value,
+				},
+			};
+		}
+
+		case 'SET_SELECTED_BLOCK_STYLE_STATE_CANVAS_PREVIEW': {
+			if ( ! action.clientId || typeof action.value !== 'boolean' ) {
+				return state;
+			}
+
+			const previousValue =
+				state?.clientId === action.clientId ? state.value : {};
+
+			return {
+				clientId: action.clientId,
+				showStateOnCanvas: action.value,
+				value: {
+					viewport: 'default',
+					pseudo: 'default',
+					...previousValue,
+				},
+			};
+		}
+
+		case 'SELECT_BLOCK':
+		case 'SELECTION_CHANGE': {
+			if ( state?.clientId && state.clientId !== action.clientId ) {
+				return undefined;
+			}
+
+			break;
+		}
+
+		case 'RESET_SELECTION': {
+			if (
+				state?.clientId &&
+				state.clientId !== action.selectionStart?.clientId
+			) {
+				return undefined;
+			}
+
+			break;
+		}
+
+		case 'CLEAR_SELECTED_BLOCK':
+		case 'MULTI_SELECT':
+			return undefined;
+
+		case 'REMOVE_BLOCKS':
+		case 'REPLACE_BLOCKS': {
+			if (
+				state?.clientId &&
+				action.clientIds?.includes( state.clientId )
+			) {
+				return undefined;
+			}
+
+			break;
+		}
+
+		case 'RESET_BLOCKS': {
+			if (
+				state?.clientId &&
+				! getFlattenedClientIds( action.blocks )[ state.clientId ]
+			) {
+				return undefined;
+			}
+
+			break;
+		}
+	}
+
+	return state;
+}
+
 const combinedReducers = combineReducers( {
 	blocks,
 	isDragging,
@@ -2310,6 +2413,7 @@ const combinedReducers = combineReducers( {
 	listViewExpandRevision,
 	listViewContentPanelOpen,
 	requestedInspectorTab,
+	selectedBlockStyleState,
 } );
 
 /**

package/src/store/test/private-actions.js

@@ -11,6 +11,8 @@ import {
 	stopDragging,
 	showViewportModal,
 	hideViewportModal,
+	setSelectedBlockStyleState,
+	setSelectedBlockStyleStateCanvasPreview,
 } from '../private-actions';
 
 describe( 'private actions', () => {
@@ -141,4 +143,28 @@ describe( 'private actions', () => {
 			} );
 		} );
 	} );
+
+	describe( 'setSelectedBlockStyleState', () => {
+		it( 'returns the SET_SELECTED_BLOCK_STYLE_STATE action', () => {
+			expect(
+				setSelectedBlockStyleState( 'client-1', { pseudo: ':hover' } )
+			).toEqual( {
+				type: 'SET_SELECTED_BLOCK_STYLE_STATE',
+				clientId: 'client-1',
+				value: { pseudo: ':hover' },
+			} );
+		} );
+	} );
+
+	describe( 'setSelectedBlockStyleStateCanvasPreview', () => {
+		it( 'returns the SET_SELECTED_BLOCK_STYLE_STATE_CANVAS_PREVIEW action', () => {
+			expect(
+				setSelectedBlockStyleStateCanvasPreview( 'client-1', false )
+			).toEqual( {
+				type: 'SET_SELECTED_BLOCK_STYLE_STATE_CANVAS_PREVIEW',
+				clientId: 'client-1',
+				value: false,
+			} );
+		} );
+	} );
 } );