diff --git a/packages/block-editor/src/components/block-breadcrumb/index.js b/packages/block-editor/src/components/block-breadcrumb/index.js index dac0bdb287e9b3..70f038181237b4 100644 --- a/packages/block-editor/src/components/block-breadcrumb/index.js +++ b/packages/block-editor/src/components/block-breadcrumb/index.js @@ -13,6 +13,7 @@ import BlockTitle from '../block-title'; import { store as blockEditorStore } from '../../store'; import { unlock } from '../../lock-unlock'; import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs'; +import getEditorRegion from '../../utils/get-editor-region'; /** * Block breadcrumb component, displaying the hierarchy of the current block selection as a breadcrumb. @@ -71,35 +72,9 @@ function BlockBreadcrumb( { rootLabelText } ) { '.editor-styles-wrapper' ); - const editorCanvas = - document - .querySelectorAll( - 'iframe[name="editor-canvas"]' - ) - .values() - .find( ( iframe ) => { - // Find the iframe that contains our contentRef - const iframeDocument = - iframe.contentDocument || - iframe.contentWindow.document; - - return ( - iframeDocument === - blockEditor.ownerDocument - ); - } ) ?? blockEditor; - - // The region is provivided by the editor, not the block-editor. - // We should send focus to the region if one is available to reuse the - // same interface for navigating landmarks. If no region is available, - // use the canvas instead. - const focusableWrapper = - editorCanvas?.closest( '[role="region"]' ) ?? - editorCanvas; - clearSelectedBlock(); - focusableWrapper.focus(); + getEditorRegion( blockEditor ).focus(); } } > { rootLabel } diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js index b0a90ca3ed176e..5cde3cccaf57e5 100644 --- a/packages/block-editor/src/components/block-tools/index.js +++ b/packages/block-editor/src/components/block-tools/index.js @@ -25,6 +25,7 @@ import usePopoverScroll from '../block-popover/use-popover-scroll'; import ZoomOutModeInserters from './zoom-out-mode-inserters'; import { useShowBlockTools } from './use-show-block-tools'; import { unlock } from '../../lock-unlock'; +import getEditorRegion from '../../utils/get-editor-region'; function selector( select ) { const { @@ -161,32 +162,7 @@ export default function BlockTools( { ) { event.preventDefault(); clearSelectedBlock(); - // If there are multiple editors, we need to find the iframe that contains our contentRef to make sure - // we're focusing the region that contains this editor. - const editorCanvas = - document - .querySelectorAll( 'iframe[name="editor-canvas"]' ) - .values() - .find( ( iframe ) => { - // Find the iframe that contains our contentRef - const iframeDocument = - iframe.contentDocument || - iframe.contentWindow.document; - - return ( - iframeDocument === - __unstableContentRef.current.ownerDocument - ); - } ) ?? __unstableContentRef.current; - - // The region is provivided by the editor, not the block-editor. - // We should send focus to the region if one is available to reuse the - // same interface for navigating landmarks. If no region is available, - // use the canvas instead. - const focusableWrapper = - editorCanvas?.closest( '[role="region"]' ) ?? editorCanvas; - - focusableWrapper.focus(); + getEditorRegion( __unstableContentRef.current ).focus(); } } else if ( isMatch( 'core/block-editor/collapse-list-view', event ) ) { // If focus is currently within a text field, such as a rich text block or other editable field, diff --git a/packages/block-editor/src/utils/get-editor-region.js b/packages/block-editor/src/utils/get-editor-region.js new file mode 100644 index 00000000000000..90bdf51c6a5341 --- /dev/null +++ b/packages/block-editor/src/utils/get-editor-region.js @@ -0,0 +1,32 @@ +/** + * Gets the editor region for a given editor canvas element or + * returns the passed element if no region is found + * + * @param { Object } editor + * @return { Object } The editor region or given editor element + */ +export default function getEditorRegion( editor ) { + if ( ! editor ) { + return null; + } + + // If there are multiple editors, we need to find the iframe that contains our contentRef to make sure + // we're focusing the region that contains this editor. + const editorCanvas = + document + .querySelectorAll( 'iframe[name="editor-canvas"]' ) + .values() + .find( ( iframe ) => { + // Find the iframe that contains our contentRef + const iframeDocument = + iframe.contentDocument || iframe.contentWindow.document; + + return iframeDocument === editor.ownerDocument; + } ) ?? editor; + + // The region is provivided by the editor, not the block-editor. + // We should send focus to the region if one is available to reuse the + // same interface for navigating landmarks. If no region is available, + // use the canvas instead. + return editorCanvas?.closest( '[role="region"]' ) ?? editorCanvas; +}