@wordpress/block-editor 17.0.2-next.v.202608281122.0 → 17.1.0

package/src/components/alignment-control/test/__snapshots__/{index.jsx.snap → index.jsdom.test.jsx.snap}

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`AlignmentUI should allow custom alignment controls to be specified 1`] = `
+exports[`AlignmentUI > should allow custom alignment controls to be specified 1`] = `
 <div>
   <div
     class="components-toolbar"
@@ -18,15 +18,18 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M13 5.5H4V4h9v1.5Zm7 7H4V11h16v1.5Zm-7 7H4V18h9v1.5Z"
+            d="M4 5H13M4 12H20M4 19H13"
+            vector-effect="non-scaling-stroke"
           />
         </svg>
       </button>
@@ -42,15 +45,18 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M7.5 5.5h9V4h-9v1.5Zm-3.5 7h16V11H4v1.5Zm3.5 7h9V18h-9v1.5Z"
+            d="M7.5 5H16.5M4 12H20M7.5 19H16.5"
+            vector-effect="non-scaling-stroke"
           />
         </svg>
       </button>
@@ -59,7 +65,7 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
 </div>
 `;
 
-exports[`AlignmentUI should match snapshot when controls are hidden 1`] = `
+exports[`AlignmentUI > should match snapshot when controls are hidden 1`] = `
 <div>
   <div
     class="components-dropdown components-dropdown-menu components-toolbar"
@@ -75,15 +81,18 @@ exports[`AlignmentUI should match snapshot when controls are hidden 1`] = `
     >
       <svg
         aria-hidden="true"
-        fill="currentColor"
         focusable="false"
         height="24"
+        stroke="currentColor"
+        stroke-width="1.5"
+        style="fill: none;"
         viewBox="0 0 24 24"
         width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M13 5.5H4V4h9v1.5Zm7 7H4V11h16v1.5Zm-7 7H4V18h9v1.5Z"
+          d="M4 5H13M4 12H20M4 19H13"
+          vector-effect="non-scaling-stroke"
         />
       </svg>
     </button>
@@ -91,7 +100,7 @@ exports[`AlignmentUI should match snapshot when controls are hidden 1`] = `
 </div>
 `;
 
-exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
+exports[`AlignmentUI > should match snapshot when controls are visible 1`] = `
 <div>
   <div
     class="components-toolbar"
@@ -109,15 +118,18 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M13 5.5H4V4h9v1.5Zm7 7H4V11h16v1.5Zm-7 7H4V18h9v1.5Z"
+            d="M4 5H13M4 12H20M4 19H13"
+            vector-effect="non-scaling-stroke"
           />
         </svg>
       </button>
@@ -133,15 +145,18 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M7.5 5.5h9V4h-9v1.5Zm-3.5 7h16V11H4v1.5Zm3.5 7h9V18h-9v1.5Z"
+            d="M7.5 5H16.5M4 12H20M7.5 19H16.5"
+            vector-effect="non-scaling-stroke"
           />
         </svg>
       </button>
@@ -157,15 +172,18 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M11.111 5.5H20V4h-8.889v1.5ZM4 12.5h16V11H4v1.5Zm7.111 7H20V18h-8.889v1.5Z"
+            d="M11 5H20M4 12H20M11 19H20"
+            vector-effect="non-scaling-stroke"
           />
         </svg>
       </button>

package/src/components/alignment-control/test/{index.jsx → index.jsdom.test.jsx}

@@ -1,3 +1,4 @@
+import { afterEach, describe, expect, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { alignLeft, alignCenter } from '@wordpress/icons';
@@ -5,7 +6,7 @@ import AlignmentUI from '../ui';
 
 describe( 'AlignmentUI', () => {
 	const alignment = 'left';
-	const onChangeSpy = jest.fn();
+	const onChangeSpy = vi.fn();
 
 	afterEach( () => {
 		onChangeSpy.mockClear();

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

@@ -360,6 +360,25 @@ function BackgroundImageControls( {
 		focusToggleButton( containerRef );
 	};
 
+	/*
+	 * Sets an image entered as a direct URL. There is no attachment `id`:
+	 * `source: 'url'` records that the image is externally hosted.
+	 */
+	const onSelectURL = ( newURL ) => {
+		if ( ! newURL || newURL === url ) {
+			return;
+		}
+		onChange(
+			setImmutably( style, [ 'background' ], {
+				...style?.background,
+				backgroundImage: {
+					url: newURL,
+					source: 'url',
+				},
+			} )
+		);
+	};
+
 	// Drag and drop callback, restricting image to one.
 	const onFilesDrop = ( filesList ) => {
 		getSettings().mediaUpload( {
@@ -382,6 +401,17 @@ function BackgroundImageControls( {
 			} )
 		);
 	const canRemove = ! hasValue && hasBackgroundImageValue( inheritedValue );
+	// theme.json accepts a plain string for `backgroundImage`; the editor
+	// stores an object with a `url`. Resolve either for the URL field.
+	const rawURL =
+		typeof style?.background?.backgroundImage === 'string'
+			? style.background.backgroundImage
+			: url;
+	// Offer only absolute `http(s)` addresses to the URL field. A theme.json
+	// value can be theme-relative (`file:./…`), which the field could neither
+	// display usefully nor re-apply without breaking the image, and removing
+	// an inherited image stores the `'none'` sentinel string.
+	const currentURL = /^https?:\/\//.test( rawURL ?? '' ) ? rawURL : undefined;
 	const imgLabel = title || getFilename( url ) || __( 'Image' );
 
 	return (
@@ -389,10 +419,11 @@ function BackgroundImageControls( {
 			{ isUploading && <LoadingSpinner /> }
 			<MediaReplaceFlow
 				mediaId={ id }
-				mediaURL={ url }
+				mediaURL={ currentURL }
 				allowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }
 				accept="image/*"
 				onSelect={ onSelectMedia }
+				onSelectURL={ onSelectURL }
 				popoverProps={ {
 					className: clsx( {
 						'block-editor-global-styles-background-panel__media-replace-popover':

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

@@ -170,11 +170,13 @@
 
 .block-editor-global-styles-background-panel__media-replace-popover {
 	.components-popover__content {
-		// width of block-editor-global-styles-background-panel__dropdown-content-wrapper minus padding.
-		width: 226px;
+		// Sized by the widest child: the URL field (LinkControl min-width),
+		// with the menu items stretching to match.
+		width: auto;
 	}
 
-	.components-button {
+	// Scoped to menu items so the URL field's buttons keep their own padding.
+	.components-menu-item__button.components-button {
 		padding: 0 $grid-unit-10;
 	}
 

package/src/components/background-image-control/test/{index.js → index.jsdom.test.js}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { backgroundPositionToCoords, coordsToBackgroundPosition } from '../';
 
 describe( 'backgroundPositionToCoords', () => {

package/src/components/block-alignment-control/test/__snapshots__/{index.jsx.snap → index.jsdom.test.jsx.snap}

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`BlockAlignmentUI should match snapshot when controls are hidden 1`] = `
+exports[`BlockAlignmentUI > should match snapshot when controls are hidden 1`] = `
 <div>
   <div
     class="components-dropdown components-dropdown-menu components-toolbar"
@@ -16,15 +16,26 @@ exports[`BlockAlignmentUI should match snapshot when controls are hidden 1`] = `
     >
       <svg
         aria-hidden="true"
-        fill="currentColor"
         focusable="false"
         height="24"
+        stroke="currentColor"
+        stroke-width="1.5"
+        style="fill: none;"
         viewBox="0 0 24 24"
         width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M5 5.5h8V4H5v1.5ZM5 20h8v-1.5H5V20ZM19 9H5v6h14V9Z"
