@wordpress/block-editor 7.0.1 → 8.0.0

package/build-types/components/block-context/index.d.ts

@@ -7,7 +7,7 @@
  */
 export function BlockContextProvider({ value, children }: BlockContextProviderProps): JSX.Element;
 export default Context;
-export type ReactNode = string | number | boolean | {} | import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)> | import("react").ReactNodeArray | import("react").ReactPortal | null | undefined;
+export type ReactNode = import('react').ReactNode;
 export type BlockContextProviderProps = {
     /**
      * Context value to merge with current

package/build-types/components/block-context/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/block-context/index.js"],"names":[],"mappings":"AAkBA;;;;;;GAMG;AACH,0DAFW,yBAAyB,eAUnC;;;;;;;;WAvBa,OAAO,MAAM,MAAG;;;;cAEhB,SAAS;;AAPvB,qDAAqD;AAErD;;;;;;GAMG;AAEH,wDAAwD;AACxD,uBADW,OAAO,OAAO,EAAE,OAAO,CAAC,OAAO,MAAM,MAAG,CAAC,CAChB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/block-context/index.js"],"names":[],"mappings":"AAkBA;;;;;;GAMG;AACH,0DAFW,yBAAyB,eAUnC;;wBA5Ba,OAAO,OAAO,EAAE,SAAS;;;;;;WAKzB,OAAO,MAAM,MAAG;;;;cAEhB,SAAS;;AAPvB,qDAAqD;AAErD;;;;;;GAMG;AAEH,wDAAwD;AACxD,uBADW,OAAO,OAAO,EAAE,OAAO,CAAC,OAAO,MAAM,MAAG,CAAC,CAChB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "7.0.1",
+	"version": "8.0.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -32,32 +32,34 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.13.10",
-		"@wordpress/a11y": "^3.2.1",
+		"@react-spring/web": "^9.2.4",
+		"@wordpress/a11y": "^3.2.3",
+		"@wordpress/api-fetch": "^5.2.5",
 		"@wordpress/blob": "^3.2.1",
-		"@wordpress/block-serialization-default-parser": "^4.2.1",
-		"@wordpress/blocks": "^11.0.1",
-		"@wordpress/components": "^16.0.0",
-		"@wordpress/compose": "^5.0.1",
-		"@wordpress/data": "^6.0.1",
-		"@wordpress/data-controls": "^2.2.2",
-		"@wordpress/deprecated": "^3.2.1",
-		"@wordpress/dom": "^3.2.2",
-		"@wordpress/element": "^4.0.0",
-		"@wordpress/hooks": "^3.2.0",
-		"@wordpress/html-entities": "^3.2.1",
-		"@wordpress/i18n": "^4.2.1",
-		"@wordpress/icons": "^5.0.1",
+		"@wordpress/block-serialization-default-parser": "^4.2.2",
+		"@wordpress/blocks": "^11.1.3",
+		"@wordpress/components": "^19.0.1",
+		"@wordpress/compose": "^5.0.5",
+		"@wordpress/data": "^6.1.3",
+		"@wordpress/deprecated": "^3.2.2",
+		"@wordpress/dom": "^3.2.6",
+		"@wordpress/element": "^4.0.3",
+		"@wordpress/hooks": "^3.2.1",
+		"@wordpress/html-entities": "^3.2.2",
+		"@wordpress/i18n": "^4.2.3",
+		"@wordpress/icons": "^6.1.0",
 		"@wordpress/is-shallow-equal": "^4.2.0",
-		"@wordpress/keyboard-shortcuts": "^3.0.1",
-		"@wordpress/keycodes": "^3.2.1",
-		"@wordpress/notices": "^3.2.2",
-		"@wordpress/rich-text": "^5.0.1",
-		"@wordpress/shortcode": "^3.2.1",
-		"@wordpress/token-list": "^2.2.0",
-		"@wordpress/url": "^3.2.1",
-		"@wordpress/warning": "^2.2.1",
-		"@wordpress/wordcount": "^3.2.1",
+		"@wordpress/keyboard-shortcuts": "^3.0.5",
+		"@wordpress/keycodes": "^3.2.3",
+		"@wordpress/notices": "^3.2.6",
+		"@wordpress/rich-text": "^5.0.5",
+		"@wordpress/shortcode": "^3.2.2",
+		"@wordpress/token-list": "^2.2.1",
+		"@wordpress/url": "^3.3.0",
+		"@wordpress/warning": "^2.2.2",
+		"@wordpress/wordcount": "^3.2.2",
 		"classnames": "^2.3.1",
+		"colord": "^2.7.0",
 		"css-mediaquery": "^0.1.2",
 		"diff": "^4.0.2",
 		"dom-scroll-into-view": "^1.2.1",
@@ -65,14 +67,13 @@
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
 		"react-autosize-textarea": "^7.1.0",
-		"react-spring": "^8.0.19",
+		"react-easy-crop": "^3.0.0",
 		"redux-multi": "^0.1.12",
 		"rememo": "^3.0.0",
-		"tinycolor2": "^1.4.2",
 		"traverse": "^0.6.6"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "8b67fbd424bc67f81c2d825877f0fae726d6363a"
+	"gitHead": "393c2b5533837fd637e998d23f0124c081a10df0"
 }

package/src/components/autocomplete/index.js

@@ -12,7 +12,7 @@ import {
 	__unstableUseAutocompleteProps as useAutocompleteProps,
 } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
-import { getDefaultBlockName } from '@wordpress/blocks';
+import { getDefaultBlockName, getBlockSupport } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -33,7 +33,10 @@ function useCompleters( { completers = EMPTY_ARRAY } ) {
 	return useMemo( () => {
 		let filteredCompleters = completers;
 
-		if ( name === getDefaultBlockName() ) {
+		if (
+			name === getDefaultBlockName() ||
+			getBlockSupport( name, '__experimentalSlashInserter', false )
+		) {
 			filteredCompleters = filteredCompleters.concat( [
 				blockAutocompleter,
 			] );

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

@@ -28,11 +28,11 @@ export default function BlockActions( {
 		canInsertBlockType,
 		getBlockRootClientId,
 		getBlocksByClientId,
-		getTemplateLock,
-	} = useSelect( ( select ) => select( blockEditorStore ), [] );
+		canMoveBlocks,
+		canRemoveBlocks,
+	} = useSelect( blockEditorStore );
 	const { getDefaultBlockName, getGroupingBlockName } = useSelect(
-		( select ) => select( blocksStore ),
-		[]
+		blocksStore
 	);
 
 	const blocks = getBlocksByClientId( clientIds );
@@ -50,6 +50,9 @@ export default function BlockActions( {
 		rootClientId
 	);
 
+	const canMove = canMoveBlocks( clientIds, rootClientId );
+	const canRemove = canRemoveBlocks( clientIds, rootClientId );
+
 	const {
 		removeBlocks,
 		replaceBlocks,
@@ -67,7 +70,8 @@ export default function BlockActions( {
 	return children( {
 		canDuplicate,
 		canInsertDefaultBlock,
-		isLocked: !! getTemplateLock( rootClientId ),
+		canMove,
+		canRemove,
 		rootClientId,
 		blocks,
 		onDuplicate() {

package/src/components/block-alignment-control/style.scss

@@ -0,0 +1,5 @@
+.block-editor-block-alignment-control__menu-group {
+	.components-menu-item__info {
+		margin-top: 0;
+	}
+}

package/src/components/block-alignment-control/test/__snapshots__/index.js.snap

@@ -4,6 +4,20 @@ exports[`BlockAlignmentUI should match snapshot 1`] = `
 <ToolbarGroup
   controls={
     Array [
+      Object {
+        "icon": <SVG
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <Path
+            d="M5 15h14V9H5v6zm0 4.8h14v-1.5H5v1.5zM5 4.2v1.5h14V4.2H5z"
+          />
+        </SVG>,
+        "isActive": false,
+        "onClick": [Function],
+        "role": "menuitemradio",
+        "title": "None",
+      },
       Object {
         "icon": <SVG
           viewBox="0 0 24 24"
@@ -24,7 +38,7 @@ exports[`BlockAlignmentUI should match snapshot 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <Path
-            d="M5 15h14V9H5v6zm0 4.8h14v-1.5H5v1.5zM5 4.2v1.5h14V4.2H5z"
+            d="M7 9v6h10V9H7zM5 19.8h14v-1.5H5v1.5zM5 4.3v1.5h14V4.3H5z"
           />
         </SVG>,
         "isActive": false,

package/src/components/block-alignment-control/test/index.native.js

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { render, fireEvent } from 'test/helpers';
+
+/**
+ * Internal dependencies
+ */
+import BlockAlignmentUI from '../ui';
+
+it( 'should call onChange with undefined when the control is already active', () => {
+	const onChangeMock = jest.fn();
+	const screen = render(
+		<BlockAlignmentUI value="right" onChange={ onChangeMock } />
+	);
+	const alignButton = screen.getByA11yLabel( 'Align' );
+	fireEvent.press( alignButton );
+	const rightAlignmentButton = screen.getByA11yLabel( 'Align right' );
+	fireEvent.press( rightAlignmentButton );
+
+	expect( onChangeMock ).toHaveBeenCalledTimes( 1 );
+	expect( onChangeMock ).toHaveBeenCalledWith( undefined );
+} );
+
+it( 'should call onChange with alignment value when the control is inactive', () => {
+	const onChangeMock = jest.fn();
+	const screen = render(
+		<BlockAlignmentUI value="left" onChange={ onChangeMock } />
+	);
+	const alignButton = screen.getByA11yLabel( 'Align' );
+	fireEvent.press( alignButton );
+	const centerAlignmentButton = screen.getByA11yLabel( 'Align center' );
+	fireEvent.press( centerAlignmentButton );
+
+	expect( onChangeMock ).toHaveBeenCalledTimes( 1 );
+	expect( onChangeMock ).toHaveBeenCalledWith( 'center' );
+} );

package/src/components/block-alignment-control/ui.js

@@ -1,15 +1,27 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { ToolbarDropdownMenu, ToolbarGroup } from '@wordpress/components';
 import {
+	ToolbarDropdownMenu,
+	ToolbarGroup,
+	MenuGroup,
+	MenuItem,
+} from '@wordpress/components';
+import {
+	alignNone,
 	positionCenter,
 	positionLeft,
 	positionRight,
 	stretchFullWidth,
 	stretchWide,
 } from '@wordpress/icons';
+import { Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -17,6 +29,10 @@ import {
 import useAvailableAlignments from './use-available-alignments';
 
 const BLOCK_ALIGNMENTS_CONTROLS = {
+	none: {
+		icon: alignNone,
+		title: __( 'None' ),
+	},
 	left: {
 		icon: positionLeft,
 		title: __( 'Align left' ),
@@ -39,7 +55,7 @@ const BLOCK_ALIGNMENTS_CONTROLS = {
 	},
 };
 
-const DEFAULT_CONTROL = 'center';
+const DEFAULT_CONTROL = 'none';
 
 const POPOVER_PROPS = {
 	isAlternate: true,
@@ -53,12 +69,14 @@ function BlockAlignmentUI( {
 	isCollapsed = true,
 } ) {
 	const enabledControls = useAvailableAlignments( controls );
-	if ( enabledControls.length === 0 ) {
+	const hasEnabledControls = !! enabledControls.length;
+
+	if ( ! hasEnabledControls ) {
 		return null;
 	}
 
-	function applyOrUnset( align ) {
-		return () => onChange( value === align ? undefined : align );
+	function onChangeAlignment( align ) {
+		onChange( [ value, 'none' ].includes( align ) ? undefined : align );
 	}
 
 	const activeAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ value ];
@@ -66,29 +84,82 @@ function BlockAlignmentUI( {
 		BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
 
 	const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
-	const extraProps = isToolbar ? { isCollapsed } : {};
+	const commonProps = {
+		popoverProps: POPOVER_PROPS,
+		icon: activeAlignmentControl
+			? activeAlignmentControl.icon
+			: defaultAlignmentControl.icon,
+		label: __( 'Align' ),
+		toggleProps: { describedBy: __( 'Change alignment' ) },
+	};
+	const extraProps =
+		isToolbar || Platform.isNative
+			? {
+					isCollapsed: isToolbar ? isCollapsed : undefined,
+					controls: enabledControls.map(
+						( { name: controlName } ) => {
+							return {
+								...BLOCK_ALIGNMENTS_CONTROLS[ controlName ],
+								isActive:
+									value === controlName ||
+									( ! value && controlName === 'none' ),
+								role: isCollapsed ? 'menuitemradio' : undefined,
+								onClick: () => onChangeAlignment( controlName ),
+							};
+						}
+					),
+			  }
+			: {
+					children: ( { onClose } ) => {
+						return (
+							<>
+								<MenuGroup className="block-editor-block-alignment-control__menu-group">
+									{ enabledControls.map(
+										( { name: controlName, info } ) => {
+											const {
+												icon,
+												title,
+											} = BLOCK_ALIGNMENTS_CONTROLS[
+												controlName
+											];
+											// If no value is provided, mark as selected the `none` option.
+											const isSelected =
+												controlName === value ||
+												( ! value &&
+													controlName === 'none' );
+											return (
+												<MenuItem
+													key={ controlName }
+													icon={ icon }
+													iconPosition="left"
+													className={ classNames(
+														'components-dropdown-menu__menu-item',
+														{
+															'is-active': isSelected,
+														}
+													) }
+													isSelected={ isSelected }
+													onClick={ () => {
+														onChangeAlignment(
+															controlName
+														);
+														onClose();
+													} }
+													role="menuitemradio"
+													info={ info }
+												>
+													{ title }
+												</MenuItem>
+											);
+										}
+									) }
+								</MenuGroup>
+							</>
+						);
+					},
+			  };
 
-	return (
-		<UIComponent
-			popoverProps={ POPOVER_PROPS }
-			icon={
-				activeAlignmentControl
-					? activeAlignmentControl.icon
-					: defaultAlignmentControl.icon
-			}
-			label={ __( 'Align' ) }
-			toggleProps={ { describedBy: __( 'Change alignment' ) } }
-			controls={ enabledControls.map( ( control ) => {
-				return {
-					...BLOCK_ALIGNMENTS_CONTROLS[ control ],
-					isActive: value === control,
-					role: isCollapsed ? 'menuitemradio' : undefined,
-					onClick: applyOrUnset( control ),
-				};
-			} ) }
-			{ ...extraProps }
-		/>
-	);
+	return <UIComponent { ...commonProps } { ...extraProps } />;
 }
 
 export default BlockAlignmentUI;

package/src/components/block-alignment-control/use-available-alignments.js

@@ -10,10 +10,14 @@ import { useLayout } from '../block-list/layout';
 import { store as blockEditorStore } from '../../store';
 import { getLayoutType } from '../../layouts';
 
-const DEFAULT_CONTROLS = [ 'left', 'center', 'right', 'wide', 'full' ];
+const DEFAULT_CONTROLS = [ 'none', 'left', 'center', 'right', 'wide', 'full' ];
 const WIDE_CONTROLS = [ 'wide', 'full' ];
 
 export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
+	// Always add the `none` option if not exists.
+	if ( ! controls.includes( 'none' ) ) {
+		controls = [ 'none', ...controls ];
+	}
 	const { wideControlsEnabled = false, themeSupportsLayout } = useSelect(
 		( select ) => {
 			const { getSettings } = select( blockEditorStore );
@@ -30,9 +34,15 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 	const layoutAlignments = layoutType.getAlignments( layout );
 
 	if ( themeSupportsLayout ) {
-		return layoutAlignments.filter( ( control ) =>
-			controls.includes( control )
+		const alignments = layoutAlignments.filter(
+			( { name: alignmentName } ) => controls.includes( alignmentName )
 		);
+		// While we treat `none` as an alignment, we shouldn't return it if no
+		// other alignments exist.
+		if ( alignments.length === 1 && alignments[ 0 ].name === 'none' ) {
+			return [];
+		}
+		return alignments;
 	}
 
 	// Starting here, it's the fallback for themes not supporting the layout config.
@@ -40,13 +50,24 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 		return [];
 	}
 	const { alignments: availableAlignments = DEFAULT_CONTROLS } = layout;
-	const enabledControls = controls.filter(
-		( control ) =>
-			( layout.alignments || // Ignore the global wideAlignment check if the layout explicitely defines alignments.
-				wideControlsEnabled ||
-				! WIDE_CONTROLS.includes( control ) ) &&
-			availableAlignments.includes( control )
-	);
+	const enabledControls = controls
+		.filter(
+			( control ) =>
+				( layout.alignments || // Ignore the global wideAlignment check if the layout explicitely defines alignments.
+					wideControlsEnabled ||
+					! WIDE_CONTROLS.includes( control ) ) &&
+				availableAlignments.includes( control )
+		)
+		.map( ( enabledControl ) => ( { name: enabledControl } ) );
+
+	// While we treat `none` as an alignment, we shouldn't return it if no
+	// other alignments exist.
+	if (
+		enabledControls.length === 1 &&
+		enabledControls[ 0 ].name === 'none'
+	) {
+		return [];
+	}
 
 	return enabledControls;
 }

package/src/components/block-content-overlay/index.js

@@ -87,13 +87,10 @@ export default function BlockContentOverlay( {
 			className={ classes }
 			onMouseEnter={ () => setIsHovered( true ) }
 			onMouseLeave={ () => setIsHovered( false ) }
+			onMouseUp={
+				isOverlayActive ? () => setIsOverlayActive( false ) : undefined
+			}
 		>
-			{ isOverlayActive && (
-				<div
-					className={ `${ baseClassName }__overlay` }
-					onMouseUp={ () => setIsOverlayActive( false ) }
-				/>
-			) }
 			{ wrapperProps?.children }
 		</TagName>
 	);

package/src/components/block-content-overlay/style.scss

@@ -1,12 +1,6 @@
-// Specificity required to ensure overlay width is not restricted to that
-// of standard block content.  The overlay's width should be as wide as
-// its children require.
-.editor-styles-wrapper .wp-block .block-editor-block-content-overlay__overlay {
-	max-width: none;
-}
-
 .block-editor-block-content-overlay {
-	.block-editor-block-content-overlay__overlay {
+	&.overlay-active::before {
+		content: "";
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -16,26 +10,20 @@
 		border: none;
 		border-radius: $radius-block-ui;
 		z-index: z-index(".block-editor-block-content-overlay__overlay");
+		pointer-events: none;
 	}
 
-	&:hover:not(.is-dragging-blocks),
-	&.parent-highlighted {
-		> .block-editor-block-content-overlay__overlay {
-			background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
-			box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
-		}
+	&:hover:not(.is-dragging-blocks).overlay-active::before,
+	&.parent-highlighted.overlay-active::before {
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
+		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
 	}
 
-	&.overlay-active:not(.is-dragging-blocks) {
-		*:not(.block-editor-block-content-overlay__overlay) {
-			pointer-events: none;
-		}
+	&.overlay-active:not(.is-dragging-blocks) * {
+		pointer-events: none;
 	}
 
 	&.is-dragging-blocks {
 		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
-		.block-editor-block-content-overlay__overlay {
-			pointer-events: none;
-		}
 	}
 }

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

@@ -15,18 +15,21 @@ import {
 /**
  * Internal dependencies
  */
-import useDisplayBlockControls from '../use-display-block-controls';
-import groups from './groups';
+import useBlockControlsFill from './hook';
 
 export default function BlockControlsFill( {
 	group = 'default',
 	controls,
 	children,
+	__experimentalShareWithChildBlocks = false,
 } ) {
-	if ( ! useDisplayBlockControls() ) {
+	const Fill = useBlockControlsFill(
+		group,
+		__experimentalShareWithChildBlocks
+	);
+	if ( ! Fill ) {
 		return null;
 	}
-	const Fill = groups[ group ].Fill;
 
 	return (
 		<StyleProvider document={ document }>

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

@@ -7,12 +7,14 @@ const BlockControlsDefault = createSlotFill( 'BlockControls' );
 const BlockControlsBlock = createSlotFill( 'BlockControlsBlock' );
 const BlockControlsInline = createSlotFill( 'BlockFormatControls' );
 const BlockControlsOther = createSlotFill( 'BlockControlsOther' );
+const BlockControlsParent = createSlotFill( 'BlockControlsParent' );
 
 const groups = {
 	default: BlockControlsDefault,
 	block: BlockControlsBlock,
 	inline: BlockControlsInline,
 	other: BlockControlsOther,
+	parent: BlockControlsParent,
 };
 
 export default groups;

package/src/components/block-controls/hook.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blocksStore } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import groups from './groups';
+import { store as blockEditorStore } from '../../store';
+import { useBlockEditContext } from '../block-edit/context';
+import useDisplayBlockControls from '../use-display-block-controls';
+
+export default function useBlockControlsFill( group, shareWithChildBlocks ) {
+	const isDisplayed = useDisplayBlockControls();
+	const { clientId } = useBlockEditContext();
+	const isParentDisplayed = useSelect(
+		( select ) => {
+			const { getBlockName, hasSelectedInnerBlock } = select(
+				blockEditorStore
+			);
+			const { hasBlockSupport } = select( blocksStore );
+			return (
+				shareWithChildBlocks &&
+				hasBlockSupport(
+					getBlockName( clientId ),
+					'__experimentalExposeControlsToChildren',
+					false
+				) &&
+				hasSelectedInnerBlock( clientId )
+			);
+		},
+		[ shareWithChildBlocks, clientId ]
+	);
+
+	if ( isDisplayed ) {
+		return groups[ group ]?.Fill;
+	}
+	if ( isParentDisplayed ) {
+		return groups.parent.Fill;
+	}
+	return null;
+}

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

@@ -45,8 +45,23 @@
 	}
 }
 
-// This hides the block being dragged.
-// The effect is that the block being dragged appears to be "lifted".
-.is-dragging {
-	display: none !important;
+// This creates a "slot" where the block you're dragging appeared.
+// We use !important as one of the rules are meant to be overriden.
+.block-editor-block-list__layout .is-dragging {
+	background-color: currentColor !important;
+	opacity: 0.05 !important;
+	border-radius: $radius-block-ui !important;
+
+	// Disabling pointer events during the drag event is necessary,
+	// lest the block might affect your drag operation.
+	pointer-events: none !important;
+
+	// Hide the multi selection indicator when dragging.
+	&::selection {
+		background: transparent !important;
+	}
+
+	&::after {
+		content: none !important;
+	}
 }

package/src/components/block-edit/context.js

@@ -3,11 +3,12 @@
  */
 import { createContext, useContext } from '@wordpress/element';
 
-const Context = createContext( {
+export const DEFAULT_BLOCK_EDIT_CONTEXT = {
 	name: '',
 	isSelected: false,
-	clientId: null,
-} );
+};
+
+const Context = createContext( DEFAULT_BLOCK_EDIT_CONTEXT );
 const { Provider } = Context;
 
 export { Provider as BlockEditContextProvider };