Pass bubblesVirtually=false as a prop to the inspector tools slot s…

…o that the event does not bubble up to the parents in the block editor.
WordPress · Dec 16, 2021 · 84a3c7c · 84a3c7c
1 parent f82e5b9
commit 84a3c7c
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 26 deletions.
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
@@ -66,7 +66,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		return (
 			<div className="block-editor-block-inspector">
 				<MultiSelectionInspector />
-				<InspectorControls.Slot />
+				<InspectorControls.Slot bubblesVirtually={ false } />
 			</div>
 		);
 	}

diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
@@ -20,20 +20,6 @@ import { store as blockEditorStore } from '../../store';
 import BlockContextualToolbar from './block-contextual-toolbar';
 import { usePopoverScroll } from './use-popover-scroll';
 
-/**
- * Returns true if the container contains the document active element.
- *
- * @param {HTMLElement} container An HTML element.
- *
- * @return {boolean} Whether the container contains the currently active element in the document.
- */
-const hasFocusWithin = ( container ) => {
-	return (
-		!! container &&
-		!! container?.contains( container?.ownerDocument?.activeElement )
-	);
-};
-
 /**
  * Renders block tools (the block toolbar, select/navigation mode toolbar, the
  * insertion point and a slot for the inline rich text toolbar). Must be wrapped
@@ -68,13 +54,6 @@ export default function BlockTools( {
 	} = useDispatch( blockEditorStore );
 
 	function onKeyDown( event ) {
-		if (
-			__unstableContentRef?.current &&
-			! hasFocusWithin( __unstableContentRef?.current )
-		) {
-			return;
-		}
-
 		if ( isMatch( 'core/block-editor/move-up', event ) ) {
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length ) {

diff --git a/packages/block-editor/src/components/inspector-controls/block-support-slot-container.js b/packages/block-editor/src/components/inspector-controls/block-support-slot-container.js
@@ -4,9 +4,17 @@
 import { __experimentalToolsPanelContext as ToolsPanelContext } from '@wordpress/components';
 import { useContext } from '@wordpress/element';
 
-export default function BlockSupportSlotContainer( { Slot, ...props } ) {
+export default function BlockSupportSlotContainer( {
+	Slot,
+	bubblesVirtually,
+	...props
+} ) {
 	const toolsPanelContext = useContext( ToolsPanelContext );
 	return (
-		<Slot { ...props } fillProps={ toolsPanelContext } bubblesVirtually />
+		<Slot
+			{ ...props }
+			fillProps={ toolsPanelContext }
+			bubblesVirtually={ bubblesVirtually }
+		/>
 	);
 }
diff --git a/packages/block-editor/src/components/inspector-controls/slot.js b/packages/block-editor/src/components/inspector-controls/slot.js
@@ -14,6 +14,7 @@ import groups from './groups';
 export default function InspectorControlsSlot( {
 	__experimentalGroup: group = 'default',
 	label,
+	bubblesVirtually = true,
 	...props
 } ) {
 	const Slot = groups[ group ]?.Slot;
@@ -31,10 +32,14 @@ export default function InspectorControlsSlot( {
 	if ( label ) {
 		return (
 			<BlockSupportToolsPanel group={ group } label={ label }>
-				<BlockSupportSlotContainer { ...props } Slot={ Slot } />
+				<BlockSupportSlotContainer
+					{ ...props }
+					Slot={ Slot }
+					bubblesVirtually={ bubblesVirtually }
+				/>
 			</BlockSupportToolsPanel>
 		);
 	}
 
-	return <Slot { ...props } bubblesVirtually />;
+	return <Slot { ...props } bubblesVirtually={ bubblesVirtually } />;
 }