@wordpress/block-editor 15.18.1-next.v.202604201441.0 → 15.19.0

package/src/components/block-mover/button.js

@@ -7,10 +7,11 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { getBlockType } from '@wordpress/blocks';
-import { Button, VisuallyHidden } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
+import { Button } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
+import { useInstanceId, useViewportMatch } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useMemo } from '@wordpress/element';
 import { __, isRTL } from '@wordpress/i18n';
 import { displayShortcut } from '@wordpress/keycodes';
 
@@ -62,10 +63,12 @@ const BlockMoverButton = forwardRef(
 		ref
 	) => {
 		const instanceId = useInstanceId( BlockMoverButton );
-		const normalizedClientIds = Array.isArray( clientIds )
-			? clientIds
-			: [ clientIds ];
+		const normalizedClientIds = useMemo(
+			() => ( Array.isArray( clientIds ) ? clientIds : [ clientIds ] ),
+			[ clientIds ]
+		);
 		const blocksCount = normalizedClientIds.length;
+		const isMobileViewport = useViewportMatch( 'small', '<' );
 
 		const {
 			blockType,
@@ -107,7 +110,7 @@ const BlockMoverButton = forwardRef(
 					orientation: moverOrientation || blockListOrientation,
 				};
 			},
-			[ clientIds, direction ]
+			[ direction, moverOrientation, normalizedClientIds ]
 		);
 
 		const { moveBlocksDown, moveBlocksUp } =
@@ -138,6 +141,13 @@ const BlockMoverButton = forwardRef(
 						direction,
 						orientation
 					) }
+					tooltipPosition={
+						! isMobileViewport &&
+						direction === 'down' &&
+						orientation === 'vertical'
+							? 'bottom'
+							: 'top'
+					}
 					aria-describedby={ descriptionId }
 					{ ...props }
 					onClick={ isDisabled ? null : onClick }

package/src/components/block-pattern-setup/index.js

@@ -3,7 +3,8 @@
  */
 import { useDispatch } from '@wordpress/data';
 import { cloneBlock } from '@wordpress/blocks';
-import { Composite, VisuallyHidden } from '@wordpress/components';
+import { Composite } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 
 import { useState } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';

package/src/components/block-patterns-list/index.js