+          d="M5 4.75H13M5 19.25H13"
+          vector-effect="non-scaling-stroke"
+        />
+        <rect
+          fill="currentColor"
+          height="6"
+          stroke="none"
+          width="14"
+          x="5"
+          y="9"
         />
       </svg>
     </button>
@@ -32,7 +43,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are hidden 1`] = `
 </div>
 `;
 
-exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] = `
+exports[`BlockAlignmentUI > should match snapshot when controls are visible 1`] = `
 <div>
   <div
     class="components-toolbar"
@@ -49,15 +60,26 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M19 5.5H5V4h14v1.5ZM19 20H5v-1.5h14V20ZM5 9h14v6H5V9Z"
+            d="M5 5H19M5 19H19"
+            vector-effect="non-scaling-stroke"
+          />
+          <rect
+            fill="currentColor"
+            height="6"
+            stroke="none"
+            width="14"
+            x="5"
+            y="9"
           />
         </svg>
       </button>
@@ -72,15 +94,26 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M5 5.5h8V4H5v1.5ZM5 20h8v-1.5H5V20ZM19 9H5v6h14V9Z"
+            d="M5 4.75H13M5 19.25H13"
+            vector-effect="non-scaling-stroke"
+          />
+          <rect
+            fill="currentColor"
+            height="6"
+            stroke="none"
+            width="14"
+            x="5"
+            y="9"
           />
         </svg>
       </button>
@@ -95,15 +128,26 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M19 5.5H5V4h14v1.5ZM19 20H5v-1.5h14V20ZM7 9h10v6H7V9Z"
+            d="M5 4.75H19M5 19.25H19"
+            vector-effect="non-scaling-stroke"
+          />
+          <rect
+            fill="currentColor"
+            height="6"
+            stroke="none"
+            width="10"
+            x="7"
+            y="9"
           />
         </svg>
       </button>
@@ -118,15 +162,26 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M19 5.5h-8V4h8v1.5ZM19 20h-8v-1.5h8V20ZM5 9h14v6H5V9Z"
+            d="M11 4.75H19M11 19.25H19"
+            vector-effect="non-scaling-stroke"
+          />
+          <rect
+            fill="currentColor"
+            height="6"
+            stroke="none"
+            width="14"
+            x="5"
+            y="9"
           />
         </svg>
       </button>

package/src/components/block-alignment-control/test/{index.jsx → index.jsdom.test.jsx}

@@ -1,10 +1,11 @@
+import { afterEach, describe, expect, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import BlockAlignmentUI from '../ui';
 
 describe( 'BlockAlignmentUI', () => {
 	const alignment = 'left';
-	const onChange = jest.fn();
+	const onChange = vi.fn();
 
 	afterEach( () => {
 		onChange.mockClear();

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

@@ -3,12 +3,12 @@ import {
 	Flex,
 	FlexItem,
 	Modal,
-	__experimentalText as WCText,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { _x, __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
+import { Text } from '@wordpress/ui';
 import { store as blockEditorStore } from '../../store';
 import BlockManager from '../block-manager';
 
@@ -51,11 +51,11 @@ export default function BlockAllowedBlocksModal( {
 				} }
 				spacing="4"
 			>
-				<WCText>
+				<Text>
 					{ __(
 						'Select which blocks can be added inside this container.'
 					) }
-				</WCText>
+				</Text>
 				<BlockManager
 					blockTypes={ blockTypes }
 					selectedBlockTypes={ currentSelectedBlockTypes }

package/src/components/block-bindings/test/{use-block-bindings-utils.js → use-block-bindings-utils.jsdom.test.js}

@@ -1,11 +1,12 @@
+import { afterAll, beforeAll, beforeEach, describe, expect, it } from 'vitest';
 import { renderHook } from '@testing-library/react';
+import { registerCoreBlocks } from '@wordpress/block-library';
 import { dispatch, select } from '@wordpress/data';
 import {
 	createBlock,
 	getBlockTypes,
 	unregisterBlockType,
 } from '@wordpress/blocks';
-import { registerCoreBlocks } from '@wordpress/block-library';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useBlockBindingsUtils } from '../';
 

package/src/components/block-breadcrumb/test/__snapshots__/{index.jsx.snap → index.jsdom.test.jsx.snap}

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`BlockBreadcrumb should render correctly 1`] = `
+exports[`BlockBreadcrumb > should render correctly 1`] = `
 <div>
   <ul
     aria-label="Block breadcrumb"

package/src/components/block-breadcrumb/test/{index.jsx → index.jsdom.test.jsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it, test } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import BlockBreadcrumb from '../';
 

package/src/components/block-compare/test/__snapshots__/{block-view.jsx.snap → block-view.jsdom.test.jsx.snap}

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`BlockView should match snapshot 1`] = `
+exports[`BlockView > should match snapshot 1`] = `
 <div>
   <div
     class="class"

package/src/components/block-compare/test/{block-view.jsx → block-view.jsdom.test.jsx}

@@ -1,3 +1,4 @@
+import { describe, expect, test } from 'vitest';
 import { render } from '@testing-library/react';
 import BlockView from '../block-view';
 

package/src/components/block-controls/test/{index.jsx → index.jsdom.test.jsx}

@@ -1,3 +1,4 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import {
 	registerBlockType,

package/src/components/block-edit/edit.jsx

@@ -113,7 +113,7 @@ const EditWithGeneratedProps = ( props ) => {
 					let values = {};
 					if ( ! source.getValues ) {
 						Object.keys( bindings ).forEach( ( attr ) => {
-							// Default to the the source label when `getValues` doesn't exist.
+							// Default to the source label when `getValues` doesn't exist.
 							values[ attr ] = source.label;
 						} );
 					} else {

package/src/components/block-edit/test/{edit.jsx → edit.jsdom.test.jsx}

@@ -1,3 +1,4 @@
+import { afterEach, describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import {
 	registerBlockType,

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

@@ -15,12 +15,6 @@
 	&.has-colors {
 		svg {
 			fill: currentColor;
-
-			// Optimize for high contrast modes.
-			// See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.
-			@media (forced-colors: active) {
-				fill: CanvasText;
-			}
 		}
 	}
 

package/src/components/block-icon/style.scss

@@ -15,12 +15,6 @@
 	&.has-colors {
 		svg {
 			fill: currentColor;
-
-			// Optimize for high contrast modes.
-			// See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.
-			@media (forced-colors: active) {
-				fill: CanvasText;
-			}
 		}
 	}
 

package/src/components/block-icon/test/__snapshots__/{index.jsx.snap → index.jsdom.test.jsx.snap}

@@ -7,15 +7,19 @@ exports[`BlockIcon renders a Icon 1`] = `
   >
     <svg
       aria-hidden="true"
