@wordpress/block-editor 16.0.1-next.v.202607070741.0 → 16.1.0

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

@@ -30,6 +30,7 @@ import { ListViewContentPopover } from '../inspector-controls/list-view-content-
 import InspectorControls from '../inspector-controls';
 import { BlockInspectorPreTabsSlot } from './inspector-pre-tabs-slot-fill';
 import { default as InspectorControlsTabs } from '../inspector-controls-tabs';
+import { SectionStyleControls } from '../inspector-controls-tabs/styles-tab';
 import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-controls-tabs';
 import InspectorControlsLastItem from '../inspector-controls/last-item';
 import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
@@ -41,6 +42,7 @@ import ContentTab from '../inspector-controls-tabs/content-tab';
 import ViewportVisibilityInfo from '../block-visibility/viewport-visibility-info';
 import { unlock } from '../../lock-unlock';
 import {
+	BlockStyleStateProvider,
 	hasPseudoBlockStyleState,
 	hasViewportBlockStyleState,
 	isDefaultBlockStyleState,
@@ -95,43 +97,67 @@ function StyleInspectorSlots( {
 	);
 }
 
-function StyleStateInspectorSlots( { blockName, selectedBlockStyleState } ) {
+function StyleStateInspectorSlots( {
+	blockName,
+	clientId,
+	contentClientIds,
+	isSectionBlock,
+	selectedBlockStyleState,
+} ) {
 	const borderPanelLabel = useBorderPanelLabel( { blockName } );
 	const showLayoutControls =
 		hasViewportBlockStyleState( selectedBlockStyleState ) &&
 		! hasPseudoBlockStyleState( selectedBlockStyleState );
+	const showSectionStyleControls =
+		isSectionBlock && blockName !== 'core/template-part';
 	return (
 		<>
-			<InspectorControls.Slot
-				group="typography"
-				label={ __( 'Typography' ) }
-			/>
-			<InspectorControls.Slot
-				group="color"
-				label={ __( 'Color' ) }
-				className="color-block-support-panel__inner-wrapper"
-			/>
-			<InspectorControls.Slot
-				group="background"
-				label={ __( 'Background' ) }
-				className="background-block-support-panel__inner-wrapper"
-			/>
-			{ showLayoutControls && (
-				<InspectorControls.Slot
-					group="layout"
-					label={ __( 'Layout' ) }
-				/>
+			{ showSectionStyleControls && (
+				<BlockStyleStateProvider value={ selectedBlockStyleState }>
+					<SectionStyleControls
+						blockName={ blockName }
+						clientId={ clientId }
+						contentClientIds={ contentClientIds }
+					/>
+				</BlockStyleStateProvider>
+			) }
+			{ ! showSectionStyleControls && (
+				<>
+					<InspectorControls.Slot
+						group="typography"
+						label={ __( 'Typography' ) }
+					/>
+					<InspectorControls.Slot
+						group="color"
+						label={ __( 'Color' ) }
+						className="color-block-support-panel__inner-wrapper"
+					/>
+					<InspectorControls.Slot
+						group="background"
+						label={ __( 'Background' ) }
+						className="background-block-support-panel__inner-wrapper"
+					/>
+					{ showLayoutControls && (
+						<InspectorControls.Slot
+							group="layout"
+							label={ __( 'Layout' ) }
+						/>
+					) }
+					<InspectorControls.Slot
+						group="dimensions"
+						label={ __( 'Dimensions' ) }
+					/>
+					<InspectorControls.Slot
+						group="border"
+						label={ borderPanelLabel }
+					/>
+					<InspectorControls.Slot
+						group="elements"
+						label={ __( 'Elements' ) }
+						className="elements-block-support-panel__inner-wrapper"
+					/>
+				</>
 			) }
-			<InspectorControls.Slot
-				group="dimensions"
-				label={ __( 'Dimensions' ) }
-			/>
-			<InspectorControls.Slot group="border" label={ borderPanelLabel } />
-			<InspectorControls.Slot
-				group="elements"
-				label={ __( 'Elements' ) }
-				className="elements-block-support-panel__inner-wrapper"
-			/>
 		</>
 	);
 }
@@ -474,9 +500,12 @@ const BlockInspectorSingleBlock = ( {
 				/>
 			) }
 			<BlockInspectorPreTabsSlot />
-			{ isEditingStyleState && ! isSectionBlock && (
+			{ isEditingStyleState && (
 				<StyleStateInspectorSlots
 					blockName={ blockName }
+					clientId={ renderedBlockClientId }
+					contentClientIds={ contentClientIds }
+					isSectionBlock={ isSectionBlock }
 					selectedBlockStyleState={ selectedBlockStyleState }
 				/>
 			) }

package/src/components/block-list/block-html.js

@@ -20,9 +20,11 @@ import {
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { useNativeUndo } from '../../utils/native-undo';
 
 function BlockHTML( { clientId } ) {
 	const [ html, setHtml ] = useState( '' );
+	const nativeUndoRef = useNativeUndo();
 	const block = useSelect(
 		( select ) => select( blockEditorStore ).getBlock( clientId ),
 		[ clientId ]
@@ -83,6 +85,9 @@ function BlockHTML( { clientId } ) {
 			value={ html }
 			onBlur={ onChange }
 			onChange={ ( event ) => setHtml( event.target.value ) }
+			// The edits are local state until committed on blur, so undo
+			// and redo must remain the browser's own within the field.
+			ref={ nativeUndoRef }
 		/>
 	);
 }

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

@@ -622,6 +622,7 @@ function BlockListBlockProvider( props ) {
 			const blockVisibility = attributes?.metadata?.blockVisibility;
 			const deviceType =
 				settings?.[ deviceTypeKey ]?.toLowerCase() || 'desktop';
+			const viewportSettings = settings?.__experimentalFeatures?.viewport;
 
 			const hasLightBlockWrapper = blockType?.apiVersion > 1;
 			const isMultiSelected = isBlockMultiSelected( clientId );
@@ -645,6 +646,7 @@ function BlockListBlockProvider( props ) {
 				bindableAttributes,
 				blockVisibility,
 				deviceType,
+				viewportSettings,
 				isMultiSelected,
 				blockEditingMode,
 				isEditingDisabled: blockEditingMode === 'disabled',
@@ -736,6 +738,7 @@ function BlockListBlockProvider( props ) {
 					: false,
 				blockVisibility,
 				deviceType,
+				viewportSettings,
 			};
 		},
 		[ clientId, rootClientId ]
@@ -753,6 +756,7 @@ function BlockListBlockProvider( props ) {
 	const { isBlockCurrentlyHidden } = useBlockVisibility( {
 		blockVisibility: selectedProps?.blockVisibility,
 		deviceType: selectedProps?.deviceType,
+		viewportSettings: selectedProps?.viewportSettings,
 		view: defaultViewRef.current,
 	} );
 
@@ -817,6 +821,7 @@ function BlockListBlockProvider( props ) {
 		bindableAttributes,
 		blockVisibility,
 		deviceType,
+		viewportSettings,
 	} = selectedProps;
 
 	const privateContext = {
@@ -856,6 +861,7 @@ function BlockListBlockProvider( props ) {
 		bindableAttributes,
 		blockVisibility,
 		deviceType,
+		viewportSettings,
 	};
 
 	if (

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

@@ -347,8 +347,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 	}
 }
 
-// Hide the appender that sits at the end of block lists, when inside a nested block,
-// unless the block itself, or a parent, is selected.
+// Fade in the appender that sits at the end of block lists.
 .wp-block .block-list-appender .block-editor-inserter__toggle {
 	@media not ( prefers-reduced-motion ) {
 		animation: block-editor-inserter__toggle__fade-in-animation 0.1s ease;
@@ -356,15 +355,6 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 	}
 }
 
-.block-editor-block-list__block:not(.is-selected):not(.has-child-selected) .block-editor-default-block-appender {
-	display: none;
-
-	.block-editor-inserter__toggle {
-		opacity: 0;
-		transform: scale(0);
-	}
-}
-
 .block-editor-block-list__block .block-editor-block-list__block-html-textarea {
 	display: block;
 	margin: 0;

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

@@ -35,7 +35,6 @@ import {
 	BlockEditContextProvider,
 	DEFAULT_BLOCK_EDIT_CONTEXT,
 } from '../block-edit/context';
-import { useTypingObserver } from '../observe-typing';
 import { ZoomOutSeparator } from './zoom-out-separator';
 import { unlock } from '../../lock-unlock';
 
@@ -113,7 +112,6 @@ function Root( { className, ...settings } ) {
 			ref: useMergeRefs( [
 				useBlockSelectionClearer(),
 				useInBetweenInserter(),
-				useTypingObserver(),
 			] ),
 			className: clsx( 'is-root-container', className, {
 				'is-outline-mode': isOutlineMode,

package/src/components/block-list/use-block-props/index.js

@@ -24,6 +24,7 @@ import {
 	useBlockEditContext,
 } from '../../block-edit/context';
 import { useFocusHandler } from './use-focus-handler';
+import { useRegisterBlockEventHandlers } from './use-register-block-event-handlers';
 import { useEventHandlers } from './use-selected-block-event-handlers';
 import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
@@ -105,8 +106,12 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		canMove,
 		blockVisibility,
 		deviceType,
+		viewportSettings,
+		ariaLabel,
 	} = useContext( PrivateBlockContext );
 
+	useRegisterBlockEventHandlers( clientId, wrapperProps );
+
 	const defaultViewRef = useRefEffect( ( element ) => {
 		if ( element ) {
 			const { ownerDocument } = element;
@@ -153,6 +158,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 	const { isBlockCurrentlyHidden } = useBlockVisibility( {
 		blockVisibility,
 		deviceType,
+		viewportSettings,
 		view: defaultViewRef.current,
 	} );
 
@@ -181,7 +187,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		ref: mergedRefs,
 		id: `block-${ clientId }${ htmlSuffix }`,
 		role: 'document',
-		'aria-label': blockLabel,
+		'aria-label': ariaLabel ?? blockLabel,
 		'data-block': clientId,
 		'data-type': name,
 		'data-title': blockTitle,

package/src/components/block-list/use-block-props/use-focus-first-element.js

@@ -29,9 +29,8 @@ import { unlock } from '../../../lock-unlock';
  */
 export function useFocusFirstElement( { clientId, initialPosition } ) {
 	const ref = useRef();
-	const { isBlockSelected, isMultiSelecting, isZoomOut } = unlock(
-		useSelect( blockEditorStore )
-	);
+	const { isBlockSelected, isMultiSelecting, isZoomOut, getSelectionStart } =
+		unlock( useSelect( blockEditorStore ) );
 
 	useEffect( () => {
 		// Check if the block is still selected at the time this effect runs.
@@ -87,7 +86,27 @@ export function useFocusFirstElement( { clientId, initialPosition } ) {
 				return;
 			}
 		}
-		placeCaretAtHorizontalEdge( target, isReverse );
+		// Do not place a caret when the target already contains one:
+		// while a focused editing host contains the target (the block
+		// supports `editableRoot`), the caret can be inside it without the
+		// target holding focus. Only a caret the rich text synchronized to
+		// the store (offsets present) is deliberate; a leftover one yields
+		// to an explicitly requested edge position (initialPosition -1).
+		const { activeElement } = ownerDocument;
+		const selection = ownerDocument.defaultView.getSelection();
+		const { clientId: selectionClientId, offset } = getSelectionStart();
+		const hasCaret =
+			activeElement?.isContentEditable &&
+			activeElement.contains( target ) &&
+			!! selection.anchorNode &&
+			target.contains( selection.anchorNode );
+		const isDeliberate =
+			initialPosition === 0 ||
+			( offset !== undefined && selectionClientId === clientId );
+
+		if ( ! ( hasCaret && isDeliberate ) ) {
+			placeCaretAtHorizontalEdge( target, isReverse );
+		}
 	}, [ initialPosition, clientId ] );
 
 	return ref;

package/src/components/block-list/use-block-props/use-focus-handler.js

@@ -22,7 +22,8 @@ const { subscribeDelegatedListener } = unlock( composePrivateApis );
  * @param {string} clientId Block client ID.
  */
 export function useFocusHandler( clientId ) {
-	const { isBlockSelected } = useSelect( blockEditorStore );
+	const { isBlockSelected, isBlockMultiSelected, isMultiSelecting } =
+		useSelect( blockEditorStore );
 	const { selectBlock, selectionChange } = useDispatch( blockEditorStore );
 
 	return useRefEffect(
@@ -36,14 +37,6 @@ export function useFocusHandler( clientId ) {
 			 * @param {FocusEvent} event Focus event.
 			 */
 			function onFocus( event ) {
-				// When the whole editor is editable, let writing flow handle
-				// selection.
-				if (
-					node.parentElement.closest( '[contenteditable="true"]' )
-				) {
-					return;
-				}
-
 				// Check synchronously because a non-selected block might be
 				// getting data through `useSelect` asynchronously.
 				if ( isBlockSelected( clientId ) ) {
@@ -54,12 +47,45 @@ export function useFocusHandler( clientId ) {
 					return;
 				}
 
+				// Never select on the focus fired during a selection
+				// gesture (a shift+click, marked by the selection observer
+				// with startMultiSelect). The browser can focus the common
+				// editable ancestor of the range (e.g. a group block), and
+				// any selection re-render mid gesture destroys the native
+				// selection being made. The observer builds the
+				// multi-selection on mouseup.
+				if ( isMultiSelecting() ) {
+					return;
+				}
+
+				// A block that is part of the current multi-selection must
+				// not collapse it. Focus can land on the clicked block after
+				// the multi-selection was built: the focus event of a
+				// shift+click is not ordered consistently against its
+				// mouseup across browsers.
+				if ( isBlockMultiSelected( clientId ) ) {
+					return;
+				}
+
 				// If an inner block is focussed, that block is responsible for
 				// setting the selected block.
 				if ( ! isInsideRootBlock( node, event.target ) ) {
 					return;
 				}
 
+				// For editable targets, select without initial caret
+				// placement: the caret is inside the target. Placement would
+				// move it, and would collapse a native selection in the
+				// making, e.g. a shift+click extending the selection across
+				// blocks while the wrapper is the editing host. The observer
+				// builds the multi-selection from the anchor it recorded at
+				// mousedown, so this dispatch overwriting the store anchor
+				// is harmless.
+				if ( event.target.isContentEditable ) {
+					selectBlock( clientId, null );
+					return;
+				}
+
 				selectBlock( clientId );
 			}
 

package/src/components/block-list/use-block-props/use-register-block-event-handlers.js

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	useContext,
+	useEffect,
+	useInsertionEffect,
+	useRef,
+} from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { getEventHandlers } from '../../writing-flow/use-editable-root-event-handlers';
+import { BlockRefs } from '../../provider/block-refs-provider';
+
+/**
+ * Registers the block's `wrapperProps` event handlers so the writing flow host
+ * can call them when a block that supports `editableRoot` is edited through the
+ * host and the events no longer reach the block.
+ *
+ * Handlers are keyed by client ID in the `BlockRefs` context, so the host
+ * resolves them from the block hierarchy. A ref is stored so the host always
+ * calls the latest render's handlers, and only blocks that have a handler are
+ * registered.
+ *
+ * @param {string} clientId     Block client ID.
+ * @param {Object} wrapperProps The block's merged wrapper props.
+ */
+export function useRegisterBlockEventHandlers( clientId, wrapperProps ) {
+	const { eventHandlers } = useContext( BlockRefs );
+	const handlers = getEventHandlers( wrapperProps );
+	const handlersRef = useRef();
+	useInsertionEffect( () => {
+		handlersRef.current = handlers;
+	} );
+
+	const hasHandlers = !! handlers;
+	useEffect( () => {
+		if ( hasHandlers ) {
+			eventHandlers.set( clientId, handlersRef );
+			return () => eventHandlers.delete( clientId );
+		}
+	}, [ eventHandlers, clientId, hasHandlers ] );
+}

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

@@ -29,7 +29,7 @@
 	padding: $grid-unit-15 0;
 
 	.components-checkbox-control__label {
-		font-weight: 600;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 	}
 }
 

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

@@ -21,7 +21,7 @@
 	z-index: 1;
 
 	.components-checkbox-control__label {
-		font-weight: 600;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 	}
 }
 

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

@@ -10,5 +10,5 @@
 	color: $gray-700;
 	text-transform: uppercase;
 	font-size: 11px;
-	font-weight: $font-weight-medium;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 }

package/src/components/block-parent-selector/index.js

@@ -26,10 +26,13 @@ export default function BlockParentSelector() {
 	const { parentClientId } = useSelect( ( select ) => {
 		const {
 			getBlockParents,
-			getSelectedBlockClientId,
+			getSelectedBlockClientIds,
 			getParentSectionBlock,
 		} = unlock( select( blockEditorStore ) );
-		const selectedBlockClientId = getSelectedBlockClientId();
+		// Not getSelectedBlockClientId: a text selection crossing into a
+		// nested block resolves to the ancestor alone, but its selection
+		// start and end differ.
+		const [ selectedBlockClientId ] = getSelectedBlockClientIds();
 		const parentSection = getParentSectionBlock( selectedBlockClientId );
 		const parents = getBlockParents( selectedBlockClientId );
 		const _parentClientId = parentSection ?? parents[ parents.length - 1 ];

package/src/components/block-quick-navigation/style.scss

@@ -1,5 +1,3 @@
-@use "@wordpress/base-styles/variables";
-
 .block-editor-block-quick-navigation__item {
-	font-weight: variables.$font-weight-regular;
+	font-weight: var(--wpds-typography-font-weight-default);
 }

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

@@ -30,7 +30,7 @@
 
 	button.components-button.block-editor-block-styles__item {
 		color: $gray-900;
-		box-shadow: inset 0 0 0 $border-width $gray-300;
+		border-color: $gray-300;
 		display: inline-block;
 		width: calc(50% - #{$grid-unit-05});
 
@@ -52,7 +52,7 @@
 
 		&:focus,
 		&.is-active:focus {
-			@include block-toolbar-button-style__focus();
+			@include outset-ring__focus();
 		}
 	}
 

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

@@ -40,6 +40,7 @@ import EditSectionButton from './edit-section-button';
 import { unlock } from '../../lock-unlock';
 import { deviceTypeKey } from '../../store/private-keys';
 import BlockToolbarIcon from './block-toolbar-icon';
+import { hasViewportBlockStyleState } from '../../hooks/block-style-state';
 
 /**
  * Renders the block toolbar.
@@ -78,6 +79,7 @@ export function PrivateBlockToolbar( {
 		showBlockVisibilityButton,
 		showSwitchSectionStyleButton,
 		areSelectedBlocksHiddenOnViewport,
+		showStyleStateSlot,
 		canEdit,
 	} = useSelect( ( select ) => {
 		const { canEditBlock } = select( blockEditorStore );
@@ -95,6 +97,8 @@ export function PrivateBlockToolbar( {
 			isZoomOut,
 			isSectionBlock,
 			isBlockHiddenAtViewport,
+			getSelectedBlockStyleState,
+			isResponsiveEditing,
 		} = unlock( select( blockEditorStore ) );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
@@ -135,6 +139,11 @@ export function PrivateBlockToolbar( {
 			selectedBlockClientIds.every( ( id ) =>
 				isBlockHiddenAtViewport( id, _currentDeviceType )
 			);
+		const _isEditingResponsiveStyleState =
+			isResponsiveEditing() &&
+			hasViewportBlockStyleState(
+				getSelectedBlockStyleState( selectedBlockClientId )
+			);
 
 		return {
 			blockClientId: selectedBlockClientId,
@@ -158,7 +167,8 @@ export function PrivateBlockToolbar( {
 			isSectionContainer: _isSectionBlock,
 			hasContentOnlyLocking: _hasTemplateLock,
 			showShuffleButton: _isZoomOut,
-			showSlots: ! _isZoomOut,
+			showSlots: ! _isZoomOut && ! _isEditingResponsiveStyleState,
+			showStyleStateSlot: ! _isZoomOut && _isEditingResponsiveStyleState,
 			showGroupButtons: ! _isZoomOut,
 			showLockButtons: ! _isZoomOut,
 			showBlockVisibilityButton: ! _isZoomOut,
@@ -261,31 +271,44 @@ export function PrivateBlockToolbar( {
 						<SwitchSectionStyle clientId={ blockClientIds[ 0 ] } />
 					) }
 				{ ! areSelectedBlocksHiddenOnViewport &&
-					shouldShowVisualToolbar &&
-					showSlots && (
+					shouldShowVisualToolbar && (
 						<>
 							{ ! isSectionContainer && (
+								<>
+									{ showSlots && (
+										<>
+											<BlockControls.Slot
+												group="parent"
+												className="block-editor-block-toolbar__slot"
+											/>
+											<BlockControls.Slot
+												group="block"
+												className="block-editor-block-toolbar__slot"
+											/>
+											<BlockControls.Slot className="block-editor-block-toolbar__slot" />
+											<BlockControls.Slot
+												group="inline"
+												className="block-editor-block-toolbar__slot"
+											/>
+										</>
+									) }
+									{ showStyleStateSlot && (
+										<BlockControls.Slot
+											group="style-state"
+											className="block-editor-block-toolbar__slot"
+										/>
+									) }
+								</>
+							) }
+							{ showSlots && (
 								<>
 									<BlockControls.Slot
-										group="parent"
-										className="block-editor-block-toolbar__slot"
-									/>
-									<BlockControls.Slot
-										group="block"
-										className="block-editor-block-toolbar__slot"
-									/>
-									<BlockControls.Slot className="block-editor-block-toolbar__slot" />
-									<BlockControls.Slot
-										group="inline"
+										group="other"
 										className="block-editor-block-toolbar__slot"
 									/>
+									<__unstableBlockToolbarLastItem.Slot />
 								</>
 							) }
-							<BlockControls.Slot
-								group="other"
-								className="block-editor-block-toolbar__slot"
-							/>
-							<__unstableBlockToolbarLastItem.Slot />
 						</>
 					) }
 				<BlockEditVisuallyButton clientIds={ blockClientIds } />

package/src/components/block-toolbar/switch-section-style.js

@@ -10,6 +10,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
@@ -18,7 +19,9 @@ import useStylesForBlocks from '../block-styles/use-styles-for-block';
 import { replaceActiveStyle } from '../block-styles/utils';
 import { store as blockEditorStore } from '../../store';
 import { globalStylesDataKey } from '../../store/private-keys';
-import { getVariationStylesWithRefValues } from '../../hooks/block-style-variation';
+import { unlock } from '../../lock-unlock';
+
+const { getVariationStyle } = unlock( globalStylesEnginePrivateApis );
 
 const styleIcon = (
 	<SVG
@@ -59,7 +62,7 @@ function SwitchSectionStyle( { clientId } ) {
 
 	// Get the background color for the active style
 	const activeStyleBackground = activeStyle?.name
-		? getVariationStylesWithRefValues(
+		? getVariationStyle(
 				{
 					settings: globalSettings,
 					styles: globalStyles,

package/src/components/block-tools/empty-block-inserter.js

@@ -15,12 +15,8 @@ export default function EmptyBlockInserter( {
 	clientId,
 	__unstableContentRef,
 } ) {
-	const {
-		capturingClientId,
-		isInsertionPointVisible,
-		lastClientId,
-		rootClientId,
-	} = useSelectedBlockToolProps( clientId );
+	const { isInsertionPointVisible, lastClientId, rootClientId } =
+		useSelectedBlockToolProps( clientId );
 
 	const popoverProps = useBlockToolbarPopoverProps( {
 		contentElement: __unstableContentRef?.current,
@@ -29,7 +25,7 @@ export default function EmptyBlockInserter( {
 
 	return (
 		<BlockPopoverCover
-			clientId={ capturingClientId || clientId }
+			clientId={ clientId }
 			bottomClientId={ lastClientId }
 			className={ clsx(
 				'block-editor-block-list__block-side-inserter-popover',