diff --git a/packages/block-editor/src/components/block-list/head.js b/packages/block-editor/src/components/block-list/head.js
deleted file mode 100644
index 9f1ce763203524..00000000000000
--- a/packages/block-editor/src/components/block-list/head.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext, useState } from '@wordpress/element';
-
-const context = createContext();
-
-export function Head( { children } ) {
- const [ element, setElement ] = useState();
- return (
-
-
- { children }
-
- );
-}
-
-Head.context = context;
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index d393c31c8d41a0..0d59e3072b52b4 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -22,11 +22,13 @@ import { usePreParsePatterns } from '../../utils/pre-parse-patterns';
import { LayoutProvider, defaultLayout } from './layout';
import BlockToolsBackCompat from '../block-tools/back-compat';
import { useBlockSelectionClearer } from '../block-selection-clearer';
-import { Head } from './head';
+
+const elementContext = createContext();
export const IntersectionObserver = createContext();
function Root( { className, children } ) {
+ const [ element, setElement ] = useState();
const isLargeViewport = useViewportMatch( 'medium' );
const { isOutlineMode, isFocusMode, isNavigationMode } = useSelect(
( select ) => {
@@ -43,12 +45,13 @@ function Root( { className, children } ) {
[]
);
return (
-
+
{ children }
-
+
);
}
@@ -77,6 +80,8 @@ export default function BlockList( { className, ...props } ) {
);
}
+BlockList.__unstableElementContext = elementContext;
+
function Items( {
placeholder,
rootClientId,
diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
index 46748fb04f3e6c..bf62161e1d1825 100644
--- a/packages/block-editor/src/hooks/duotone.js
+++ b/packages/block-editor/src/hooks/duotone.js
@@ -21,7 +21,7 @@ import {
__experimentalDuotoneControl as DuotoneControl,
useSetting,
} from '../components';
-import { Head } from '../components/block-list/head';
+import BlockList from '../components/block-list';
const EMPTY_ARRAY = [];
@@ -242,7 +242,7 @@ const withDuotoneStyles = createHigherOrderComponent(
const className = classnames( props?.className, id );
- const element = useContext( Head.context );
+ const element = useContext( BlockList.__unstableElementContext );
return (
<>
diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
index 3461fb5dbe100c..661a4887cbdeca 100644
--- a/packages/block-editor/src/hooks/layout.js
+++ b/packages/block-editor/src/hooks/layout.js
@@ -27,7 +27,7 @@ import { store as blockEditorStore } from '../store';
import { InspectorControls } from '../components';
import useSetting from '../components/use-setting';
import { LayoutStyle } from '../components/block-list/layout';
-import { Head } from '../components/block-list/head';
+import BlockList from '../components/block-list';
import { getLayoutType, getLayoutTypes } from '../layouts';
const layoutBlockSupportKey = '__experimentalLayout';
@@ -177,7 +177,7 @@ export const withLayoutStyles = createHigherOrderComponent(
},
[ clientId ]
);
- const element = useContext( Head.context );
+ const element = useContext( BlockList.__unstableElementContext );
const shouldRenderLayoutStyles = supportLayout || hasInnerBlocks;
const { layout = {} } = attributes;
const usedLayout = !! layout && layout.inherit ? defaultLayout : layout;