From 8ee997a54094f675701fb538568a7dfcbf370072 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Fri, 21 May 2021 12:44:11 +0300 Subject: [PATCH 1/7] Block editor: move layout styles to document head (instead of rendering inline) --- .../src/components/block-list/index.js | 17 ++++++++++++++++- packages/block-editor/src/hooks/layout.js | 11 +++++++---- 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 46e5d56f9f0317..e374b96cc5d445 100644 --- 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 { isOutlineMode, isFocusMode, isNavigationMode } = useSelect( ( select ) => { @@ -47,6 +59,7 @@ function Root( { className, children } ) { useBlockSelectionClearer(), useBlockDropZone(), useInBetweenInserter(), + setElement, ] ) } className={ classnames( 'block-editor-block-list__layout is-root-container', @@ -58,6 +71,8 @@ function Root( { className, children } ) { } ) } > + { element && + createPortal( , element.ownerDocument.head ) } { children } ); diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 2651521bd4574a..1904b8eb62a525 100644 --- 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; @@ -212,10 +213,12 @@ export const withLayoutStyles = createHigherOrderComponent( return ( <> - + + + ); From 05ff925573ca198fa44ac7a8102fe0ba2c492bde Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Thu, 10 Jun 2021 19:13:48 +0300 Subject: [PATCH 2/7] Also move front-end styles --- lib/block-supports/layout.php | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 6d09ffa6d4e751..e0462469288ffa 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -86,7 +86,14 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { 1 ); - return $content . ''; + add_action( + 'wp_head', + function () use ( $style ) { + echo ''; + } + ); + + return $content; } // This can be removed when plugin support requires WordPress 5.8.0+. From bc621ebfad4f28a53fb01ebae24a3e9e1709d218 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Fri, 11 Jun 2021 11:38:02 +0300 Subject: [PATCH 3/7] Move into body --- .../src/components/block-list/head.js | 18 ++++++ .../src/components/block-list/index.js | 56 ++++++++----------- packages/block-editor/src/hooks/duotone.js | 17 ++++-- packages/block-editor/src/hooks/layout.js | 12 ++-- 4 files changed, 60 insertions(+), 43 deletions(-) create mode 100644 packages/block-editor/src/components/block-list/head.js 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..b0221df5579121 --- /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 ( + +
+ { element && 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 e374b96cc5d445..d393c31c8d41a0 100644 --- 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 ( -
- { element && - createPortal( , element.ownerDocument.head ) } - { children } -
+ +
+ { children } +
+ ); } diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js index c0de112b020d8d..cc26101ce5a533 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,18 @@ const withDuotoneStyles = createHigherOrderComponent( const className = classnames( props?.className, id ); + const element = useContext( Head.context ); + return ( <> - + { createPortal( + , + element + ) } ); diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 1904b8eb62a525..e788f339884506 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,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 ( <> - + { createPortal( - + />, + element + ) } ); From a45edcf73d546233aa9bbed8e9ccc1f7387d2228 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Fri, 11 Jun 2021 13:24:31 +0300 Subject: [PATCH 4/7] Fix style and svg defs position on front end --- lib/block-supports/duotone.php | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) 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. From 98533f84edef8ef2949a61f02d3d16fd74b81ca9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Wed, 16 Jun 2021 17:19:47 +0300 Subject: [PATCH 5/7] Fix e2e test error --- packages/block-editor/src/components/block-list/head.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list/head.js b/packages/block-editor/src/components/block-list/head.js index b0221df5579121..4f79165c295dd1 100644 --- a/packages/block-editor/src/components/block-list/head.js +++ b/packages/block-editor/src/components/block-list/head.js @@ -10,7 +10,7 @@ export function Head( { children } ) { return (
- { element && children } + { children } ); } From 53bb6107affd738540abef7e8c4d5446abd57d99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Fri, 9 Jul 2021 13:06:21 +0300 Subject: [PATCH 6/7] Address feedback and attempt to fix e2e tests --- lib/block-supports/layout.php | 5 ++++- packages/block-editor/src/hooks/duotone.js | 17 +++++++++-------- packages/block-editor/src/hooks/layout.js | 15 ++++++++------- 3 files changed, 21 insertions(+), 16 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index e0462469288ffa..9048ca6183bd10 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -86,8 +86,11 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { 1 ); + // 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_head', + 'wp_footer', function () use ( $style ) { echo ''; } diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js index cc26101ce5a533..46748fb04f3e6c 100644 --- a/packages/block-editor/src/hooks/duotone.js +++ b/packages/block-editor/src/hooks/duotone.js @@ -246,14 +246,15 @@ const withDuotoneStyles = createHigherOrderComponent( return ( <> - { createPortal( - , - element - ) } + { element && + createPortal( + , + element + ) } ); diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index e788f339884506..01f9c0b18c1cb5 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -216,13 +216,14 @@ export const withLayoutStyles = createHigherOrderComponent( return ( <> - { createPortal( - , - element - ) } + { element && + createPortal( + , + element + ) } ); From 5b55a9d61a7a4310a5351a212ae8359941b98056 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Tue, 13 Jul 2021 21:56:55 +0300 Subject: [PATCH 7/7] Remove display:none --- packages/block-editor/src/components/block-list/head.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list/head.js b/packages/block-editor/src/components/block-list/head.js index 4f79165c295dd1..9f1ce763203524 100644 --- a/packages/block-editor/src/components/block-list/head.js +++ b/packages/block-editor/src/components/block-list/head.js @@ -9,7 +9,7 @@ export function Head( { children } ) { const [ element, setElement ] = useState(); return ( -
+
{ children } );