Block editor: don't render layout and duotone styles in between blocks (

#32083)
WordPress · Aug 30, 2021 · 404619f · 404619f
1 parent c985f56
commit 404619f
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 29 deletions.
diff --git a/lib/block-supports/duotone.php b/lib/block-supports/duotone.php
@@ -351,7 +351,15 @@ function ( $selector ) use ( $duotone_id ) {
 		1
 	);
 
-	return $content . $duotone;
+	add_action(
+		// Ideally we should use wp_head, but SVG defs can't be put in there.
+		'wp_footer',
+		function () use ( $duotone ) {
+			echo $duotone;
+		}
+	);
+
+	return $content;
 }
 
 // Register the block support.

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
@@ -86,7 +86,17 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 		1
 	);
 
-	return $content . '<style>' . $style . '</style>';
+	// Ideally styles should be loaded in the head, but blocks may be parsed
+	// after that, so loading in the footer for now.
+	// See https://core.trac.wordpress.org/ticket/53494.
+	add_action(
+		'wp_footer',
+		function () use ( $style ) {
+			echo '<style>' . $style . '</style>';
+		}
+	);
+
+	return $content;
 }
 
 // Register the block support.

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 } />
+			{ 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
@@ -22,6 +22,7 @@ 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();
 
@@ -42,24 +43,26 @@ function Root( { className, children } ) {
 		[]
 	);
 	return (
-		<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>
+			<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
@@ -20,6 +21,7 @@ import {
 	__experimentalDuotoneControl as DuotoneControl,
 	useSetting,
 } from '../components';
+import { Head } from '../components/block-list/head';
 
 const EMPTY_ARRAY = [];
 
@@ -236,13 +238,19 @@ const withDuotoneStyles = createHigherOrderComponent(
 
 		const className = classnames( props?.className, id );
 
+		const element = useContext( Head.context );
+
 		return (
 			<>
-				<DuotoneFilter
-					selector={ selectorsGroup }
-					id={ id }
-					values={ getValuesFromColors( values ) }
-				/>
+				{ element &&
+					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,6 +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 { Head } from '../components/block-list/head';
 
 function LayoutPanel( { setAttributes, attributes } ) {
 	const { layout = {} } = attributes;
@@ -207,12 +209,18 @@ export const withLayoutStyles = createHigherOrderComponent(
 			`wp-container-${ id }`
 		);
 
+		const element = useContext( Head.context );
+
 		return (
 			<>
-				<LayoutStyle
-					selector={ `.wp-container-${ id }` }
-					layout={ usedLayout }
-				/>
+				{ element &&
+					createPortal(
+						<LayoutStyle
+							selector={ `.wp-container-${ id }` }
+							layout={ usedLayout }
+						/>,
+						element
+					) }
 				<BlockListBlock { ...props } className={ className } />
 			</>
 		);