@wordpress/block-editor 15.23.0 → 16.0.0

package/src/hooks/grid-visualizer.js

@@ -21,45 +21,48 @@ function GridLayoutSync( props ) {
 }
 
 function GridTools( { clientId, layout } ) {
-	const { isVisible, blockVisibility, deviceType } = useSelect(
-		( select ) => {
-			const {
-				isBlockSelected,
-				hasSelectedInnerBlock,
-				isDraggingBlocks,
-				getTemplateLock,
-				getBlockEditingMode,
-				getBlockAttributes,
-				getSettings,
-			} = select( blockEditorStore );
+	const { isVisible, blockVisibility, deviceType, viewportSettings } =
+		useSelect(
+			( select ) => {
+				const {
+					isBlockSelected,
+					hasSelectedInnerBlock,
+					isDraggingBlocks,
+					getTemplateLock,
+					getBlockEditingMode,
+					getBlockAttributes,
+					getSettings,
+				} = select( blockEditorStore );
 
-			// These calls are purposely ordered from least expensive to most expensive.
-			// Hides the visualizer in cases where the user is not or cannot interact with it.
-			// Also hide if a child block is selected, because layout-child.js will render
-			// the visualizer in that case (with proper childGridClientId handling).
-			if (
-				( ! isDraggingBlocks() && ! isBlockSelected( clientId ) ) ||
-				getTemplateLock( clientId ) ||
-				getBlockEditingMode( clientId ) !== 'default' ||
-				hasSelectedInnerBlock( clientId )
-			) {
-				return { isVisible: false };
-			}
+				// These calls are purposely ordered from least expensive to most expensive.
+				// Hides the visualizer in cases where the user is not or cannot interact with it.
+				// Also hide if a child block is selected, because layout-child.js will render
+				// the visualizer in that case (with proper childGridClientId handling).
+				if (
+					( ! isDraggingBlocks() && ! isBlockSelected( clientId ) ) ||
+					getTemplateLock( clientId ) ||
+					getBlockEditingMode( clientId ) !== 'default' ||
+					hasSelectedInnerBlock( clientId )
+				) {
+					return { isVisible: false };
+				}
 
-			const attributes = getBlockAttributes( clientId );
-			const settings = getSettings();
-			const currentDeviceType =
-				settings?.[ deviceTypeKey ]?.toLowerCase() ||
-				BLOCK_VISIBILITY_VIEWPORTS.desktop.key;
+				const attributes = getBlockAttributes( clientId );
+				const settings = getSettings();
+				const currentDeviceType =
+					settings?.[ deviceTypeKey ]?.toLowerCase() ||
+					BLOCK_VISIBILITY_VIEWPORTS.desktop.key;
 
-			return {
-				isVisible: true,
-				blockVisibility: attributes?.metadata?.blockVisibility,
-				deviceType: currentDeviceType,
-			};
-		},
-		[ clientId ]
-	);
+				return {
+					isVisible: true,
+					blockVisibility: attributes?.metadata?.blockVisibility,
+					deviceType: currentDeviceType,
+					viewportSettings:
+						settings?.__experimentalFeatures?.viewport,
+				};
+			},
+			[ clientId ]
+		);
 
 	// Get the block's DOM element to derive the canvas iframe window,
 	// so viewport detection matches the actual block rendering context
@@ -71,6 +74,7 @@ function GridTools( { clientId, layout } ) {
 		blockVisibility,
 		deviceType,
 		view: canvasView,
+		viewportSettings,
 	} );
 
 	// Check whether any ancestor is hidden at the viewport actually detected

package/src/hooks/layout-child.js

@@ -4,6 +4,7 @@
 import { useInstanceId } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
+import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
@@ -26,13 +27,10 @@ import {
 	getStyleForState,
 } from './block-style-state';
 
+const { getResponsiveMediaQueries } = unlock( globalStylesEnginePrivateApis );
+
 // Used for generating the instance ID
 const LAYOUT_CHILD_BLOCK_PROPS_REFERENCE = {};
