From e9438ba73642abe9a6026e6f0aabc4206cb9f175 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Fri, 1 Sep 2023 16:01:32 -0500
Subject: [PATCH] Handle Escape on Toolbar Option 3: Remove bubblesVirtually
 from block-controls slot

If remove the bubblesVirtually from the block-controls slot, then the event will bubble in the DOM as normal (instead of the React Tree only since bubblesVirtually uses createPortal for the fills). This means we could handle the event without any forwardRefs as we don't need to block the escape shortcut keypress event from the React Tree.

However, we assume bubblesVirtually was made for a reason. So, we're unsure if something would break.
---
 .../src/components/block-controls/slot.js            |  2 +-
 .../block-editor/src/components/block-tools/index.js | 12 +++---------
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/block-editor/src/components/block-controls/slot.js b/packages/block-editor/src/components/block-controls/slot.js
index ad800b49ab40d..fb2ace0ba17a1 100644
--- a/packages/block-editor/src/components/block-controls/slot.js
+++ b/packages/block-editor/src/components/block-controls/slot.js
@@ -42,7 +42,7 @@ export default function BlockControlsSlot( { group = 'default', ...props } ) {
 		return null;
 	}
 
-	const slot = <Slot { ...props } bubblesVirtually fillProps={ fillProps } />;
+	const slot = <Slot { ...props } fillProps={ fillProps } />;
 
 	if ( group === 'default' ) {
 		return slot;
diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
index 7831eab0fa5bc..e0cc0e8477d8d 100644
--- a/packages/block-editor/src/components/block-tools/index.js
+++ b/packages/block-editor/src/components/block-tools/index.js
@@ -62,6 +62,9 @@ export default function BlockTools( {
 		moveBlocksDown,
 	} = useDispatch( blockEditorStore );
 
+	// If we go with removing bubblesVirtually from the block controls slot,
+	// we can also remove all of this and all the navigable toolbar forwardRef stuff,
+	// as we don't need to stop the escape unselect shortcut from hitting first.
 	const selectedBlockToolsRef = useRef( null );
 
 	function onKeyDown( event ) {
@@ -106,15 +109,6 @@ export default function BlockTools( {
 				insertBeforeBlock( clientIds[ 0 ] );
 			}
 		} else if ( isMatch( 'core/block-editor/unselect', event ) ) {
-			if ( selectedBlockToolsRef.current.contains( event.target ) ) {
-				// This shouldn't be necessary, but we have a combination of a few things all combining to create a situation where:
-				// - Because the block toolbar uses createPortal to populate the block toolbar fills, we can't rely on the React event bubbling to hit the onKeyDown listener for the block toolbar
-				// - Since we can't use the React tree, we use the DOM tree which _should_ handle the event bubbling correctly from a `createPortal` element.
-				// - This bubbles via the React tree, which hits this `unselect` escape keypress before the block toolbar DOM event listener has access to it.
-				// An alternative would be to remove the addEventListener on the navigableToolbar and use this event to handle it directly right here. That feels hacky too though.
-				return;
-			}
-
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length ) {
 				event.preventDefault();