From 668110b7b6406636784ac8f8e99318f673274871 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <4710635+ellatrix@users.noreply.github.com> Date: Wed, 14 Jul 2021 00:06:31 +0300 Subject: [PATCH] Block editor: don't render layout and duotone styles in between blocks (#32083) --- lib/block-supports/duotone.php | 10 ++++- lib/block-supports/layout.php | 12 +++++- .../src/components/block-list/head.js | 18 +++++++++ .../src/components/block-list/index.js | 39 ++++++++++--------- packages/block-editor/src/hooks/duotone.js | 18 ++++++--- packages/block-editor/src/hooks/layout.js | 16 ++++++-- 6 files changed, 84 insertions(+), 29 deletions(-) create mode 100644 packages/block-editor/src/components/block-list/head.js diff --git a/lib/block-supports/duotone.php b/lib/block-supports/duotone.php index fcf9191dc32775..5869d521b2d380 100644 --- 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 index 6d09ffa6d4e751..9048ca6183bd10 100644 --- 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 . ''; + // 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 ''; + } + ); + + return $content; } // This can be removed when plugin support requires WordPress 5.8.0+. diff --git a/packages/block-editor/src/components/block-list/head.js b/packages/block-editor/src/components/block-list/head.js new file mode 100644 index 00000000000000..9f1ce763203524 --- /dev/null +++ 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 ( + +
+ { 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 46e5d56f9f0317..d393c31c8d41a0 100644 --- 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 ( -
- { children } -
+ +
+ { children } +
+ ); } diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js index c0de112b020d8d..46748fb04f3e6c 100644 --- 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 = []; @@ -240,13 +242,19 @@ const withDuotoneStyles = createHigherOrderComponent( const className = classnames( props?.className, id ); + const element = useContext( Head.context ); + return ( <> - + { element && + createPortal( + , + element + ) } ); diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 2651521bd4574a..01f9c0b18c1cb5 100644 --- 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; @@ -210,12 +212,18 @@ export const withLayoutStyles = createHigherOrderComponent( `wp-container-${ id }` ); + const element = useContext( Head.context ); + return ( <> - + { element && + createPortal( + , + element + ) } );