Block editor: move layout styles to document head (instead of rendering inline)

Author: ellatrix

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>
 	);

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 } />
 			</>
 		);