Convert finding the region into a utility named getEditorRegion

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 }

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,

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;
+}