@wordpress/block-editor 15.17.0 → 15.18.0

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-switcher/style.scss

@@ -48,7 +48,7 @@
 		margin-top: $grid-unit-20;
 
 		.block-editor-block-preview__container {
-			cursor: pointer;
+			cursor: var(--wpds-cursor-control);
 		}
 
 		.block-editor-block-switcher__preview-patterns-container-list__item {
@@ -76,7 +76,7 @@
 				padding: $grid-unit-05;
 				font-size: 12px;
 				text-align: center;
-				cursor: pointer;
+				cursor: var(--wpds-cursor-control);
 			}
 		}
 	}

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 ) => (

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,11 +21,11 @@ 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,
-	selectedDeviceType: BLOCK_VISIBILITY_VIEWPORTS.desktop.value,
+	selectedDeviceType: BLOCK_VISIBILITY_VIEWPORTS.desktop.key,
 };
 
 export default function ViewportVisibilityInfo( { clientId } ) {
@@ -49,7 +49,7 @@ export default function ViewportVisibilityInfo( { clientId } ) {
 					getBlockAttributes( clientId )?.metadata?.blockVisibility,
 				selectedDeviceType:
 					getSettings()?.[ deviceTypeKey ]?.toLowerCase() ||
-					BLOCK_VISIBILITY_VIEWPORTS.desktop.value,
+					BLOCK_VISIBILITY_VIEWPORTS.desktop.key,
 				hasParentHiddenEverywhere:
 					isBlockParentHiddenEverywhere( clientId ),
 			};
@@ -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/global-styles/color-panel.js

@@ -10,8 +10,6 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalHStack as HStack,
-	// TODO: Replace this ZStack with ad hoc CSS.
-	// eslint-disable-next-line @wordpress/use-recommended-components
 	__experimentalZStack as ZStack,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	ColorIndicator,

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

@@ -33,69 +33,63 @@ import { setImmutably } from '../../utils/object';
 const AXIAL_SIDES = [ 'horizontal', 'vertical' ];
 
 export function useHasDimensionsPanel( settings ) {
-	const hasContentSize = useHasContentSize( settings );
-	const hasWideSize = useHasWideSize( settings );
-	const hasPadding = useHasPadding( settings );
-	const hasMargin = useHasMargin( settings );
-	const hasGap = useHasGap( settings );
-	const hasHeight = useHasHeight( settings );
-	const hasMinHeight = useHasMinHeight( settings );
-	const hasWidth = useHasWidth( settings );
-	const hasAspectRatio = useHasAspectRatio( settings );
-	const hasChildLayout = useHasChildLayout( settings );
-
 	return (
 		Platform.OS === 'web' &&
-		( hasContentSize ||
-			hasWideSize ||
-			hasPadding ||
-			hasMargin ||
-			hasGap ||
-			hasHeight ||
-			hasMinHeight ||
-			hasWidth ||
-			hasAspectRatio ||
-			hasChildLayout )
+		( hasContentSize( settings ) ||
+			hasWideSize( settings ) ||
+			hasPadding( settings ) ||
+			hasMargin( settings ) ||
+			hasGap( settings ) ||
+			hasHeight( settings ) ||
+			hasMinHeight( settings ) ||
+			hasMinWidth( settings ) ||
+			hasWidth( settings ) ||
+			hasAspectRatio( settings ) ||
+			hasChildLayout( settings ) )
 	);
 }
 
-function useHasContentSize( settings ) {
+function hasContentSize( settings ) {
 	return settings?.layout?.contentSize;
 }
 
-function useHasWideSize( settings ) {
+function hasWideSize( settings ) {
 	return settings?.layout?.wideSize;
 }
 
-function useHasPadding( settings ) {
+function hasPadding( settings ) {
 	return settings?.spacing?.padding;
 }
 
-function useHasMargin( settings ) {
+function hasMargin( settings ) {
 	return settings?.spacing?.margin;
 }
 
-function useHasGap( settings ) {
+function hasGap( settings ) {
 	return settings?.spacing?.blockGap;
 }
 
-function useHasHeight( settings ) {
+function hasHeight( settings ) {
 	return settings?.dimensions?.height;
 }
 
-function useHasMinHeight( settings ) {
+function hasMinHeight( settings ) {
 	return settings?.dimensions?.minHeight;
 }
 
-function useHasWidth( settings ) {
+function hasMinWidth( settings ) {
+	return settings?.dimensions?.minWidth;
+}
+
+function hasWidth( settings ) {
 	return settings?.dimensions?.width;
 }
 
-function useHasAspectRatio( settings ) {
+function hasAspectRatio( settings ) {
 	return settings?.dimensions?.aspectRatio;
 }
 
-function useHasChildLayout( settings ) {
+function hasChildLayout( settings ) {
 	const {
 		type: parentLayoutType = 'default',
 		default: { type: defaultParentLayoutType = 'default' } = {},
@@ -111,7 +105,7 @@ function useHasChildLayout( settings ) {
 	return !! settings?.layout && support;
 }
 
-function useHasSpacingPresets( settings ) {
+function hasSpacingPresets( settings ) {
 	const { defaultSpacingSizes, spacingSizes } = settings?.spacing || {};
 	return (
 		( defaultSpacingSizes !== false &&
@@ -219,6 +213,7 @@ const DEFAULT_CONTROLS = {
 	blockGap: true,
 	height: true,
 	minHeight: true,
+	minWidth: true,
 	width: true,
 	aspectRatio: true,
 	childLayout: true,
@@ -257,7 +252,7 @@ export default function DimensionsPanel( {
 		);
 	};
 
-	const showSpacingPresetsControl = useHasSpacingPresets( settings );
+	const showSpacingPresetsControl = hasSpacingPresets( settings );
 	const units = useCustomUnits( {
 		availableUnits: settings?.spacing?.units || [
 			'%',
@@ -272,9 +267,40 @@ export default function DimensionsPanel( {
 	const minimumMargin = -Infinity;
 	const [ minMarginValue, setMinMarginValue ] = useState( minimumMargin );
 
+	const resetAllFilter = useCallback( ( previousValue ) => {
+		return {
+			...previousValue,
+			layout: cleanEmptyObject( {
+				...previousValue?.layout,
+				contentSize: undefined,
+				wideSize: undefined,
+				selfStretch: undefined,
+				flexSize: undefined,
+				columnStart: undefined,
+				rowStart: undefined,
+				columnSpan: undefined,
+				rowSpan: undefined,
+			} ),
+			spacing: {
+				...previousValue?.spacing,
+				padding: undefined,
+				margin: undefined,
+				blockGap: undefined,
+			},
+			dimensions: {
+				...previousValue?.dimensions,
+				height: undefined,
+				minHeight: undefined,
+				minWidth: undefined,
+				aspectRatio: undefined,
+				width: undefined,
+			},
+		};
+	}, [] );
+
 	// Content Width
 	const showContentSizeControl =
-		useHasContentSize( settings ) && includeLayoutControls;
+		hasContentSize( settings ) && includeLayoutControls;
 	const contentSizeValue = decodeValue( inheritedValue?.layout?.contentSize );
 	const setContentSizeValue = ( newValue ) => {
 		onChange(
@@ -290,7 +316,7 @@ export default function DimensionsPanel( {
 
 	// Wide Width
 	const showWideSizeControl =
-		useHasWideSize( settings ) && includeLayoutControls;
+		hasWideSize( settings ) && includeLayoutControls;
 	const wideSizeValue = decodeValue( inheritedValue?.layout?.wideSize );
 	const setWideSizeValue = ( newValue ) => {
 		onChange(
@@ -305,7 +331,7 @@ export default function DimensionsPanel( {
 	const resetWideSizeValue = () => setWideSizeValue( undefined );
 
 	// Padding
-	const showPaddingControl = useHasPadding( settings );
+	const showPaddingControl = hasPadding( settings );
 	const rawPadding = decodeValue( inheritedValue?.spacing?.padding );
 	const paddingValues = splitStyleValue( rawPadding );
 	const paddingSides = Array.isArray( settings?.spacing?.padding )
@@ -325,7 +351,7 @@ export default function DimensionsPanel( {
 	const onMouseOverPadding = () => onVisualize( 'padding' );
 
 	// Margin
-	const showMarginControl = useHasMargin( settings );
+	const showMarginControl = hasMargin( settings );
 	const rawMargin = decodeValue( inheritedValue?.spacing?.margin );
 	const marginValues = splitStyleValue( rawMargin );
 	const marginSides = Array.isArray( settings?.spacing?.margin )
@@ -345,7 +371,7 @@ export default function DimensionsPanel( {
 	const onMouseOverMargin = () => onVisualize( 'margin' );
 
 	// Block Gap
-	const showGapControl = useHasGap( settings );
+	const showGapControl = hasGap( settings );
 	const gapSides = Array.isArray( settings?.spacing?.blockGap )
 		? settings?.spacing?.blockGap
 		: settings?.spacing?.blockGap?.sides;
@@ -376,7 +402,7 @@ export default function DimensionsPanel( {
 	const hasGapValue = () => !! value?.spacing?.blockGap;
 
 	// Min Height
-	const showMinHeightControl = useHasMinHeight( settings );
+	const showMinHeightControl = hasMinHeight( settings );
 	const minHeightValue = decodeValue( inheritedValue?.dimensions?.minHeight );
 	const setMinHeightValue = ( newValue ) => {
 		const tempValue = setImmutably(
@@ -399,7 +425,7 @@ export default function DimensionsPanel( {
 	const hasMinHeightValue = () => !! value?.dimensions?.minHeight;
 
 	// Height
-	const showHeightControl = useHasHeight( settings );
+	const showHeightControl = hasHeight( settings );
 	const heightValue = decodeValue( inheritedValue?.dimensions?.height );
 	const setHeightValue = ( newValue ) => {
 		const tempValue = setImmutably(
@@ -421,8 +447,21 @@ export default function DimensionsPanel( {
 	};
 	const hasHeightValue = () => !! value?.dimensions?.height;
 
+	// Min Width
+	const showMinWidthControl = hasMinWidth( settings );
+	const minWidthValue = decodeValue( inheritedValue?.dimensions?.minWidth );
+	const setMinWidthValue = ( newValue ) => {
+		onChange(
+			setImmutably( value, [ 'dimensions', 'minWidth' ], newValue )
+		);
+	};
+	const resetMinWidthValue = () => {
+		setMinWidthValue( undefined );
+	};
+	const hasMinWidthValue = () => !! value?.dimensions?.minWidth;
+
 	// Width
-	const showWidthControl = useHasWidth( settings );
+	const showWidthControl = hasWidth( settings );
 	const widthValue = decodeValue( inheritedValue?.dimensions?.width );
 	const setWidthValue = ( newValue ) => {
 		onChange( setImmutably( value, [ 'dimensions', 'width' ], newValue ) );
@@ -433,7 +472,7 @@ export default function DimensionsPanel( {
 	const hasWidthValue = () => !! value?.dimensions?.width;
 
 	// Aspect Ratio
-	const showAspectRatioControl = useHasAspectRatio( settings );
+	const showAspectRatioControl = hasAspectRatio( settings );
 	const aspectRatioValue = decodeValue(
 		inheritedValue?.dimensions?.aspectRatio
 	);
@@ -451,7 +490,7 @@ export default function DimensionsPanel( {
 	const hasAspectRatioValue = () => !! value?.dimensions?.aspectRatio;
 
 	// Child Layout
-	const showChildLayoutControl = useHasChildLayout( settings );
+	const showChildLayoutControl = hasChildLayout( settings );
 	const childLayout = inheritedValue?.layout;
 
 	const setChildLayout = ( newChildLayout ) => {
@@ -463,36 +502,6 @@ export default function DimensionsPanel( {
 		} );
 	};
 
-	const resetAllFilter = useCallback( ( previousValue ) => {
-		return {
-			...previousValue,
-			layout: cleanEmptyObject( {
-				...previousValue?.layout,
-				contentSize: undefined,
-				wideSize: undefined,
-				selfStretch: undefined,
-				flexSize: undefined,
-				columnStart: undefined,
-				rowStart: undefined,
-				columnSpan: undefined,
-				rowSpan: undefined,
-			} ),
-			spacing: {
-				...previousValue?.spacing,
-				padding: undefined,
-				margin: undefined,
-				blockGap: undefined,
-			},
-			dimensions: {
-				...previousValue?.dimensions,
-				height: undefined,
-				minHeight: undefined,
-				aspectRatio: undefined,
-				width: undefined,
-			},
-		};
-	}, [] );
-
 	const onMouseLeaveControls = () => onVisualize( false );
 
 	return (
@@ -739,6 +748,24 @@ export default function DimensionsPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
+			{ showMinWidthControl && (
+				<ToolsPanelItem
+					hasValue={ hasMinWidthValue }
+					label={ __( 'Minimum width' ) }
+					onDeselect={ resetMinWidthValue }
+					isShownByDefault={
+						defaultControls.minWidth ?? DEFAULT_CONTROLS.minWidth
+					}
+					panelId={ panelId }
+				>
+					<DimensionControl
+						label={ __( 'Minimum width' ) }
+						value={ minWidthValue }
+						onChange={ setMinWidthValue }
+						dimensionSizes={ dimensions?.dimensionSizes }
+					/>
+				</ToolsPanelItem>
+			) }
 			{ showHeightControl && (
 				<ToolsPanelItem
 					hasValue={ hasHeightValue }

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

@@ -10,8 +10,6 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalHStack as HStack,
-	// TODO: Replace this ZStack with ad hoc CSS.
-	// eslint-disable-next-line @wordpress/use-recommended-components
 	__experimentalZStack as ZStack,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	MenuGroup,

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

@@ -166,14 +166,16 @@ export function useSettingsForBlockElement(
 			}
 		} );
 
-		[ 'aspectRatio', 'height', 'minHeight', 'width' ].forEach( ( key ) => {
-			if ( ! supportedStyles.includes( key ) ) {
-				updatedSettings.dimensions = {
-					...updatedSettings.dimensions,
-					[ key ]: false,
-				};
+		[ 'aspectRatio', 'height', 'minHeight', 'minWidth', 'width' ].forEach(
+			( key ) => {
+				if ( ! supportedStyles.includes( key ) ) {
+					updatedSettings.dimensions = {
+						...updatedSettings.dimensions,
+						[ key ]: false,
+					};
+				}
 			}
-		} );
+		);
 
 		[ 'radius', 'color', 'style', 'width' ].forEach( ( key ) => {
 			if (

package/src/components/global-styles/style.scss

@@ -71,7 +71,7 @@
 	color: $gray-800;
 	border: $gray-200 $border-width solid;
 	border-radius: $radius-small;
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 	display: inline-flex;
 	align-items: center;
 

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,