Remove LastFocus from Block Editor store in favor of useLastFocus

docs/reference-guides/data/data-core-block-editor.md

@@ -588,18 +588,6 @@ _Properties_
 -   _isDisabled_ `boolean`: Whether or not the user should be prevented from inserting this item.
 -   _frecency_ `number`: Heuristic that combines frequency and recency.
 
-### getLastFocus
-
-Returns the element of the last element that had focus when focus left the editor canvas.
-
-_Parameters_
-
--   _state_ `Object`: Block editor state.
-
-_Returns_
-
--   `Object`: Element.
-
 ### getLastMultiSelectedBlockClientId
 
 Returns the client ID of the last block in the multi-selection set, or null if there is no multi-selection.
@@ -1663,18 +1651,6 @@ _Parameters_
 -   _clientId_ `string`: The block's clientId.
 -   _hasControlledInnerBlocks_ `boolean`: True if the block's inner blocks are controlled.
 
-### setLastFocus
-
-Action that sets the element that had focus when focus leaves the editor canvas.
-
-_Parameters_
-
--   _lastFocus_ `Object`: The last focused element.
-
-_Returns_
-
--   `Object`: Action object.
-
 ### setNavigationMode
 
 Action that enables or disables the navigation mode.

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

@@ -9,7 +9,6 @@ import {
 	useEffect,
 	useCallback,
 } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import { focus } from '@wordpress/dom';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
@@ -18,7 +17,7 @@ import { ESCAPE } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
-import { store as blockEditorStore } from '../../store';
+import { useLastFocus } from '../../utils/use-last-focus';
 
 function hasOnlyToolbarItem( elements ) {
 	const dataProp = 'toolbarItem';
@@ -169,7 +168,8 @@ function useToolbarFocus( {
 		};
 	}, [ initialIndex, initialFocusOnMount, onIndexChange, toolbarRef ] );
 
-	const { getLastFocus } = useSelect( blockEditorStore );
+	const { lastFocus } = useLastFocus();
+
 	/**
 	 * Handles returning focus to the block editor canvas when pressing escape.
 	 */
@@ -178,7 +178,6 @@ function useToolbarFocus( {
 
 		if ( focusEditorOnEscape ) {
 			const handleKeyDown = ( event ) => {
-				const lastFocus = getLastFocus();
 				if ( event.keyCode === ESCAPE && lastFocus?.current ) {
 					// Focus the last focused element when pressing escape.
 					event.preventDefault();
@@ -193,7 +192,7 @@ function useToolbarFocus( {
 				);
 			};
 		}
-	}, [ focusEditorOnEscape, getLastFocus, toolbarRef ] );
+	}, [ focusEditorOnEscape, lastFocus, toolbarRef ] );
 }
 
 export default function NavigableToolbar( {

packages/block-editor/src/components/writing-flow/use-tab-nav.js

@@ -12,6 +12,7 @@ import { useRef } from '@wordpress/element';
  */
 import { store as blockEditorStore } from '../../store';
 import { isInSameBlock, isInsideRootBlock } from '../../utils/dom';
+import { useLastFocus } from '../../utils/use-last-focus';
 
 export default function useTabNav() {
 	const container = useRef();
@@ -20,17 +21,13 @@ export default function useTabNav() {
 
 	const { hasMultiSelection, getSelectedBlockClientId, getBlockCount } =
 		useSelect( blockEditorStore );
-	const { setNavigationMode, setLastFocus } = useDispatch( blockEditorStore );
+	const { lastFocus, setLastFocus } = useLastFocus();
+	const { setNavigationMode } = useDispatch( blockEditorStore );
 	const isNavigationMode = useSelect(
 		( select ) => select( blockEditorStore ).isNavigationMode(),
 		[]
 	);
 
-	const lastFocus = useSelect(
-		( select ) => select( blockEditorStore ).getLastFocus(),
-		[]
-	);
-
 	// Don't allow tabbing to this element in Navigation mode.
 	const focusCaptureTabIndex = ! isNavigationMode ? '0' : undefined;
 
@@ -45,7 +42,7 @@ export default function useTabNav() {
 		} else if ( hasMultiSelection() ) {
 			container.current.focus();
 		} else if ( getSelectedBlockClientId() ) {
-			lastFocus.current.focus();
+			lastFocus?.current.focus();
 		} else {
 			setNavigationMode( true );
 
@@ -163,7 +160,7 @@ export default function useTabNav() {
 		}
 
 		function onFocusOut( event ) {
-			setLastFocus( { ...lastFocus, current: event.target } );
+			setLastFocus( event.target );
 
 			const { ownerDocument } = node;
 

packages/block-editor/src/store/actions.js

@@ -1919,18 +1919,3 @@ export function unsetBlockEditingMode( clientId = '' ) {
 		clientId,
 	};
 }
-
-/**
- * Action that sets the element that had focus when focus leaves the editor canvas.
- *
- * @param {Object} lastFocus The last focused element.
- *
- *
- * @return {Object} Action object.
- */
-export function setLastFocus( lastFocus = null ) {
-	return {
-		type: 'LAST_FOCUS',
-		lastFocus,
-	};
-}

packages/block-editor/src/store/selectors.js

@@ -2946,14 +2946,3 @@ export const isGroupable = createRegistrySelector(
 			);
 		}
 );
-
-/**
- * Returns the element of the last element that had focus when focus left the editor canvas.
- *
- * @param {Object} state Block editor state.
- *
- * @return {Object} Element.
- */
-export function getLastFocus( state ) {
-	return state.lastFocus;
-}

packages/block-editor/src/utils/use-last-focus.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { createRef } from '@wordpress/element';
+
+/**
+ * Returns the element of the last element that had focus when focus left the editor canvas.
+ *
+ * @return {Object} Object with a lastFocus ref and setLastFocus.
+ */
+const lastFocus = createRef();
+
+export function useLastFocus() {
+	const setLastFocus = ( node ) => {
+		lastFocus.current = node;
+	};
+	return { lastFocus, setLastFocus };
+}