-      fill="currentColor"
       focusable="false"
       height="24"
+      stroke="currentColor"
+      stroke-width="1.5"
+      style="fill: none;"
       viewBox="0 0 24 24"
       width="24"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 4.5h14c.3 0 .5.2.5.5v8.4l-3-2.9c-.3-.3-.8-.3-1 0L11.9 14 9 12c-.3-.2-.6-.2-.8 0l-3.6 2.6V5c-.1-.3.1-.5.4-.5zm14 15H5c-.3 0-.5-.2-.5-.5v-2.4l4.1-3 3 1.9c.3.2.7.2.9-.1L16 12l3.5 3.4V19c0 .3-.2.5-.5.5z"
+        d="M3.75 16.2031L8.6 12.7L12 15L16 11L20.25 15.2517M5 20.25H19C19.6904 20.25 20.25 19.6904 20.25 19V5C20.25 4.30964 19.6904 3.75 19 3.75H5C4.30964 3.75 3.75 4.30964 3.75 5V19C3.75 19.6904 4.30964 20.25 5 20.25Z"
+        stroke-linejoin="round"
+        vector-effect="non-scaling-stroke"
       />
     </svg>
   </span>

package/src/components/block-inspector/index.jsx

@@ -29,7 +29,6 @@ import InspectorControlsLastItem from '../inspector-controls/last-item';
 import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
 import PositionControls from '../inspector-controls-tabs/position-controls-panel';
 import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
