@wordpress/block-editor 15.17.0 → 15.18.0

package/build-style/content-rtl.css

@@ -236,9 +236,6 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 .block-editor-block-list__layout .block-editor-block-list__block.has-negative-margin.is-selected, .block-editor-block-list__layout .block-editor-block-list__block.has-negative-margin.has-child-selected {
   z-index: 20;
 }
-.block-editor-block-list__layout .block-editor-block-list__block .reusable-block-edit-panel * {
-  z-index: 1;
-}
 .block-editor-block-list__layout .block-editor-block-list__block {
   /**
    * Notices
@@ -835,7 +832,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   min-height: 0;
 }
 .block-editor-media-placeholder.is-appender:hover {
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
 }
 

package/build-style/content.css

@@ -236,9 +236,6 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 .block-editor-block-list__layout .block-editor-block-list__block.has-negative-margin.is-selected, .block-editor-block-list__layout .block-editor-block-list__block.has-negative-margin.has-child-selected {
   z-index: 20;
 }
-.block-editor-block-list__layout .block-editor-block-list__block .reusable-block-edit-panel * {
-  z-index: 1;
-}
 .block-editor-block-list__layout .block-editor-block-list__block {
   /**
    * Notices
@@ -836,7 +833,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   min-height: 0;
 }
 .block-editor-media-placeholder.is-appender:hover {
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
 }
 

package/build-style/style-rtl.css

@@ -173,7 +173,7 @@
 }
 
 .block-editor-global-styles-background-panel__dropdown-toggle {
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   background: transparent;
   border: none;
   height: 100%;
@@ -980,7 +980,7 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-block-patterns-list__list-item {
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   margin-bottom: 16px;
   position: relative;
 }
@@ -1230,7 +1230,7 @@ iframe[name=editor-canvas] {
   margin-top: 16px;
 }
 .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-preview__container {
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
 }
 .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item {
   height: 100%;
@@ -1256,7 +1256,7 @@ iframe[name=editor-canvas] {
   padding: 4px;
   font-size: 12px;
   text-align: center;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
 }
 
 .block-editor-block-switcher__no-transforms {
@@ -1306,7 +1306,7 @@ iframe[name=editor-canvas] {
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-preview__container,
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container div[role=button] {
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item {
   scroll-margin: 5px 0;
@@ -1330,7 +1330,7 @@ iframe[name=editor-canvas] {
   padding-top: 8px;
   font-size: 12px;
   text-align: center;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-preview__container {
   min-height: 100px;
@@ -1685,7 +1685,7 @@ iframe[name=editor-canvas] {
   color: #2f2f2f;
   border: #e0e0e0 1px solid;
   border-radius: 2px;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   display: inline-flex;
   align-items: center;
   padding: 0;
@@ -1999,7 +1999,7 @@ iframe[name=editor-canvas] {
   padding: 8px;
   align-items: stretch;
   justify-content: center;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   background: transparent;
   word-break: break-word;
 }
@@ -2855,7 +2855,7 @@ iframe[name=editor-canvas] {
 .block-editor-list-view__expander {
   height: 24px;
   width: 24px;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
 }
 
 .block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander {
@@ -3265,7 +3265,7 @@ iframe[name=editor-canvas] {
   color: #757575;
   display: block;
   font-size: 13px;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   background: #fff;
   width: 100%;
   border: none;
@@ -4006,7 +4006,7 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 .block-editor-inserter__toggle.components-button {
   display: inline-flex;
   align-items: center;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   border: none;
   outline: none;
   padding: 0;
@@ -4379,7 +4379,7 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 
 .block-editor-inserter__media-list__list-item {
   position: relative;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   margin-bottom: 24px;
 }
 .block-editor-inserter__media-list__list-item.is-placeholder {

package/build-style/style.css

@@ -173,7 +173,7 @@
 }
 
 .block-editor-global-styles-background-panel__dropdown-toggle {
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   background: transparent;
   border: none;
   height: 100%;
@@ -980,7 +980,7 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-block-patterns-list__list-item {
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   margin-bottom: 16px;
   position: relative;
 }
@@ -1230,7 +1230,7 @@ iframe[name=editor-canvas] {
   margin-top: 16px;
 }
 .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-preview__container {
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
 }
 .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item {
   height: 100%;
@@ -1256,7 +1256,7 @@ iframe[name=editor-canvas] {
   padding: 4px;
   font-size: 12px;
   text-align: center;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
 }
 
 .block-editor-block-switcher__no-transforms {
@@ -1306,7 +1306,7 @@ iframe[name=editor-canvas] {
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-preview__container,
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container div[role=button] {
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item {
   scroll-margin: 5px 0;
@@ -1330,7 +1330,7 @@ iframe[name=editor-canvas] {
   padding-top: 8px;
   font-size: 12px;
   text-align: center;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-preview__container {
   min-height: 100px;
@@ -1685,7 +1685,7 @@ iframe[name=editor-canvas] {
   color: #2f2f2f;
   border: #e0e0e0 1px solid;
   border-radius: 2px;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   display: inline-flex;
   align-items: center;
   padding: 0;
@@ -2000,7 +2000,7 @@ iframe[name=editor-canvas] {
   padding: 8px;
   align-items: stretch;
   justify-content: center;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   background: transparent;
   word-break: break-word;
 }
@@ -2856,7 +2856,7 @@ iframe[name=editor-canvas] {
 .block-editor-list-view__expander {
   height: 24px;
   width: 24px;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
 }
 
 .block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander {
@@ -3267,7 +3267,7 @@ iframe[name=editor-canvas] {
   color: #757575;
   display: block;
   font-size: 13px;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   background: #fff;
   width: 100%;
   border: none;
@@ -4008,7 +4008,7 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 .block-editor-inserter__toggle.components-button {
   display: inline-flex;
   align-items: center;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   border: none;
   outline: none;
   padding: 0;
@@ -4381,7 +4381,7 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 
 .block-editor-inserter__media-list__list-item {
   position: relative;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   margin-bottom: 24px;
 }
 .block-editor-inserter__media-list__list-item.is-placeholder {

package/build-types/utils/dom.d.ts

@@ -35,6 +35,13 @@ export function getBlockClientId(node: Node | null): string | undefined;
  * @return {DOMRect} Union of the two rectangles.
  */
 export function rectUnion(rect1: DOMRect, rect2: DOMRect): DOMRect;
+/**
+ * Returns whether an element is visible.
+ *
+ * @param {Element} element Element.
+ * @return {boolean} Whether the element is visible.
+ */
+export function isElementVisible(element: Element): boolean;
 /**
  * Returns the bounding rectangle of an element, with special handling for blocks
  * that have visible overflowing children (defined in WITH_OVERFLOW_ELEMENT_BLOCKS).

package/build-types/utils/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/utils/dom.js"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AACH,iCALW,OAAO,KACP,OAAO,GAEN,OAAO,CAIlB;AAED;;;;;;;;;GASG;AACH,gDANW,OAAO,WACP,OAAO,GAEN,OAAO,CAQlB;AAED;;;;;;;GAOG;AACH,uCALW,IAAI,OAAC,GAEJ,MAAM,GAAC,SAAS,CAoB3B;AAED;;;;;;GAMG;AACH,iCAJW,OAAO,SACP,OAAO,GACN,OAAO,CASlB;AA+DD;;;;;;;;;;;;GAYG;AACH,0CAHW,OAAO,GACN,OAAO,CAoDlB;AAhED,oDAAkE"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/utils/dom.js"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AACH,iCALW,OAAO,KACP,OAAO,GAEN,OAAO,CAIlB;AAED;;;;;;;;;GASG;AACH,gDANW,OAAO,WACP,OAAO,GAEN,OAAO,CAQlB;AAED;;;;;;;GAOG;AACH,uCALW,IAAI,OAAC,GAEJ,MAAM,GAAC,SAAS,CAoB3B;AAED;;;;;;GAMG;AACH,iCAJW,OAAO,SACP,OAAO,GACN,OAAO,CASlB;AAED;;;;;GAKG;AACH,0CAHW,OAAO,GACN,OAAO,CAsClB;AAmBD;;;;;;;;;;;;GAYG;AACH,0CAHW,OAAO,GACN,OAAO,CAoDlB;AAhED,oDAAkE"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.17.0",
+	"version": "15.18.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -61,42 +61,43 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.44.0",
-		"@wordpress/base-styles": "^6.20.0",
-		"@wordpress/blob": "^4.44.0",
-		"@wordpress/block-serialization-default-parser": "^5.44.0",
-		"@wordpress/blocks": "^15.17.0",
-		"@wordpress/commands": "^1.44.0",
-		"@wordpress/components": "^32.6.0",
-		"@wordpress/compose": "^7.44.0",
-		"@wordpress/data": "^10.44.0",
-		"@wordpress/dataviews": "^14.1.0",
-		"@wordpress/date": "^5.44.0",
-		"@wordpress/deprecated": "^4.44.0",
-		"@wordpress/dom": "^4.44.0",
-		"@wordpress/element": "^6.44.0",
-		"@wordpress/escape-html": "^3.44.0",
-		"@wordpress/global-styles-engine": "^1.11.0",
-		"@wordpress/hooks": "^4.44.0",
-		"@wordpress/html-entities": "^4.44.0",
-		"@wordpress/i18n": "^6.17.0",
-		"@wordpress/icons": "^12.2.0",
-		"@wordpress/image-cropper": "^1.8.0",
-		"@wordpress/interactivity": "^6.44.0",
-		"@wordpress/is-shallow-equal": "^5.44.0",
-		"@wordpress/keyboard-shortcuts": "^5.44.0",
-		"@wordpress/keycodes": "^4.44.0",
-		"@wordpress/notices": "^5.44.0",
-		"@wordpress/preferences": "^4.44.0",
-		"@wordpress/priority-queue": "^3.44.0",
-		"@wordpress/private-apis": "^1.44.0",
-		"@wordpress/rich-text": "^7.44.0",
-		"@wordpress/style-engine": "^2.44.0",
-		"@wordpress/token-list": "^3.44.0",
-		"@wordpress/upload-media": "^0.29.0",
-		"@wordpress/url": "^4.44.0",
-		"@wordpress/warning": "^3.44.0",
-		"@wordpress/wordcount": "^4.44.0",
+		"@wordpress/a11y": "^4.45.0",
+		"@wordpress/base-styles": "^7.0.0",
+		"@wordpress/blob": "^4.45.0",
+		"@wordpress/block-serialization-default-parser": "^5.45.0",
+		"@wordpress/blocks": "^15.18.0",
+		"@wordpress/commands": "^1.45.0",
+		"@wordpress/components": "^33.0.0",
+		"@wordpress/compose": "^7.45.0",
+		"@wordpress/data": "^10.45.0",
+		"@wordpress/dataviews": "^14.2.0",
+		"@wordpress/date": "^5.45.0",
+		"@wordpress/deprecated": "^4.45.0",
+		"@wordpress/dom": "^4.45.0",
+		"@wordpress/element": "^6.45.0",
+		"@wordpress/escape-html": "^3.45.0",
+		"@wordpress/global-styles-engine": "^1.12.0",
+		"@wordpress/hooks": "^4.45.0",
+		"@wordpress/html-entities": "^4.45.0",
+		"@wordpress/i18n": "^6.18.0",
+		"@wordpress/icons": "^13.0.0",
+		"@wordpress/image-cropper": "^1.9.0",
+		"@wordpress/interactivity": "^6.45.0",
+		"@wordpress/is-shallow-equal": "^5.45.0",
+		"@wordpress/keyboard-shortcuts": "^5.45.0",
+		"@wordpress/keycodes": "^4.45.0",
+		"@wordpress/notices": "^5.45.0",
+		"@wordpress/preferences": "^4.45.0",
+		"@wordpress/priority-queue": "^3.45.0",
+		"@wordpress/private-apis": "^1.45.0",
+		"@wordpress/rich-text": "^7.45.0",
+		"@wordpress/style-engine": "^2.45.0",
+		"@wordpress/token-list": "^3.45.0",
+		"@wordpress/ui": "^0.12.0",
+		"@wordpress/upload-media": "^0.30.0",
+		"@wordpress/url": "^4.45.0",
+		"@wordpress/warning": "^3.45.0",
+		"@wordpress/wordcount": "^4.45.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -123,5 +124,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b862d8c84121a47bbeff882f6c87e61681ce2e0d"
+	"gitHead": "8c229eaed0e88c9827e2da3d73a78f9ddd77714b"
 }

package/src/components/autocomplete/index.js

@@ -3,7 +3,7 @@
  */
 import { applyFilters, hasFilter } from '@wordpress/hooks';
 import {
-	Autocomplete,
+	Autocomplete as WCAutocomplete,
 	__unstableUseAutocompleteProps as useAutocompleteProps,
 } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
@@ -68,7 +68,9 @@ export function useBlockEditorAutocompleteProps( props ) {
  * @type {React.FC}
  */
 function BlockEditorAutocomplete( props ) {
-	return <Autocomplete { ...props } completers={ useCompleters( props ) } />;
+	return (
+		<WCAutocomplete { ...props } completers={ useCompleters( props ) } />
+	);
 }
 
 /**

package/src/components/background-image-control/index.js

@@ -16,7 +16,6 @@ import {
 	FlexBlock,
 	FocalPointPicker,
 	MenuItem,
-	VisuallyHidden,
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
 	Dropdown,
@@ -25,6 +24,7 @@ import {
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	Button,
 } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import { reset as resetIcon } from '@wordpress/icons';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
@@ -162,7 +162,7 @@ function InspectorImagePreviewItem( {
 					>
 						{ label }
 					</Truncate>
-					<VisuallyHidden as="span">
+					<VisuallyHidden render={ <span /> }>
 						{ imgUrl
 							? sprintf(
 									/* translators: %s: file name */

package/src/components/background-image-control/style.scss

@@ -78,7 +78,7 @@
 }
 
 .block-editor-global-styles-background-panel__dropdown-toggle {
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 	background: transparent;
 	border: none;
 	height: 100%;

package/src/components/block-allowed-blocks/modal.js

@@ -6,7 +6,7 @@ import {
 	Flex,
 	FlexItem,
 	Modal,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
@@ -58,11 +58,11 @@ export default function BlockAllowedBlocksModal( {
 				} }
 				spacing="4"
 			>
-				<Text>
+				<WCText>
 					{ __(
 						'Select which blocks can be added inside this container.'
 					) }
-				</Text>
+				</WCText>
 				<BlockManager
 					blockTypes={ blockTypes }
 					selectedBlockTypes={ currentSelectedBlockTypes }

package/src/components/block-bindings/attribute-control.js

@@ -13,7 +13,7 @@ import {
 } from '@wordpress/blocks';
 import {
 	__experimentalItem as Item,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalVStack as VStack,
 	privateApis as componentsPrivateApis,
@@ -142,14 +142,14 @@ export default function BlockBindingsAttributeControl( {
 						className="block-editor-bindings__item"
 						spacing={ 0 }
 					>
-						<Text truncate>{ attribute }</Text>
-						<Text
+						<WCText truncate>{ attribute }</WCText>
+						<WCText
 							truncate
 							variant={ isValid ? 'muted' : undefined }
 							isDestructive={ ! isValid }
 						>
 							{ displayText }
-						</Text>
+						</WCText>
 					</VStack>
 				</Menu.TriggerButton>
 				{ ! isAttributeReadOnly && (

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

@@ -9,7 +9,7 @@ import clsx from 'clsx';
 import {
 	Button,
 	Icon,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
 	privateApis as componentsPrivateApis,
@@ -32,7 +32,7 @@ import { unlock } from '../../lock-unlock';
 import { store as blockEditorStore } from '../../store';
 import BlockIcon from '../block-icon';
 
-const { Badge } = unlock( componentsPrivateApis );
+const { Badge: WCBadge } = unlock( componentsPrivateApis );
 
 function OptionalParentSelectButton( { children, onClick } ) {
 	if ( ! onClick ) {
@@ -197,7 +197,7 @@ function BlockCard( {
 								{ ! parentClientId &&
 									! isChild &&
 									!! name?.length && (
-										<Badge>{ title }</Badge>
+										<WCBadge>{ title }</WCBadge>
 									) }
 							</TitleElement>
 							{ children }
@@ -205,9 +205,9 @@ function BlockCard( {
 					</OptionalParentSelectButton>
 				</HStack>
 				{ ! parentClientId && ! isChild && description && (
-					<Text className="block-editor-block-card__description">
+					<WCText className="block-editor-block-card__description">
 						{ description }
-					</Text>
+					</WCText>
 				) }
 			</VStack>
 		</div>

package/src/components/block-list/content.scss

@@ -153,10 +153,6 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 		}
 	}
 
-	.reusable-block-edit-panel * {
-		z-index: z-index(".block-editor-block-list__block .reusable-block-edit-panel *");
-	}
-
 	/**
 	 * Notices
 	 */

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

@@ -33,7 +33,7 @@
 
 			.block-editor-block-preview__container,
 			div[role="button"] {
-				cursor: pointer;
+				cursor: var(--wpds-cursor-control);
 			}
 
 			.block-editor-block-pattern-setup-list__item {
@@ -60,7 +60,7 @@
 					padding-top: $grid-unit-10;
 					font-size: 12px;
 					text-align: center;
-					cursor: pointer;
+					cursor: var(--wpds-cursor-control);
 				}
 
 				.block-editor-block-preview__container {

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

@@ -2,7 +2,7 @@
 @use "@wordpress/base-styles/colors" as *;
 
 .block-editor-block-patterns-list__list-item {
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 	margin-bottom: $grid-unit-20;
 
 	// The list item contains absolutely positioned visually hidden text,