Add focusEditorOnEscape to NavigableToolbar to return focus to editor…

… by default on escape keypress

Not committed to this, but it does work since we've removed bubblesVirtually from the toolbar slots and the inline rich editor doesn't use slots for its tools. I like that this brings this behavior by default to the toolbars, but unsure about if it's a good idea overall.

packages/block-editor/src/components/block-tools/block-contextual-toolbar.js

@@ -17,7 +17,6 @@ import {
 } from '@wordpress/components';
 import { next, previous } from '@wordpress/icons';
 import { useViewportMatch } from '@wordpress/compose';
-import { ESCAPE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -39,15 +38,13 @@ function UnforwardBlockContextualToolbar(
 	const {
 		blockType,
 		blockEditingMode,
-		lastFocus,
 		hasParents,
 		showParentSelector,
 		selectedBlockClientId,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
 			getBlockParents,
-			getLastFocus,
 			getSelectedBlockClientIds,
 			getBlockEditingMode,
 		} = select( blockEditorStore );
@@ -65,7 +62,6 @@ function UnforwardBlockContextualToolbar(
 				_selectedBlockClientId &&
 				getBlockType( getBlockName( _selectedBlockClientId ) ),
 			blockEditingMode: getBlockEditingMode( _selectedBlockClientId ),
-			lastFocus: getLastFocus(),
 			hasParents: parents.length,
 			showParentSelector:
 				parentBlockType &&
@@ -183,12 +179,6 @@ function UnforwardBlockContextualToolbar(
 			className={ classes }
 			/* translators: accessibility text for the block toolbar */
 			aria-label={ __( 'Block tools' ) }
-			handleOnKeyDown={ ( event ) => {
-				if ( event.keyCode === ESCAPE && lastFocus?.current ) {
-					event.preventDefault();
-					lastFocus.current.focus();
-				}
-			} }
 			{ ...props }
 		>
 			{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }

packages/block-editor/src/components/navigable-toolbar/index.js

@@ -10,10 +10,17 @@ import {
 	useEffect,
 	useCallback,
 } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import { focus } from '@wordpress/dom';
+import { ESCAPE } from '@wordpress/keycodes';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
 function hasOnlyToolbarItem( elements ) {
 	const dataProp = 'toolbarItem';
 	return ! elements.some( ( element ) => ! ( dataProp in element.dataset ) );
@@ -165,6 +172,7 @@ function UnforwardNavigableToolbar(
 		shouldUseKeyboardFocusShortcut = true,
 		__experimentalInitialIndex: initialIndex,
 		__experimentalOnIndexChange: onIndexChange,
+		focusEditorOnEscape = true,
 		...props
 	},
 	ref
@@ -182,6 +190,13 @@ function UnforwardNavigableToolbar(
 		shouldUseKeyboardFocusShortcut
 	);
 
+	const { lastFocus } = useSelect( ( select ) => {
+		const { getLastFocus } = select( blockEditorStore );
+		return {
+			lastFocus: getLastFocus(),
+		};
+	}, [] );
+
 	useEffect( () => {
 		const navigableToolbarRef = toolbarRef.current;
 
@@ -201,6 +216,31 @@ function UnforwardNavigableToolbar(
 		}
 	}, [ handleOnKeyDown, toolbarRef ] );
 
+
+	// TODO: Not sure if this is a good idea... but it's working for now and gets the behavior we're after with the fewest lines of code, but also is limiting.
+	useEffect( () => {
+		const navigableToolbarRef = toolbarRef.current;
+
+		if ( focusEditorOnEscape ) {
+			const handleKeyDown = ( event ) => {
+				if ( event.keyCode === ESCAPE && lastFocus?.current ) {
+					// Focus the last focused element when pressing escape.
+					event.preventDefault();
+					lastFocus.current.focus();
+				}
+			};
+
+			navigableToolbarRef.addEventListener( 'keydown', handleKeyDown );
+
+			return () => {
+				navigableToolbarRef.removeEventListener(
+					'keydown',
+					handleKeyDown
+				);
+			};
+		}
+	}, [ focusEditorOnEscape, toolbarRef, lastFocus ] );
+
 	if ( isAccessibleToolbar ) {
 		return (
 			<Toolbar