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

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/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/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

package/src/components/inspector-controls/block-support-tools-panel.js

@@ -16,6 +16,7 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const {
 		getBlockAttributes,
+		getBlockName,
 		getMultiSelectedBlockClientIds,
 		getSelectedBlockClientId,
 		hasMultiSelection,
@@ -31,13 +32,19 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
 				: [ panelId ];
 
 			clientIds.forEach( ( clientId ) => {
-				const { style } = getBlockAttributes( clientId );
+				const blockAttributes = getBlockAttributes( clientId ) || {};
+				const { style } = blockAttributes;
 				let newBlockAttributes = { style };
+				const resetContext = {
+					attributes: blockAttributes,
+					clientId,
+					name: getBlockName( clientId ),
+				};
 
 				resetFilters.forEach( ( resetFilter ) => {
 					newBlockAttributes = {
 						...newBlockAttributes,
-						...resetFilter( newBlockAttributes ),
+						...resetFilter( newBlockAttributes, resetContext ),
 					};
 				} );
 
@@ -54,6 +61,7 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
 		},
 		[
 			getBlockAttributes,
+			getBlockName,
 			getMultiSelectedBlockClientIds,
 			hasMultiSelection,
 			panelId,

package/src/components/inspector-controls/fill.js

@@ -7,7 +7,7 @@ import {
 } from '@wordpress/components';
 import warning from '@wordpress/warning';
 import deprecated from '@wordpress/deprecated';
-import { useEffect, useContext } from '@wordpress/element';
+import { useEffect, useContext, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -19,6 +19,10 @@ import {
 	isInListViewBlockSupportTreeKey,
 } from '../block-edit/context';
 import groups from './groups';
+import {
+	scopeResetAllFilterToState,
+	useBlockStyleState,
+} from '../../hooks/block-style-state';
 import { ListViewContentFill } from './list-view-content-popover';
 
 const PATTERN_EDITING_GROUPS = [ 'content', 'list' ];
@@ -117,18 +121,27 @@ export default function InspectorControlsFill( {
 function RegisterResetAll( { resetAllFilter, children } ) {
 	const { registerResetAllFilter, deregisterResetAllFilter } =
 		useContext( ToolsPanelContext );
+	const selectedState = useBlockStyleState();
+	const scopedResetAllFilter = useMemo(
+		() => scopeResetAllFilterToState( selectedState, resetAllFilter ),
+		[ resetAllFilter, selectedState ]
+	);
 	useEffect( () => {
 		if (
-			resetAllFilter &&
+			scopedResetAllFilter &&
 			registerResetAllFilter &&
 			deregisterResetAllFilter
 		) {
-			registerResetAllFilter( resetAllFilter );
+			registerResetAllFilter( scopedResetAllFilter );
 			return () => {
-				deregisterResetAllFilter( resetAllFilter );
+				deregisterResetAllFilter( scopedResetAllFilter );
 			};
 		}
-	}, [ resetAllFilter, registerResetAllFilter, deregisterResetAllFilter ] );
+	}, [
+		scopedResetAllFilter,
+		registerResetAllFilter,
+		deregisterResetAllFilter,
+	] );
 	return children;
 }
 

package/src/components/inspector-controls/groups.js

@@ -15,6 +15,7 @@ const InspectorControlsFilter = createSlotFill( 'InspectorControlsFilter' );
 const InspectorControlsDimensions = createSlotFill(
 	'InspectorControlsDimensions'
 );
+const InspectorControlsLayout = createSlotFill( 'InspectorControlsLayout' );
 const InspectorControlsPosition = createSlotFill( 'InspectorControlsPosition' );
 const InspectorControlsTypography = createSlotFill(
 	'InspectorControlsTypography'
@@ -35,6 +36,7 @@ const groups = {
 	dimensions: InspectorControlsDimensions,
 	effects: InspectorControlsEffects,
 	filter: InspectorControlsFilter,
+	layout: InspectorControlsLayout,
 	list: InspectorControlsListView,
 	position: InspectorControlsPosition,
 	settings: InspectorControlsDefault, // Alias for default.

package/src/components/inspector-controls-tabs/index.js

@@ -2,14 +2,16 @@
  * WordPress dependencies
  */
 import {
-	Icon,
-	Tooltip,
+	Icon as WCIcon,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useEffect, useState, useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { useSelect, useDispatch } from '@wordpress/data';
 
+// 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
  */
@@ -175,14 +177,16 @@ export default function InspectorControlsTabs( {
 								{ tab.title }
 							</Tabs.Tab>
 						) : (
-							<Tooltip text={ tab.title } key={ tab.name }>
+							<Tooltip.Root key={ tab.name }>
 								<Tabs.Tab
 									tabId={ tab.name }
 									aria-label={ tab.title }
+									render={ <Tooltip.Trigger /> }
 								>
-									<Icon icon={ tab.icon } />
+									<WCIcon icon={ tab.icon } />
 								</Tabs.Tab>
-							</Tooltip>
+								<Tooltip.Popup>{ tab.title }</Tooltip.Popup>
+							</Tooltip.Root>
 						)
 					) }
 				</Tabs.TabList>

package/src/components/inspector-controls-tabs/settings-tab.js

@@ -7,26 +7,20 @@ import { __experimentalUseSlotFills as useSlotFills } from '@wordpress/component
  * Internal dependencies
  */
 import AdvancedControls from './advanced-controls-panel';
-import PositionControls from './position-controls-panel';
 import { default as InspectorControls } from '../inspector-controls';
 import groups from '../inspector-controls/groups';
 
 const SettingsTab = ( { showAdvancedControls = false } ) => {
 	const defaultFills = useSlotFills( groups.default.name );
-	const positionFills = useSlotFills( groups.position.name );
 	const bindingsFills = useSlotFills( groups.bindings.name );
 
 	// Expand the advanced panel when there are no other fills
 	// in the settings tab.
-	const hasOtherFills =
-		!! defaultFills?.length ||
-		!! positionFills?.length ||
-		!! bindingsFills?.length;
+	const hasOtherFills = !! defaultFills?.length || !! bindingsFills?.length;
 
 	return (
 		<>
 			<InspectorControls.Slot />
-			<PositionControls />
 			<InspectorControls.Slot group="bindings" />
 			{ showAdvancedControls && (
 				<div>

package/src/components/inspector-controls-tabs/styles-tab.js

@@ -9,6 +9,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
  */
 import BlockStyles from '../block-styles';
 import InspectorControls from '../inspector-controls';
+import PositionControls from './position-controls-panel';
 import { useBorderPanelLabel } from '../../hooks/border';
 import { useBlockSettings } from '../../hooks/utils';
 import { store as blockEditorStore } from '../../store';
@@ -95,6 +96,10 @@ const StylesTab = ( {
 						group="typography"
 						label={ __( 'Typography' ) }
 					/>
+					<InspectorControls.Slot
+						group="layout"
+						label={ __( 'Layout' ) }
+					/>
 					<InspectorControls.Slot
 						group="dimensions"
 						label={ __( 'Dimensions' ) }
@@ -103,6 +108,7 @@ const StylesTab = ( {
 						group="border"
 						label={ borderPanelLabel }
 					/>
+					<PositionControls />
 					<InspectorControls.Slot group="styles" />
 				</>
 			) }