-// Keep in sync with WP_Theme_JSON_Gutenberg::RESPONSIVE_BREAKPOINTS.
-const RESPONSIVE_BREAKPOINTS = {
-	'@mobile': '@media (width <= 480px)',
-	'@tablet': '@media (480px < width <= 782px)',
-};
 
 // These are the serialized `selfStretch` values. `max` used to be called
 // "Fixed" in the UI, but was renamed and replaced by `fixedNoShrink`.
@@ -253,10 +251,11 @@ export function getResponsiveChildLayoutStyles( {
 	style = {},
 	selector,
 	parentLayout = {},
+	viewportSettings,
 } ) {
 	const baseLayout = style?.layout ?? {};
 
-	return Object.entries( RESPONSIVE_BREAKPOINTS )
+	return Object.entries( getResponsiveMediaQueries( viewportSettings ) )
 		.map( ( [ viewport, mediaQuery ] ) => {
 			const viewportLayout = getStyleForState( style, {
 				viewport,
@@ -282,9 +281,15 @@ export function getResponsiveChildLayoutStyles( {
 }
 
 function useBlockPropsChildLayoutStyles( { style } ) {
-	const shouldRenderChildLayoutStyles = useSelect( ( select ) => {
-		return ! select( blockEditorStore ).getSettings().disableLayoutStyles;
-	} );
+	const { shouldRenderChildLayoutStyles, viewportSettings } = useSelect(
+		( select ) => {
+			const settings = select( blockEditorStore ).getSettings();
+			return {
+				shouldRenderChildLayoutStyles: ! settings.disableLayoutStyles,
+				viewportSettings: settings?.__experimentalFeatures?.viewport,
+			};
+		}
+	);
 	const layout = style?.layout ?? {};
 	const { columnStart, rowStart, columnSpan, rowSpan } = layout;
 	const parentLayout = useLayout() || {};
@@ -320,6 +325,7 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 				style,
 				selector,
 				parentLayout,
+				viewportSettings,
 			} ),
 		].join( '' );
 	}
@@ -373,6 +379,7 @@ function GridTools( {
 		parentBlockVisibility,
 		blockBlockVisibility,
 		deviceType,
+		viewportSettings,
 		isChildBlockAGrid,
 	} = useSelect(
 		( select ) => {
@@ -411,6 +418,7 @@ function GridTools( {
 				blockBlockVisibility:
 					blockAttributes?.metadata?.blockVisibility,
 				deviceType: currentDeviceType,
+				viewportSettings: settings?.__experimentalFeatures?.viewport,
 				// Check if the selected child block is itself a grid.
 				isChildBlockAGrid: blockAttributes?.layout?.type === 'grid',
 			};
@@ -431,6 +439,7 @@ function GridTools( {
 		blockVisibility: parentBlockVisibility,
 		deviceType,
 		view: canvasView,
+		viewportSettings,
 	} );
 
 	// Check whether any ancestor of the parent grid is hidden at the viewport
@@ -457,6 +466,7 @@ function GridTools( {
 			blockVisibility: blockBlockVisibility,
 			deviceType,
 			view: canvasView,
+			viewportSettings,
 		} );
 
 	// Use useState() instead of useRef() so that GridItemResizer updates when ref is set.

package/src/hooks/layout.js

@@ -14,6 +14,7 @@ import {
 	hasBlockSupport,
 	store as blocksStore,
 } from '@wordpress/blocks';
+import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
 import { useSelect } from '@wordpress/data';
 import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
@@ -49,12 +50,6 @@ import {
 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',
@@ -64,6 +59,7 @@ const CHILD_LAYOUT_KEYS = [
 	'rowSpan',
 ];
 const { kebabCase } = unlock( componentsPrivateApis );
+const { getResponsiveMediaQueries } = unlock( globalStylesEnginePrivateApis );
 
 function getDefaultLayout( layoutBlockSupport = {}, blockVariation ) {
 	const defaultBlockLayout = layoutBlockSupport?.default;
@@ -85,7 +81,7 @@ export function getResetLayout( layoutBlockSupport = {}, blockVariation ) {
 	} );
 }
 
-function getLayoutStateOverrides(
+export function getLayoutStateOverrides(
 	layout = {},
 	baseLayout = {},
 	existingLayout = {}
@@ -98,11 +94,13 @@ function getLayoutStateOverrides(
 	);
 
 	Object.entries( layout || {} ).forEach( ( [ key, value ] ) => {
+		const baseHasValue = Object.hasOwn( baseLayout || {}, key );
 		if (
 			! CHILD_LAYOUT_KEYS.includes( key ) &&
 			value !== baseLayout?.[ key ]
 		) {
-			overrides[ key ] = value;
+			overrides[ key ] =
+				value === undefined && baseHasValue ? null : value;
 		}
 	} );
 
@@ -239,6 +237,7 @@ export function useLayoutStyles( blockAttributes = {}, blockName, selector ) {
  * @param { Object }  options.layout              Active block layout.
  * @param { boolean } options.hasBlockGapSupport  Whether block gap is supported.
  * @param { * }       options.globalBlockGapValue Global block gap fallback.
+ * @param { Object }  options.viewportSettings    Viewport breakpoint settings.
  *
  * @return { string } CSS rule.
  */
@@ -249,8 +248,9 @@ export function getResponsiveLayoutStyles( {
 	layout = {},
 	hasBlockGapSupport,
 	globalBlockGapValue,
+	viewportSettings,
 } ) {
-	return Object.entries( RESPONSIVE_BREAKPOINTS )
+	return Object.entries( getResponsiveMediaQueries( viewportSettings ) )
 		.map( ( [ viewport, mediaQuery ] ) => {
 			const viewportStyle = getStyleForState( attributes?.style, {
 				viewport,
@@ -301,29 +301,34 @@ function LayoutPanelPure( {
 	const settings = useBlockSettings( blockName );
 	// Block settings come from theme.json under settings.[blockName].
 	const { layout: layoutSettings } = settings;
-	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 {
+		themeSupportsLayout,
+		activeBlockVariation,
+		selectedState,
+		isResponsiveEditing,
+	} = useSelect(
+		( select ) => {
+			const {
+				getBlockAttributes,
+				getSettings,
+				getSelectedBlockStyleState,
+				isResponsiveEditing: getIsResponsiveEditing,
+			} = unlock( select( blockEditorStore ) );
+			return {
+				activeBlockVariation: select(
+					blocksStore
+				).getActiveBlockVariation(
+					blockName,
+					getBlockAttributes( clientId ) || {},
+					'block'
+				),
+				themeSupportsLayout: getSettings().supportsLayout,
+				selectedState: getSelectedBlockStyleState( clientId ),
+				isResponsiveEditing: getIsResponsiveEditing(),
+			};
+		},
+		[ blockName, clientId ]
+	);
 
 	const blockEditingMode = useBlockEditingMode();
 	const isViewportLayoutState =
@@ -466,7 +471,7 @@ function LayoutPanelPure( {
 			const nextStateStyle = cleanEmptyObject( {
 				...stateStyle,
 				layout: getLayoutStateOverrides(
-					cleanEmptyObject( newLayout ),
+					newLayout,
 					baseLayout,
 					stateStyle?.layout
 				),
@@ -573,6 +578,13 @@ function LayoutPanelPure( {
 					layout={ usedLayout }
 					onChange={ onChangeLayout }
 					layoutBlockSupport={ layoutBlockSupport }
+					controlsGroup={
+						isResponsiveEditing &&
+						hasViewportBlockStyleState( selectedState ) &&
+						! hasPseudoBlockStyleState( selectedState )
+							? 'style-state'
+							: 'block'
+					}
 					name={ blockName }
 					clientId={ clientId }
 				/>
@@ -593,7 +605,6 @@ export default {
 function LayoutTypeSwitcher( { type, onChange } ) {
 	return (
 		<ToggleGroupControl
-			__next40pxDefaultSize
 			isBlock
 			label={ __( 'Layout type' ) }
 			hideLabelFromVision
@@ -642,6 +653,7 @@ function BlockWithLayoutStyles( {
 	props,
 	blockGapSupport,
 	globalBlockGapValue,
+	viewportSettings,
 	layoutClasses,
 } ) {
 	const { name, attributes } = props;
@@ -677,6 +689,7 @@ function BlockWithLayoutStyles( {
 		layout: usedLayout,
 		hasBlockGapSupport,
 		globalBlockGapValue,
+		viewportSettings,
 	} );
 	const css = [ baseLayoutCSS, responsiveLayoutCSS ]
 		.filter( Boolean )
@@ -762,7 +775,12 @@ export const withLayoutStyles = createHigherOrderComponent(
 						globalStyles?.blocks?.[ name ]?.spacing?.blockGap ??
 						globalStyles?.spacing?.blockGap;
 
-					return { blockGapSupport, globalBlockGapValue };
+					return {
+						blockGapSupport,
+						globalBlockGapValue,
+						viewportSettings:
+							settings?.__experimentalFeatures?.viewport,
+					};
 				},
 				[ blockSupportsLayout, clientId, attributes?.className, name ]
 			);

package/src/hooks/position.js

@@ -8,10 +8,11 @@ import clsx from 'clsx';
  */
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
-import { BaseControl, CustomSelectControl } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
-import { useMemo } from '@wordpress/element';
+import { useId, useMemo } from '@wordpress/element';
+// eslint-disable-next-line @wordpress/use-recommended-components -- Use the portal-based popup to avoid inspector clipping.
+import { SelectControl } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -27,13 +28,13 @@ const POSITION_SUPPORT_KEY = 'position';
 const DEFAULT_OPTION = {
 	key: 'default',
 	value: '',
-	name: __( 'Default' ),
+	label: __( 'Default' ),
 };
 
 const STICKY_OPTION = {
 	key: 'sticky',
 	value: 'sticky',
-	name: _x( 'Sticky', 'Name for the value of the CSS position property' ),
+	label: _x( 'Sticky', 'Name for the value of the CSS position property' ),
 	hint: __(
 		'The block will stick to the top of the window instead of scrolling.'
 	),
@@ -42,7 +43,7 @@ const STICKY_OPTION = {
 const FIXED_OPTION = {
 	key: 'fixed',
 	value: 'fixed',
-	name: _x( 'Fixed', 'Name for the value of the CSS position property' ),
+	label: _x( 'Fixed', 'Name for the value of the CSS position property' ),
 	hint: __( 'The block will not move when the page is scrolled.' ),
 };
 
@@ -262,28 +263,48 @@ export function PositionPanelPure( {
 	const selectedOption = value
 		? options.find( ( option ) => option.value === value ) || DEFAULT_OPTION
 		: DEFAULT_OPTION;
+	const hintIdPrefix = useId();
 
 	// Only display position controls if there is at least one option to choose from.
 	return options.length > 1 ? (
 		<InspectorControls group="position">
-			<BaseControl help={ stickyHelpText }>
-				<CustomSelectControl
-					__next40pxDefaultSize
-					label={ __( 'Position' ) }
-					hideLabelFromVision
-					describedBy={ sprintf(
-						// translators: %s: Currently selected position.
-						__( 'Currently selected position: %s' ),
-						selectedOption.name
-					) }
-					options={ options }
-					value={ selectedOption }
-					onChange={ ( { selectedItem } ) => {
-						onChangeType( selectedItem.value );
-					} }
-					size="__unstable-large"
-				/>
-			</BaseControl>
+			<SelectControl
+				label={ __( 'Position' ) }
+				hideLabelFromVision
+				description={ stickyHelpText }
+				items={ options }
+				value={ selectedOption }
+				onValueChange={ ( selectedItem ) => {
+					onChangeType( selectedItem.value );
+				} }
+			>
+				{ options.map( ( option ) => {
+					const hintId = option.hint
+						? `${ hintIdPrefix }-${ option.key }`
+						: undefined;
+
+					return (
+						<SelectControl.Item
+							key={ option.key }
+							value={ option }
+							label={ option.label }
+							className="block-editor-hooks__position-control-item"
+							aria-describedby={ hintId }
+						>
+							<div>{ option.label }</div>
+							{ option.hint && (
+								<div
+									id={ hintId }
+									className="block-editor-hooks__position-control-item-hint"
+									aria-hidden="true"
+								>
+									{ option.hint }
+								</div>
+							) }
+						</SelectControl.Item>
+					);
+				} ) }
+			</SelectControl>
 		</InspectorControls>
 	) : null;
 }

package/src/hooks/states.js

@@ -1,6 +1,8 @@
 /**
  * WordPress dependencies
  */
+import { useMemo } from '@wordpress/element';
+import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -9,6 +11,10 @@ import { __ } from '@wordpress/i18n';
 import StateControl from '../components/global-styles/state-control';
 import StateControlBadges from '../components/global-styles/state-control-badges';
 import { useToolsPanelDropdownMenuProps } from '../components/global-styles/utils';
+import { useSettings } from '../components/use-settings';
+import { unlock } from '../lock-unlock';
+
+const { getViewportBreakpoints } = unlock( globalStylesEnginePrivateApis );
 
 export const PSEUDO_STATE_LABELS = {
 	':hover': __( 'Hover' ),
@@ -22,18 +28,21 @@ export const RESPONSIVE_STATE_LABELS = {
 	'@mobile': __( 'Mobile' ),
 };
 
-// Viewport states are selected globally via the editor's device preview
-// (Responsive editing). 'default' maps to the Desktop device, the remaining
-// options are derived from the shared responsive-state labels.
-const DEVICE_STATE_OPTIONS = [
-	{ value: 'default', label: __( 'Desktop' ) },
-	...Object.entries( RESPONSIVE_STATE_LABELS ).map(
-		( [ value, label ] ) => ( {
+// Viewport states are selected globally via the editor's device preview.
+function getDeviceStateOptions( viewportSettings ) {
+	const breakpoints = getViewportBreakpoints( viewportSettings );
+
+	return Object.entries( RESPONSIVE_STATE_LABELS )
+		.filter(
+			( [ value ] ) =>
+				( value !== '@tablet' || breakpoints.tablet !== undefined ) &&
+				( value !== '@mobile' || breakpoints.mobile !== undefined )
+		)
+		.map( ( [ value, label ] ) => ( {
 			value,
 			label,
-		} )
-	),
-];
+		} ) );
+}
 
 // Keep in sync with WP_Theme_JSON_Gutenberg::VALID_BLOCK_PSEUDO_SELECTORS
 // and packages/global-styles-engine/src/core/render.tsx.
@@ -54,6 +63,7 @@ function getPseudoStateOptions( name ) {
 }
 
 const DEFAULT_STATE_VALUE = 'default';
+const EMPTY_STATE_OPTIONS = [];
 
 /**
  * Renders a pseudo-state selector in the block card header.
@@ -68,7 +78,10 @@ const DEFAULT_STATE_VALUE = 'default';
  * @return {Element|null} State control component, or null if not applicable.
  */
 export function BlockStatesControl( { name, value, onChange } ) {
-	const pseudoStateOptions = getPseudoStateOptions( name );
+	const pseudoStateOptions = useMemo(
+		() => getPseudoStateOptions( name ),
+		[ name ]
+	);
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	if ( ! pseudoStateOptions.length ) {
@@ -96,7 +109,15 @@ export function BlockStatesControl( { name, value, onChange } ) {
  * @return {Element|null} Badges component, or null if there is nothing to show.
  */
 export function BlockStateBadges( { name, value, isResponsiveEditing } ) {
-	const pseudoStateOptions = getPseudoStateOptions( name );
+	const pseudoStateOptions = useMemo(
+		() => getPseudoStateOptions( name ),
+		[ name ]
+	);
+	const [ viewportSettings ] = useSettings( 'viewport' );
+	const deviceStateOptions = useMemo(
+		() => getDeviceStateOptions( viewportSettings ),
+		[ viewportSettings ]
+	);
 
 	if ( ! pseudoStateOptions.length && ! isResponsiveEditing ) {
 		return null;
@@ -104,7 +125,9 @@ export function BlockStateBadges( { name, value, isResponsiveEditing } ) {
 
 	return (
 		<StateControlBadges
-			viewportStates={ isResponsiveEditing ? DEVICE_STATE_OPTIONS : [] }
+			viewportStates={
+				isResponsiveEditing ? deviceStateOptions : EMPTY_STATE_OPTIONS
+			}
 			pseudoStates={ pseudoStateOptions }
 			viewportValue={ value?.viewport ?? DEFAULT_STATE_VALUE }
 			pseudoStateValue={ value?.pseudo ?? DEFAULT_STATE_VALUE }