@wordpress/block-editor 15.22.1 → 16.0.0

package/src/hooks/block-fields/rich-text/index.js

@@ -13,13 +13,10 @@ import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
 import { getAllowedFormats } from '../../../components/rich-text/utils';
 import { useEventListeners } from '../../../components/rich-text/event-listeners';
 import FormatEdit from '../../../components/rich-text/format-edit';
-import {
-	keyboardShortcutContext,
-	inputEventContext,
-} from '../../../components/rich-text';
 import { unlock } from '../../../lock-unlock';
 
-const { useRichText } = unlock( richTextPrivateApis );
+const { useRichText, KeyboardShortcutContext, InputEventContext } =
+	unlock( richTextPrivateApis );
 
 export default function RichTextControl( {
 	data,
@@ -84,8 +81,8 @@ export default function RichTextControl( {
 	return (
 		<>
 			{ isSelected && (
-				<keyboardShortcutContext.Provider value={ keyboardShortcuts }>
-					<inputEventContext.Provider value={ inputEvents }>
+				<KeyboardShortcutContext.Provider value={ keyboardShortcuts }>
+					<InputEventContext.Provider value={ inputEvents }>
 						<div>
 							<FormatEdit
 								value={ value }
@@ -96,8 +93,8 @@ export default function RichTextControl( {
 								isVisible={ false }
 							/>
 						</div>
-					</inputEventContext.Provider>
-				</keyboardShortcutContext.Provider>
+					</InputEventContext.Provider>
+				</KeyboardShortcutContext.Provider>
 			) }
 			<BaseControl { ...baseControlProps }>
 				<div

package/src/hooks/block-hooks.scss

@@ -2,6 +2,7 @@
 @use "@wordpress/base-styles/colors" as *;
 
 .block-editor-hooks__block-hooks {
+
 	/**
 	 * Un-reverse the flex direction for the toggle's label.
 	 */
@@ -15,3 +16,17 @@
 		margin-bottom: $grid-unit-20;
 	}
 }
+
+.block-editor-hooks__position-control-item {
+
+	/**
+	 * Try to make items match the width of the anchor, subtract any margin on
+	 * items to calculate the correct inner width.
+	 */
+	max-inline-size: max(calc(var(--anchor-width) - (2 * var(--wp-ui-popup-padding))), 223px);
+}
+
+.block-editor-hooks__position-control-item-hint {
+	color: var(--wpds-color-foreground-content-neutral-weak);
+	margin-block-start: $grid-unit-05;
+}

package/src/hooks/elements.js

@@ -93,7 +93,6 @@ export function ElementsEdit( {
 	// Text and background color failures are reported by the Typography and
 	// Background panels, which own those selections.
 	const enableContrastChecking =
-		! isStateSelected &&
 		!! value?.elements?.link?.color?.text &&
 		settings?.color?.link &&
 		false !==

package/src/hooks/font-size.js

@@ -131,7 +131,6 @@ export function FontSizeEdit( props ) {
 			valueMode={ fontSize ? 'slug' : 'literal' }
 			withReset={ false }
 			withSlider
-			size="__unstable-large"
 		/>
 	);
 }

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;
 }