@@ -10,10 +10,10 @@ import { cloneBlock } from '@wordpress/blocks';
 import { useEffect, useState, forwardRef, useMemo } from '@wordpress/element';
 import {
 	Composite,
-	VisuallyHidden,
 	Tooltip,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { Icon, symbol } from '@wordpress/icons';

package/src/components/block-patterns-paging/index.js

@@ -4,7 +4,7 @@
 import {
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	Button,
 } from '@wordpress/components';
 import { __, _x, _n, sprintf } from '@wordpress/i18n';
@@ -17,14 +17,13 @@ export default function Pagination( {
 } ) {
 	return (
 		<VStack className="block-editor-patterns__grid-pagination-wrapper">
-			<Text variant="muted">
+			<WCText variant="muted">
 				{ sprintf(
 					// translators: %s: Total number of patterns.
 					_n( '%s item', '%s items', totalItems ),
 					totalItems
 				) }
-			</Text>
-
+			</WCText>
 			{ numPages > 1 && (
 				<HStack
 					expanded={ false }
@@ -60,14 +59,14 @@ export default function Pagination( {
 							<span>‹</span>
 						</Button>
 					</HStack>
-					<Text variant="muted">
+					<WCText variant="muted">
 						{ sprintf(
 							// translators: 1: Current page number. 2: Total number of pages.
 							_x( '%1$s of %2$s', 'paging' ),
 							currentPage,
 							numPages
 						) }
-					</Text>
+					</WCText>
 					<HStack
 						expanded={ false }
 						spacing={ 1 }

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -18,7 +18,7 @@ import { pipe, useCopyToClipboard } from '@wordpress/compose';
  * Internal dependencies
  */
 import BlockActions from '../block-actions';
-import CommentIconSlotFill from '../../components/collab/block-comment-icon-slot';
+import NoteIconSlotFill from '../../components/collab/note-icon-slot';
 import BlockHTMLConvertButton from './block-html-convert-button';
 import __unstableBlockSettingsMenuFirstItem from './block-settings-menu-first-item';
 import BlockSettingsMenuControls from '../block-settings-menu-controls';
@@ -349,7 +349,7 @@ export function BlockSettingsDropdown( {
 										</>
 									) }
 									{ canEdit && count === 1 && (
-										<CommentIconSlotFill.Slot
+										<NoteIconSlotFill.Slot
 											fillProps={ {
 												clientId: firstBlockClientId,
 												onClose,

package/src/components/block-settings-menu/index.js

@@ -7,12 +7,12 @@ import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
  * Internal dependencies
  */
 import BlockSettingsDropdown from './block-settings-dropdown';
-import CommentIconToolbarSlotFill from '../../components/collab/block-comment-icon-toolbar-slot';
+import NoteIconToolbarSlotFill from '../../components/collab/note-icon-toolbar-slot';
 
 export function BlockSettingsMenu( { clientIds, ...props } ) {
 	return (
 		<ToolbarGroup>
-			<CommentIconToolbarSlotFill.Slot />
+			<NoteIconToolbarSlotFill.Slot />
 
 			<ToolbarItem>
 				{ ( toggleProps ) => (

package/src/components/block-styles/menu-items.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { MenuItem, __experimentalText as Text } from '@wordpress/components';
+import { MenuItem, __experimentalText as WCText } from '@wordpress/components';
 import { check } from '@wordpress/icons';
 
 const noop = () => {};
@@ -29,14 +29,14 @@ export default function BlockStylesMenuItems( {
 						onMouseEnter={ () => onHoverStyle( style ) }
 						onMouseLeave={ () => onHoverStyle( null ) }
 					>
-						<Text
+						<WCText
 							as="span"
 							limit={ 18 }
 							ellipsizeMode="tail"
 							truncate
 						>
 							{ menuItemText }
-						</Text>
+						</WCText>
 					</MenuItem>
 				);
 			} ) }

package/src/components/block-switcher/index.js

@@ -6,7 +6,7 @@ import {
 	DropdownMenu,
 	ToolbarGroup,
 	ToolbarItem,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	MenuGroup,
 } from '@wordpress/components';
 import {
@@ -184,9 +184,9 @@ function BlockSwitcherDropdownMenuContents( { onClose, clientIds } ) {
 			) }
 			{ isUsingBindings && (
 				<MenuGroup>
-					<Text className="block-editor-block-switcher__binding-indicator">
+					<WCText className="block-editor-block-switcher__binding-indicator">
 						{ connectedBlockDescription }
-					</Text>
+					</WCText>
 				</MenuGroup>
 			) }
 		</div>

package/src/components/block-switcher/pattern-transformations-menu.js

@@ -6,13 +6,8 @@ import { useState } from '@wordpress/element';
 import { useInstanceId, useViewportMatch } from '@wordpress/compose';
 import { chevronRight } from '@wordpress/icons';
 
-import {
-	Composite,
-	MenuGroup,
-	MenuItem,
-	Popover,
-	VisuallyHidden,
-} from '@wordpress/components';
+import { Composite, MenuGroup, MenuItem, Popover } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 
 /**
  * Internal dependencies

package/src/components/block-toolbar/edit-section-button.js

@@ -58,7 +58,11 @@ export default function EditSectionButton( { clientId } ) {
 	return (
 		<ToolbarGroup>
 			<ToolbarButton onClick={ handleClick }>
-				{ isEditing ? __( 'Exit pattern' ) : __( 'Edit pattern' ) }
+				{ isEditing
+					? /* translators: Button label to leave pattern editing mode. */
+					  __( 'Exit pattern' )
+					: /* translators: Button label to enter pattern editing mode. */
+					  __( 'Edit pattern' ) }
 			</ToolbarButton>
 		</ToolbarGroup>
 	);

package/src/components/block-toolbar/pattern-overrides-dropdown.js

@@ -4,7 +4,7 @@
 import {
 	Popover,
 	ToolbarButton,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useState, useRef } from '@wordpress/element';
@@ -48,7 +48,7 @@ function PatternOverridesPopoverContent( { clientIds, blockTitle } ) {
 		description = __( 'These blocks are editable using overrides.' );
 	}
 
-	return <Text>{ description }</Text>;
+	return <WCText>{ description }</WCText>;
 }
 
 /**

package/src/components/block-variation-transforms/index.js

@@ -7,9 +7,9 @@ import {
 	Button,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
-	VisuallyHidden,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 
@@ -30,7 +30,7 @@ function VariationsButtons( {
 } ) {
 	return (
 		<fieldset className={ className }>
-			<VisuallyHidden as="legend">
+			<VisuallyHidden render={ <legend /> }>
 				{ __( 'Transform to variation' ) }
 			</VisuallyHidden>
 			{ variations.map( ( variation ) => (
@@ -144,7 +144,7 @@ function VariationsToggleGroupControl( {
 	);
 }
 
-function __experimentalBlockVariationTransforms( { blockClientId } ) {
+function BlockVariationTransforms( { blockClientId } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const {
 		activeBlockVariation,
@@ -235,4 +235,4 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 	);
 }
 
-export default __experimentalBlockVariationTransforms;
+export default BlockVariationTransforms;

package/src/components/block-visibility/modal.js

@@ -38,7 +38,6 @@ import {
 	getViewportCheckboxState,
 	getHideEverywhereCheckboxState,
 } from './utils';
-import './style.scss';
 
 const DEFAULT_VIEWPORT_CHECKBOX_VALUES = {
 	[ BLOCK_VISIBILITY_VIEWPORTS.mobile.key ]: false,

package/src/components/block-visibility/viewport-visibility-info.js

@@ -3,7 +3,7 @@
  */
 import {
 	Icon,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	__experimentalHStack as HStack,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
@@ -21,7 +21,7 @@ import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import { deviceTypeKey } from '../../store/private-keys';
 import { BLOCK_VISIBILITY_VIEWPORTS } from './constants';
 
-const { Badge } = unlock( componentsPrivateApis );
+const { Badge: WCBadge } = unlock( componentsPrivateApis );
 const DEFAULT_VISIBILITY_STATE = {
 	currentBlockVisibility: undefined,
 	hasParentHiddenEverywhere: false,
@@ -128,11 +128,11 @@ export default function ViewportVisibilityInfo( { clientId } ) {
 	}
 
 	return (
-		<Badge className="block-editor-block-visibility-info">
+		<WCBadge className="block-editor-block-visibility-info">
 			<HStack spacing={ 2 } justify="start">
 				<Icon icon={ unseen } />
-				<Text>{ label }</Text>
+				<WCText>{ label }</WCText>
 			</HStack>
-		</Badge>
+		</WCBadge>
 	);
 }

package/src/components/collab/note-icon-slot.js

@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const NoteIconSlotFill = createSlotFill( Symbol( 'NoteIconSlotFill' ) );
+
+export default NoteIconSlotFill;

package/src/components/collab/note-icon-toolbar-slot.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const NoteIconToolbarSlotFill = createSlotFill(
+	Symbol( 'NoteIconToolbarSlotFill' )
+);
+
+export default NoteIconToolbarSlotFill;

package/src/components/date-format-picker/index.js

@@ -7,11 +7,11 @@ import { useState, createInterpolateElement } from '@wordpress/element';
 import {
 	TextControl,
 	ExternalLink,
-	VisuallyHidden,
 	ToggleControl,
 	__experimentalVStack as VStack,
 	CustomSelectControl,
 } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 
 // So that we illustrate the different formats in the dropdown properly, show a date that is
 // somewhat recent, has a day greater than 12, and a month with more than three letters.
@@ -45,7 +45,9 @@ export default function DateFormatPicker( {
 			spacing={ 4 }
 			className="block-editor-date-format-picker"
 		>
-			<VisuallyHidden as="legend">{ __( 'Date format' ) }</VisuallyHidden>
+			<VisuallyHidden render={ <legend /> }>
+				{ __( 'Date format' ) }
+			</VisuallyHidden>
 			<ToggleControl
 				label={ __( 'Default format' ) }
 				help={ `${ __( 'Example:' ) }  ${ dateI18n(

package/src/components/dimensions-tool/scale-tool.js

@@ -98,14 +98,14 @@ export default function ScaleTool( {
 
 	return (
 		<ToolsPanelItem
-			label={ __( 'Scale' ) }
+			label={ _x( 'Scale', 'Image scaling options' ) }
 			isShownByDefault={ isShownByDefault }
 			hasValue={ () => displayValue !== defaultValue }
 			onDeselect={ () => onChange( defaultValue ) }
 			panelId={ panelId }
 		>
 			<ToggleGroupControl
-				label={ __( 'Scale' ) }
+				label={ _x( 'Scale', 'Image scaling options' ) }
 				isBlock
 				help={ scaleHelp[ displayValue ] }
 				value={ displayValue }

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

@@ -1,75 +1,178 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { check, chevronDown } from '@wordpress/icons';
-import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import {
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { Stack } from '@wordpress/ui';
 
 /**
- * State control for managing block state styles (hover, focus, etc.).
- * Displays a dropdown menu to select between different states.
+ * 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.
  *
- * @param {Object}   props          Component props.
- * @param {Array}    props.states   Array of available states with value and label.
- * @param {string}   props.value    Currently selected state value.
- * @param {Function} props.onChange Callback when selection changes.
+ * @param {Object}   props                     Component props.
+ * @param {Array}    props.viewportStates      Array of available viewport states.
+ * @param {Array}    props.pseudoStates        Array of available pseudo states.
+ * @param {string}   props.viewportValue       Currently selected viewport value.
+ * @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.
  * @return {Element|null} State control component.
  */
 export default function StateControl( {
-	states = [],
-	value = 'default',
-	onChange,
+	viewportStates = [],
+	pseudoStates = [],
+	viewportValue = 'default',
+	pseudoStateValue = 'default',
+	onChangeViewport,
+	onChangePseudoState,
 } ) {
-	if ( ! states || states.length === 0 ) {
+	if ( ! viewportStates.length && ! pseudoStates.length ) {
 		return null;
 	}
 
-	const stateOptions = [
+	const viewportOptions = [
+		{ label: __( 'Default' ), value: 'default' },
+		...viewportStates.map( ( state ) => ( {
+			label: state.label,
+			value: state.value,
+		} ) ),
+	];
+	const pseudoStateOptions = [
 		{ label: __( 'Default' ), value: 'default' },
-		...states.map( ( state ) => ( {
+		...pseudoStates.map( ( state ) => ( {
 			label: state.label,
 			value: state.value,
 		} ) ),
 	];
 
-	const getCurrentStateLabel = () => {
-		const currentOption = stateOptions.find(
-			( option ) => option.value === value
+	const hasViewportOptions = viewportStates.length > 0;
+	const hasPseudoStateOptions = pseudoStates.length > 0;
+	const triggerLabel = __( 'States' );
+	const activeStates = [];
+
+	if ( hasViewportOptions && viewportValue !== 'default' ) {
+		const selectedViewport = viewportOptions.find(
+			( option ) => option.value === viewportValue
+		);
+
+		if ( selectedViewport ) {
+			activeStates.push( {
+				key: `viewport-${ selectedViewport.value }`,
+				label: selectedViewport.label,
+			} );
+		}
+	}
+
+	if ( hasPseudoStateOptions && pseudoStateValue !== 'default' ) {
+		const selectedPseudoState = pseudoStateOptions.find(
+			( option ) => option.value === pseudoStateValue
 		);
-		return currentOption?.label || __( 'Default' );
-	};
+
+		if ( selectedPseudoState ) {
+			activeStates.push( {
+				key: `pseudo-${ selectedPseudoState.value }`,
+				label: selectedPseudoState.label,
+			} );
+		}
+	}
 
 	return (
-		<DropdownMenu
-			icon={ chevronDown }
-			label={ sprintf(
-				/* translators: %s: Current state (e.g. "Hover", "Focus") */
-				__( 'State: %s' ),
-				getCurrentStateLabel()
-			) }
-			text={ getCurrentStateLabel() }
-			toggleProps={ {
-				size: 'compact',
-				variant: 'tertiary',
-				iconPosition: 'right',
-			} }
+		<Stack
+			direction="column"
+			gap="sm"
+			align="flex-end"
+			className="block-editor-global-styles-state-control"
 		>
-			{ ( { onClose } ) => (
-				<MenuGroup label={ __( 'State' ) }>
-					{ stateOptions.map( ( option ) => (
-						<MenuItem
-							key={ option.value }
-							onClick={ () => {
-								onChange( option.value );
-								onClose();
-							} }
-							icon={ value === option.value ? check : null }
-						>
-							{ option.label }
-						</MenuItem>
-					) ) }
-				</MenuGroup>
-			) }
-		</DropdownMenu>
+			<DropdownMenu
+				icon={ chevronDown }
+				label={ triggerLabel }
+				popoverProps={ {
+					placement: 'right-start',
+				} }
+				text={ triggerLabel }
+				toggleProps={ {
+					size: 'compact',
+					variant: 'tertiary',
+					iconPosition: 'right',
+				} }
+			>
+				{ ( { onClose } ) => (
+					<>
+						{ hasViewportOptions && (
+							<MenuGroup label={ __( 'Viewport' ) }>
+								{ viewportOptions.map( ( option ) => (
+									<MenuItem
+										key={ `viewport-${ option.value }` }
+										onClick={ () => {
+											onChangeViewport?.( option.value );
+											if ( ! hasPseudoStateOptions ) {
+												onClose();
+											}
+										} }
+										icon={
+											viewportValue === option.value
+												? check
+												: null
+										}
+									>
+										{ option.label }
+									</MenuItem>
+								) ) }
+							</MenuGroup>
+						) }
+						{ hasPseudoStateOptions && (
+							<MenuGroup label={ __( 'Pseudo state' ) }>
+								{ pseudoStateOptions.map( ( option ) => (
+									<MenuItem
+										key={ `pseudo-${ option.value }` }
+										onClick={ () => {
+											onChangePseudoState?.(
+												option.value
+											);
+											if ( ! hasViewportOptions ) {
+												onClose();
+											}
+										} }
+										icon={
+											pseudoStateValue === option.value
+												? check
+												: null
+										}
+									>
+										{ option.label }
+									</MenuItem>
+								) ) }
+							</MenuGroup>
+						) }
+					</>
+				) }
+			</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/style.scss

@@ -23,6 +23,15 @@
 	text-align: right;
 }
 
+.block-editor-global-styles-state-control {
+	// Ensure alignment with block heading.
+	margin-top: -$grid-unit-05;
+}
+
+.block-editor-global-styles-state-control__badges {
+	min-height: $grid-unit-30;
+}
+
 .block-editor-global-styles-filters-panel__dropdown,
 .block-editor-global-styles__shadow-dropdown {
 	display: block;

package/src/components/gradients/use-gradient.js

@@ -54,7 +54,7 @@ export function getGradientSlugByValue( gradients, value ) {
 	return gradient && gradient.slug;
 }
 
-export function __experimentalUseGradient( {
+function useGradient( {
 	gradientAttribute = 'gradient',
 	customGradientAttribute = 'customGradient',
 } = {} ) {
@@ -120,3 +120,5 @@ export function __experimentalUseGradient( {
 	}
 	return { gradientClass, gradientValue, setGradient };
 }
+
+export { useGradient as __experimentalUseGradient };

package/src/components/grid/grid-item-movers.js

@@ -7,11 +7,8 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { __, isRTL } from '@wordpress/i18n';
-import {
-	VisuallyHidden,
-	ToolbarButton,
-	ToolbarGroup,
-} from '@wordpress/components';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import {
 	chevronLeft,
 	chevronUp,