Move into body

WordPress · Jun 14, 2021 · e8ab58b · e8ab58b
1 parent 61b8e89
commit e8ab58b
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 43 deletions.
diff --git a/packages/block-editor/src/components/block-list/head.js b/packages/block-editor/src/components/block-list/head.js
@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useState } from '@wordpress/element';
+
+const context = createContext();
+
+export function Head( { children } ) {
+	const [ element, setElement ] = useState();
+	return (
+		<context.Provider value={ element }>
+			<div ref={ setElement } style={ { display: 'none' } } />
+			{ element && children }
+		</context.Provider>
+	);
+}
+
+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
@@ -8,13 +8,7 @@ import classnames from 'classnames';
  */
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
 import { useViewportMatch, useMergeRefs } from '@wordpress/compose';
-import {
-	createContext,
-	useState,
-	useMemo,
-	createPortal,
-} from '@wordpress/element';
-import { createSlotFill } from '@wordpress/components';
+import { createContext, useState, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -28,16 +22,11 @@ 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';
 
 export const IntersectionObserver = createContext();
-const { Fill: BlockHeadFill, Slot: BlockHeadSlot } = createSlotFill(
-	'__unstableBlockHead'
-);
-
-export { BlockHeadFill };
 
 function Root( { className, children } ) {
-	const [ element, setElement ] = useState();
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const { isOutlineMode, isFocusMode, isNavigationMode } = useSelect(
 		( select ) => {
@@ -54,27 +43,26 @@ function Root( { className, children } ) {
 		[]
 	);
 	return (
-		<div
-			ref={ useMergeRefs( [
-				useBlockSelectionClearer(),
-				useBlockDropZone(),
-				useInBetweenInserter(),
-				setElement,
-			] ) }
-			className={ classnames(
-				'block-editor-block-list__layout is-root-container',
-				className,
-				{
-					'is-outline-mode': isOutlineMode,
-					'is-focus-mode': isFocusMode && isLargeViewport,
-					'is-navigate-mode': isNavigationMode,
-				}
-			) }
-		>
-			{ element &&
-				createPortal( <BlockHeadSlot />, element.ownerDocument.head ) }
-			{ children }
-		</div>
+		<Head>
+			<div
+				ref={ useMergeRefs( [
+					useBlockSelectionClearer(),
+					useBlockDropZone(),
+					useInBetweenInserter(),
+				] ) }
+				className={ classnames(
+					'block-editor-block-list__layout is-root-container',
+					className,
+					{
+						'is-outline-mode': isOutlineMode,
+						'is-focus-mode': isFocusMode && isLargeViewport,
+						'is-navigate-mode': isNavigationMode,
+					}
+				) }
+			>
+				{ children }
+			</div>
+		</Head>
 	);
 }
 

diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
@@ -11,6 +11,7 @@ import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import { SVG } from '@wordpress/components';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
+import { useContext, createPortal } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -21,6 +22,8 @@ import {
 	useSetting,
 } from '../components';
 
+import { Head } from '../components/block-list/head';
+
 /**
  * Convert a list of colors to an object of R, G, and B values.
  *
@@ -230,13 +233,18 @@ const withDuotoneStyles = createHigherOrderComponent(
 
 		const className = classnames( props?.className, id );
 
+		const element = useContext( Head.context );
+
 		return (
 			<>
-				<DuotoneFilter
-					selector={ selectorsGroup }
-					id={ id }
-					values={ getValuesFromColors( values ) }
-				/>
+				{ createPortal(
+					<DuotoneFilter
+						selector={ selectorsGroup }
+						id={ id }
+						values={ getValuesFromColors( values ) }
+					/>,
+					element
+				) }
 				<BlockListBlock { ...props } className={ className } />
 			</>
 		);

diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
@@ -20,6 +20,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
+import { useContext, createPortal } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -28,7 +29,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 { BlockHeadFill } from '../components/block-list';
+import { Head } from '../components/block-list/head';
 
 function LayoutPanel( { setAttributes, attributes } ) {
 	const { layout = {} } = attributes;
@@ -211,14 +212,17 @@ export const withLayoutStyles = createHigherOrderComponent(
 			`wp-container-${ id }`
 		);
 
+		const element = useContext( Head.context );
+
 		return (
 			<>
-				<BlockHeadFill>
+				{ createPortal(
 					<LayoutStyle
 						selector={ `.wp-container-${ id }` }
 						layout={ usedLayout }
-					/>
-				</BlockHeadFill>
+					/>,
+					element
+				) }
 				<BlockListBlock { ...props } className={ className } />
 			</>
 		);