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

package/src/components/global-styles/dimensions-panel.js

@@ -29,10 +29,17 @@ import ChildLayoutControl from '../child-layout-control';
 import AspectRatioTool from '../dimensions-tool/aspect-ratio-tool';
 import { cleanEmptyObject } from '../../hooks/utils';
 import { setImmutably } from '../../utils/object';
+import {
+	DEFAULT_BLOCK_STYLE_STATE,
+	hasPseudoBlockStyleState,
+} from '../../hooks/block-style-state';
 
 const AXIAL_SIDES = [ 'horizontal', 'vertical' ];
 
-export function useHasDimensionsPanel( settings ) {
+export function useHasDimensionsPanel(
+	settings,
+	styleState = DEFAULT_BLOCK_STYLE_STATE
+) {
 	return (
 		Platform.OS === 'web' &&
 		( hasContentSize( settings ) ||
@@ -45,7 +52,7 @@ export function useHasDimensionsPanel( settings ) {
 			hasMinWidth( settings ) ||
 			hasWidth( settings ) ||
 			hasAspectRatio( settings ) ||
-			hasChildLayout( settings ) )
+			hasChildLayout( settings, styleState ) )
 	);
 }
 
@@ -89,7 +96,11 @@ function hasAspectRatio( settings ) {
 	return settings?.dimensions?.aspectRatio;
 }
 
-function hasChildLayout( settings ) {
+function hasChildLayout( settings, styleState = DEFAULT_BLOCK_STYLE_STATE ) {
+	if ( hasPseudoBlockStyleState( styleState ) ) {
+		return false;
+	}
+
 	const {
 		type: parentLayoutType = 'default',
 		default: { type: defaultParentLayoutType = 'default' } = {},
@@ -231,6 +242,7 @@ export default function DimensionsPanel( {
 	// Special case because the layout controls are not part of the dimensions panel
 	// in global styles but not in block inspector.
 	includeLayoutControls = false,
+	styleState = DEFAULT_BLOCK_STYLE_STATE,
 } ) {
 	const { dimensions, spacing } = settings;
 
@@ -490,13 +502,14 @@ export default function DimensionsPanel( {
 	const hasAspectRatioValue = () => !! value?.dimensions?.aspectRatio;
 
 	// Child Layout
-	const showChildLayoutControl = hasChildLayout( settings );
+	const showChildLayoutControl = hasChildLayout( settings, styleState );
 	const childLayout = inheritedValue?.layout;
 
 	const setChildLayout = ( newChildLayout ) => {
 		onChange( {
 			...value,
 			layout: {
+				...value?.layout,
 				...newChildLayout,
 			},
 		} );

package/src/components/global-styles/index.js

@@ -24,3 +24,4 @@ export {
 	useHasBackgroundPanel,
 } from './background-panel';
 export { default as StateControl } from './state-control';
+export { default as StateControlBadges } from './state-control-badges';

package/src/components/global-styles/shadow-panel-components.js

@@ -11,7 +11,6 @@ import {
 	FlexItem,
 	Dropdown,
 	Composite,
-	Tooltip,
 } from '@wordpress/components';
 import { useMemo, useRef } from '@wordpress/element';
 import { shadow as shadowIcon, Icon, check, reset } from '@wordpress/icons';
@@ -21,6 +20,9 @@ import { shadow as shadowIcon, Icon, check, reset } from '@wordpress/icons';
  */
 import clsx from 'clsx';
 
+// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
+import { Tooltip } from '@wordpress/ui';
+
 /**
  * Shared reference to an empty array for cases where it is important to avoid
  * returning a new array reference on every invocation.
@@ -82,31 +84,39 @@ export function ShadowPresets( { presets, activeShadow, onSelect } ) {
 
 export function ShadowIndicator( { type, label, isActive, onSelect, shadow } ) {
 	return (
-		<Tooltip text={ label }>
-			<Composite.Item
-				role="option"
-				aria-label={ label }
-				aria-selected={ isActive }
-				className={ clsx( 'block-editor-global-styles__shadow__item', {
-					'is-active': isActive,
-				} ) }
+		<Tooltip.Root>
+			<Tooltip.Trigger
 				render={
-					<button
+					<Composite.Item
+						role="option"
+						aria-label={ label }
+						aria-selected={ isActive }
 						className={ clsx(
-							'block-editor-global-styles__shadow-indicator',
+							'block-editor-global-styles__shadow__item',
 							{
-								unset: type === 'unset',
+								'is-active': isActive,
 							}
 						) }
-						onClick={ onSelect }
-						style={ { boxShadow: shadow } }
-						aria-label={ label }
-					>
-						{ isActive && <Icon icon={ check } /> }
-					</button>
+						render={
+							<button
+								className={ clsx(
+									'block-editor-global-styles__shadow-indicator',
+									{
+										unset: type === 'unset',
+									}
+								) }
+								onClick={ onSelect }
+								style={ { boxShadow: shadow } }
+								aria-label={ label }
+							>
+								{ isActive && <Icon icon={ check } /> }
+							</button>
+						}
+					/>
 				}
 			/>
-		</Tooltip>
+			<Tooltip.Popup>{ label }</Tooltip.Popup>
+		</Tooltip.Root>
 	);
 }
 

package/src/components/global-styles/state-control-badges.js

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { Stack } from '@wordpress/ui';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { Badge: WCBadge } = unlock( componentsPrivateApis );
+
+export default function StateControlBadges( {
+	viewportStates = [],
+	pseudoStates = [],
+	viewportValue = 'default',
+	pseudoStateValue = 'default',
+	className = 'block-editor-global-styles-state-control__badges',
+} ) {
+	const activeStates = [];
+	const selectedViewport = viewportStates.find(
+		( state ) => state.value === viewportValue
+	);
+	const selectedPseudoState = pseudoStates.find(
+		( state ) => state.value === pseudoStateValue
+	);
+
+	if ( selectedViewport ) {
+		activeStates.push( {
+			key: `viewport-${ selectedViewport.value }`,
+			label: selectedViewport.label,
+		} );
+	}
+
+	if ( selectedPseudoState ) {
+		activeStates.push( {
+			key: `pseudo-${ selectedPseudoState.value }`,
+			label: selectedPseudoState.label,
+		} );
+	}
+
+	return (
+		<Stack
+			className={ className }
+			direction="row"
+			justify="flex-start"
+			gap="xs"
+			wrap="wrap"
+		>
+			{ activeStates.map( ( state ) => (
+				<WCBadge key={ state.key } intent="info">
+					{ state.label }
+				</WCBadge>
+			) ) }
+		</Stack>
+	);
+}

package/src/components/global-styles/state-control.js

@@ -1,23 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { check, chevronDown } from '@wordpress/icons';
-import {
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { check, chevronDown, moreVertical } from '@wordpress/icons';
+import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { Stack } from '@wordpress/ui';
 
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-const { Badge: WCBadge } = unlock( componentsPrivateApis );
-
 /**
  * State control for managing viewport and pseudo-state styles.
  * Displays a dropdown menu with separate groups for each selector.
@@ -29,6 +17,8 @@ const { Badge: WCBadge } = unlock( componentsPrivateApis );
  * @param {string}   props.pseudoStateValue    Currently selected pseudo state value.
  * @param {Function} props.onChangeViewport    Callback when viewport selection changes.
  * @param {Function} props.onChangePseudoState Callback when pseudo state selection changes.
+ * @param {boolean}  props.showText            Whether to show text label on the toggle. Default true.
+ * @param {Object}   props.popoverProps        Popover props for the dropdown menu.
  * @return {Element|null} State control component.
  */
 export default function StateControl( {
@@ -38,6 +28,8 @@ export default function StateControl( {
 	pseudoStateValue = 'default',
 	onChangeViewport,
 	onChangePseudoState,
+	showText = true,
+	popoverProps = {},
 } ) {
 	if ( ! viewportStates.length && ! pseudoStates.length ) {
 		return null;
@@ -89,6 +81,14 @@ export default function StateControl( {
 		}
 	}
 
+	const currentStateLabel = activeStates.length
+		? activeStates.map( ( state ) => state.label ).join( ', ' )
+		: __( 'Default' );
+	const icon = showText ? chevronDown : moreVertical;
+	const toggleProps = showText
+		? { size: 'compact', variant: 'tertiary', iconPosition: 'right' }
+		: { size: 'compact', variant: 'tertiary' };
+
 	return (
 		<Stack
 			direction="column"
@@ -97,17 +97,22 @@ export default function StateControl( {
 			className="block-editor-global-styles-state-control"
 		>
 			<DropdownMenu
-				icon={ chevronDown }
-				label={ triggerLabel }
+				icon={ icon }
+				label={
+					showText
+						? triggerLabel
+						: sprintf(
+								/* translators: %s: Current state (e.g. "Hover", "Focus") */
+								__( 'State: %s' ),
+								currentStateLabel
+						  )
+				}
 				popoverProps={ {
 					placement: 'right-start',
+					...popoverProps,
 				} }
-				text={ triggerLabel }
-				toggleProps={ {
-					size: 'compact',
-					variant: 'tertiary',
-					iconPosition: 'right',
-				} }
+				text={ showText ? triggerLabel : undefined }
+				toggleProps={ toggleProps }
 			>
 				{ ( { onClose } ) => (
 					<>
@@ -160,19 +165,6 @@ export default function StateControl( {
 					</>
 				) }
 			</DropdownMenu>
-			<Stack
-				className="block-editor-global-styles-state-control__badges"
-				direction="row"
-				justify="flex-start"
-				gap="xs"
-				wrap="wrap"
-			>
-				{ activeStates.map( ( activeState ) => (
-					<WCBadge key={ activeState.key } intent="info">
-						{ activeState.label }
-					</WCBadge>
-				) ) }
-			</Stack>
 		</Stack>
 	);
 }

package/src/components/global-styles/test/color-panel.js

@@ -0,0 +1,135 @@
+/**
+ * External dependencies
+ */
+import { screen } from '@testing-library/react';
+import { click, render } from '@ariakit/test/react';
+
+/**
+ * Internal dependencies
+ */
+import ColorPanel from '../color-panel';
+
+// ---------------------------------------------------------------------------
+// Shared fixtures
+// ---------------------------------------------------------------------------
+
+// Two palette entries that share the same decoded hex value (#000) but carry
+// distinct slugs. This mirrors the duplicate-color scenario that motivated
+// the slug-based selection work.
+const DUPLICATE_PALETTE_SETTINGS = {
+	color: {
+		text: true,
+		link: false, // keep the panel simple so button queries are unambiguous
+		background: false,
+		custom: false,
+		customGradient: false,
+		defaultPalette: false,
+		palette: {
+			theme: [
+				{
+					color: '#000',
+					name: 'Dark Background',
+					slug: 'dark-background',
+				},
+				{ color: '#000', name: 'Dark Text', slug: 'dark-text' },
+			],
+		},
+	},
+};
+
+// ---------------------------------------------------------------------------
+// ColorPanel — setTextColor behaviour (render tests)
+// ---------------------------------------------------------------------------
+
+describe( 'ColorPanel — setTextColor', () => {
+	// Helper: open the Text-color dropdown and return the rendered swatches.
+	async function openTextDropdown() {
+		await click(
+			screen.getByRole( 'button', { name: /Text/, expanded: false } )
+		);
+		// `findAllByRole` waits for the Popover/portal content to appear.
+		return screen.findAllByRole( 'option' );
+	}
+
+	it( 'encodes a slug-selected color as var:preset|color|<slug> rather than falling back to a hex-value lookup', async () => {
+		const onChange = jest.fn();
+
+		await render(
+			<ColorPanel
+				value={ {} }
+				inheritedValue={ {} }
+				settings={ DUPLICATE_PALETTE_SETTINGS }
+				panelId="test"
+				onChange={ onChange }
+			/>
+		);
+
+		const swatches = await openTextDropdown();
+		// swatch[0] = 'dark-background', swatch[1] = 'dark-text'
+		await click( swatches[ 1 ] );
+
+		expect( onChange ).toHaveBeenCalledTimes( 1 );
+		const result = onChange.mock.calls[ 0 ][ 0 ];
+		// The slug must be encoded directly: not looked up by hex value.
+		expect( result?.color?.text ).toBe( 'var:preset|color|dark-text' );
+	} );
+
+	it( 'syncs the link color when text and link share the same raw preset reference', async () => {
+		const onChange = jest.fn();
+		const sharedRef = 'var:preset|color|dark-background';
+
+		await render(
+			<ColorPanel
+				value={ {} }
+				inheritedValue={ {
+					color: { text: sharedRef },
+					elements: { link: { color: { text: sharedRef } } },
+				} }
+				settings={ DUPLICATE_PALETTE_SETTINGS }
+				panelId="test"
+				onChange={ onChange }
+			/>
+		);
+
+		const swatches = await openTextDropdown();
+		await click( swatches[ 1 ] );
+
+		const result = onChange.mock.calls[ 0 ][ 0 ];
+		expect( result?.color?.text ).toBe( 'var:preset|color|dark-text' );
+		// Link must be kept in sync because text and link shared the same ref.
+		expect( result?.elements?.link?.color?.text ).toBe(
+			'var:preset|color|dark-text'
+		);
+	} );
+
+	it( 'does NOT sync the link color when text and link have different raw refs, even if their decoded hex values match', async () => {
+		const onChange = jest.fn();
+
+		await render(
+			<ColorPanel
+				value={ {} }
+				inheritedValue={ {
+					// Both resolve to #000, but they are different preset references.
+					color: { text: 'var:preset|color|dark-background' },
+					elements: {
+						link: {
+							color: { text: 'var:preset|color|dark-text' },
+						},
+					},
+				} }
+				settings={ DUPLICATE_PALETTE_SETTINGS }
+				panelId="test"
+				onChange={ onChange }
+			/>
+		);
+
+		const swatches = await openTextDropdown();
+		await click( swatches[ 1 ] );
+
+		const result = onChange.mock.calls[ 0 ][ 0 ];
+		expect( result?.color?.text ).toBe( 'var:preset|color|dark-text' );
+		// Link must NOT be updated: raw-ref identity is what matters,
+		// not decoded-value equality.
+		expect( result?.elements?.link?.color?.text ).toBeUndefined();
+	} );
+} );

package/src/components/iframe/index.js

@@ -125,9 +125,6 @@ function getIframeSrc( resolvedAssets ) {
 		${ resolvedAssets.styles ?? '' }
 		${ resolvedAssets.scripts ?? '' }
 	</head>
-	<body>
-		<script>document.currentScript.parentElement.remove()</script>
-	</body>
 </html>`;
 
 	src = URL.createObjectURL( new Blob( [ html ], { type: 'text/html' } ) );

package/src/components/iframe/use-scale-canvas.js

@@ -312,8 +312,14 @@ export function useScaleCanvas( {
 	 * changes due to the container resizing.
 	 */
 	useEffect( () => {
-		const trigger =
-			iframeDocument && previousIsZoomedOut.current !== isZoomedOut;
+		// Wait for the iframe document so a zoom out state that is already
+		// active on mount (e.g. when the canvas is remounted on a viewport
+		// change) is still detected as a transition.
+		if ( ! iframeDocument ) {
+			return;
+		}
+
+		const trigger = previousIsZoomedOut.current !== isZoomedOut;
 
 		previousIsZoomedOut.current = isZoomedOut;
 

package/src/components/inserter/hooks/use-patterns-state.js

@@ -12,7 +12,10 @@ import { store as noticesStore } from '@wordpress/notices';
  */
 import { store as blockEditorStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
-import { isNavigationOverlayContextKey } from '../../../store/private-keys';
+import {
+	isNavigationOverlayContextKey,
+	userPatternCategoriesSelectKey,
+} from '../../../store/private-keys';
 import { INSERTER_PATTERN_TYPES } from '../block-patterns-tab/utils';
 import { isFiltered } from '../../../store/utils';
 
@@ -51,17 +54,19 @@ const usePatternsState = (
 			const { getSettings, __experimentalGetAllowedPatterns } = unlock(
 				select( blockEditorStore )
 			);
-			const {
-				__experimentalUserPatternCategories,
-				__experimentalBlockPatternCategories,
-			} = getSettings();
+			const settings = getSettings();
+			const userPatternCategoriesSelect =
+				settings[ userPatternCategoriesSelectKey ];
 			return {
 				patterns: __experimentalGetAllowedPatterns(
 					rootClientId,
 					options
 				),
-				userPatternCategories: __experimentalUserPatternCategories,
-				patternCategories: __experimentalBlockPatternCategories,
+				userPatternCategories: userPatternCategoriesSelect
+					? userPatternCategoriesSelect( select )
+					: settings.__experimentalUserPatternCategories,
+				patternCategories:
+					settings.__experimentalBlockPatternCategories,
 			};
 		},
 		[ rootClientId, options ]

package/src/components/inserter/index.js

@@ -73,6 +73,7 @@ const defaultRenderToggle = ( {
 			className="block-editor-inserter__toggle"
 			aria-haspopup={ ! hasSingleBlockType ? 'true' : false }
 			aria-expanded={ ! hasSingleBlockType ? isOpen : false }
+			isPressed={ ! hasSingleBlockType && isOpen }
 			disabled={ disabled }
 			{ ...rest }
 		/>

package/src/components/inserter/media-tab/media-preview.js

@@ -7,7 +7,6 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import {
-	Tooltip,
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
@@ -28,6 +27,9 @@ import { store as noticesStore } from '@wordpress/notices';
 import { isBlobURL } from '@wordpress/blob';
 import { getFilename } from '@wordpress/url';
 
+// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
+import { Tooltip } from '@wordpress/ui';
+
 /**
  * Internal dependencies
  */
@@ -261,27 +263,34 @@ export function MediaPreview( { media, onClick, category } ) {
 							onMouseEnter={ onMouseEnter }
 							onMouseLeave={ onMouseLeave }
 						>
-							<Tooltip text={ title }>
-								<Composite.Item
+							<Tooltip.Root>
+								<Tooltip.Trigger
 									render={
-										<div
-											aria-label={ title }
-											role="option"
-											className="block-editor-inserter__media-list__item"
-										/>
-									}
-									onClick={ () => onMediaInsert( block ) }
-								>
-									<div className="block-editor-inserter__media-list__item-preview">
-										{ preview }
-										{ isInserting && (
-											<div className="block-editor-inserter__media-list__item-preview-spinner">
-												<Spinner />
+										<Composite.Item
+											render={
+												<div
+													aria-label={ title }
+													role="option"
+													className="block-editor-inserter__media-list__item"
+												/>
+											}
+											onClick={ () =>
+												onMediaInsert( block )
+											}
+										>
+											<div className="block-editor-inserter__media-list__item-preview">
+												{ preview }
+												{ isInserting && (
+													<div className="block-editor-inserter__media-list__item-preview-spinner">
+														<Spinner />
+													</div>
+												) }
 											</div>
-										) }
-									</div>
-								</Composite.Item>
-							</Tooltip>
+										</Composite.Item>
+									}
+								/>
+								<Tooltip.Popup>{ title }</Tooltip.Popup>
+							</Tooltip.Root>
 							{ ! isInserting && (
 								<MediaPreviewOptions
 									category={ category }

package/src/components/inserter/media-tab/utils.js

@@ -34,7 +34,7 @@ export function getBlockAndPreviewFromMedia( media, mediaType ) {
 			src={ media.previewUrl || mediaSrc }
 			alt={ alt }
 			controls={ mediaType === 'audio' ? true : undefined }
-			inert="true"
+			inert
 			onError={ ( { currentTarget } ) => {
 				// Fall back to the media source if the preview cannot be loaded.
 				if ( currentTarget.src === media.previewUrl ) {

package/src/components/inserter/panel.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Icon } from '@wordpress/components';
+import { Icon as WCIcon } from '@wordpress/components';
 
 function InserterPanel( { title, icon, children } ) {
 	return (
@@ -10,7 +10,7 @@ function InserterPanel( { title, icon, children } ) {
 				<h2 className="block-editor-inserter__panel-title">
 					{ title }
 				</h2>
-				<Icon icon={ icon } />
+				<WCIcon icon={ icon } />
 			</div>
 			<div className="block-editor-inserter__panel-content">
 				{ children }

package/src/components/inserter/style.scss

@@ -92,6 +92,7 @@ $block-inserter-tabs-height: 44px;
 	@media not ( prefers-reduced-motion ) {
 		transition: color 0.2s ease;
 	}
+
 }
 
 .block-editor-inserter__menu {

package/src/components/inserter-button/index.native.js

@@ -7,7 +7,7 @@ import { View, TouchableHighlight, Text } from 'react-native';
  * WordPress dependencies
  */
 import { useCallback } from '@wordpress/element';
-import { Icon } from '@wordpress/components';
+import { Icon as WCIcon } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 
@@ -78,7 +78,10 @@ function MenuItem( {
 					] }
 				>
 					{ blockIsNew && (
-						<Icon icon={ sparkles } style={ styles.newIndicator } />
+						<WCIcon
+							icon={ sparkles }
+							style={ styles.newIndicator }
+						/>
 					) }
 					<View style={ modalIconStyle }>
 						<BlockIcon