Block editor: move layout styles to document head (instead of renderi…

…ng inline)
WordPress · May 21, 2021 · 6a09a19 · 6a09a19
1 parent 4060caa
commit 6a09a19
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
@@ -8,7 +8,13 @@ import classnames from 'classnames';
  */
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
 import { useViewportMatch, useMergeRefs } from '@wordpress/compose';
-import { createContext, useState, useMemo } from '@wordpress/element';
+import {
+ createContext,
+ useState,
+ useMemo,
+ createPortal,
+} from '@wordpress/element';
+import { createSlotFill } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -24,8 +30,14 @@ import BlockToolsBackCompat from '../block-tools/back-compat';
 import { useBlockSelectionClearer } from '../block-selection-clearer';
 
 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 {
  isTyping,
@@ -52,6 +64,7 @@ function Root( { className, children } ) {
  useBlockSelectionClearer(),
  useBlockDropZone(),
  useInBetweenInserter(),
+ setElement,
  ] ) }
  className={ classnames(
  'block-editor-block-list__layout is-root-container',
@@ -64,6 +77,8 @@ function Root( { className, children } ) {
  }
  ) }
  >
+ { element &&
+ createPortal( <BlockHeadSlot />, element.ownerDocument.head ) }
  { children }
  </div>
  );

diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
@@ -28,6 +28,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';
 
 function LayoutPanel( { setAttributes, attributes } ) {
  const { layout = {} } = attributes;
@@ -209,10 +210,12 @@ export const withLayoutStyles = createHigherOrderComponent(
 
  return (
  <>
- <LayoutStyle
- selector={ `.wp-container-${ id }` }
- layout={ usedLayout }
- />
+ <BlockHeadFill>
+ <LayoutStyle
+ selector={ `.wp-container-${ id }` }
+ layout={ usedLayout }
+ />
+ </BlockHeadFill>
  <BlockListBlock { ...props } className={ className } />
  </>
  );