-import { useBorderPanelLabel } from '../../hooks/border';
 import { BlockStateBadges, BlockStatesControl } from '../../hooks/states';
 import ContentTab from '../inspector-controls-tabs/content-tab';
 import ViewportVisibilityInfo from '../block-visibility/viewport-visibility-info';
@@ -42,12 +41,10 @@ import {
 } from '../../hooks/block-style-state';
 
 function StyleInspectorSlots( {
-	clientId,
 	showAdvancedControls = true,
 	showPositionControls = true,
 	showBindingsControls = true,
 } ) {
-	const borderPanelLabel = useBorderPanelLabel( { clientId } );
 	return (
 		<>
 			<InspectorControls.Slot />
@@ -70,7 +67,7 @@ function StyleInspectorSlots( {
 				group="dimensions"
 				label={ __( 'Dimensions' ) }
 			/>
-			<InspectorControls.Slot group="border" label={ borderPanelLabel } />
+			<InspectorControls.Slot group="border" label={ __( 'Borders' ) } />
 			<InspectorControls.Slot
 				group="elements"
 				label={ __( 'Elements' ) }
@@ -97,7 +94,6 @@ function StyleStateInspectorSlots( {
 	isSectionBlock,
 	selectedBlockStyleState,
 } ) {
-	const borderPanelLabel = useBorderPanelLabel( { clientId } );
 	const isViewportStyleState =
 		hasViewportBlockStyleState( selectedBlockStyleState ) &&
 		! hasPseudoBlockStyleState( selectedBlockStyleState );
@@ -142,7 +138,7 @@ function StyleStateInspectorSlots( {
 					/>
 					<InspectorControls.Slot
 						group="border"
-						label={ borderPanelLabel }
+						label={ __( 'Borders' ) }
 					/>
 					<InspectorControls.Slot
 						group="elements"
@@ -530,11 +526,7 @@ const BlockInspectorSingleBlock = ( {
 					<InspectorControls.Slot group="content" />
 					<InspectorControls.Slot group="list" ref={ listViewRef } />
 					<ListViewContentPopover listViewRef={ listViewRef } />
-					{ ! isSectionBlock && (
-						<StyleInspectorSlots
-							clientId={ renderedBlockClientId }
-						/>
-					) }
+					{ ! isSectionBlock && <StyleInspectorSlots /> }
 				</>
 			) }
 			{ ! isEditingStyleState && <InspectorControlsLastItem.Slot /> }

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

@@ -80,13 +80,16 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 		}
 	}
 
-	// Block highlight, and navigation mode, and focus.
+	// Block highlight, and navigation mode, and focus, and hover where the
+	// grab cursor shows what a drag would take.
 	// This piece of code has gone back and forth between using a pseudo element
 	// vs. styling the block directly. Ultimately we likely need a pseudo element
 	// (unless styles like focus and selection overlay can be rendered as separate elements),
 	// since things like border-radius need to be able to be set on the block itself.
 	.block-editor-block-list__block.is-highlighted,
 	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected,
+	.block-editor-block-list__block.is-hovered-draggable[draggable="true"]:not(.is-multi-selected),
+	.block-editor-block-list__block.is-hovered-draggable[data-draggable="true"]:not(.is-multi-selected),
 	.block-editor-block-list__block:not([contenteditable="true"]):focus {
 		outline: none;