diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md index 38a93552bcbef2..7b0bd386daaf48 100644 --- a/docs/reference-guides/data/data-core-block-editor.md +++ b/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. diff --git a/packages/block-editor/src/components/navigable-toolbar/index.js b/packages/block-editor/src/components/navigable-toolbar/index.js index e97efb2a4b3910..ed0f53a92789fa 100644 --- a/packages/block-editor/src/components/navigable-toolbar/index.js +++ b/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( { diff --git a/packages/block-editor/src/components/writing-flow/use-tab-nav.js b/packages/block-editor/src/components/writing-flow/use-tab-nav.js index b1fb1800a53ea2..eab14f10bc9bde 100644 --- a/packages/block-editor/src/components/writing-flow/use-tab-nav.js +++ b/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; diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js index b21436161cb8c3..da9beb0ba73a95 100644 --- a/packages/block-editor/src/store/actions.js +++ b/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, - }; -} diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 94eebd32837a53..55d157c6927a2d 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/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; -} diff --git a/packages/block-editor/src/utils/use-last-focus.js b/packages/block-editor/src/utils/use-last-focus.js new file mode 100644 index 00000000000000..68694449fbc35e --- /dev/null +++ b/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 }; +}