Block editor: move layout styles to document head (instead of rendering inline) #32083
Conversation
@@ -64,6 +77,8 @@ function Root( { className, children } ) { | |||
} | |||
) } | |||
> | |||
{ element && | |||
createPortal( <BlockHeadSlot />, element.ownerDocument.head ) } |
Ideally it would be good if the portal can be created by the component adding the styles, but there's currently no good way to access the block ref (and the owner document). A future refactor should enable that.
Size Change: +57 B (0%) Total Size: 1.07 MB
|
Filename | Size |
---|---|
build/a11y/index.min.js |
1.12 kB |
build/api-fetch/index.min.js |
2.44 kB |
build/autop/index.min.js |
2.28 kB |
build/blob/index.min.js |
673 B |
build/block-directory/index.min.js |
6.62 kB |
build/block-directory/style-rtl.css |
1.02 kB |
build/block-directory/style.css |
1.02 kB |
build/block-editor/style-rtl.css |
14 kB |
build/block-editor/style.css |
14 kB |
build/block-library/blocks/archives/editor-rtl.css |
61 B |
build/block-library/blocks/archives/editor.css |
60 B |
build/block-library/blocks/archives/style-rtl.css |
65 B |
build/block-library/blocks/archives/style.css |
65 B |
build/block-library/blocks/audio/editor-rtl.css |
58 B |
build/block-library/blocks/audio/editor.css |
58 B |
build/block-library/blocks/audio/style-rtl.css |
112 B |
build/block-library/blocks/audio/style.css |
112 B |
build/block-library/blocks/audio/theme-rtl.css |
125 B |
build/block-library/blocks/audio/theme.css |
125 B |
build/block-library/blocks/block/editor-rtl.css |
161 B |
build/block-library/blocks/block/editor.css |
161 B |
build/block-library/blocks/button/editor-rtl.css |
475 B |
build/block-library/blocks/button/editor.css |
474 B |
build/block-library/blocks/button/style-rtl.css |
603 B |
build/block-library/blocks/button/style.css |
602 B |
build/block-library/blocks/buttons/editor-rtl.css |
315 B |
build/block-library/blocks/buttons/editor.css |
315 B |
build/block-library/blocks/buttons/style-rtl.css |
375 B |
build/block-library/blocks/buttons/style.css |
375 B |
build/block-library/blocks/calendar/style-rtl.css |
208 B |
build/block-library/blocks/calendar/style.css |
208 B |
build/block-library/blocks/categories/editor-rtl.css |
84 B |
build/block-library/blocks/categories/editor.css |
83 B |
build/block-library/blocks/categories/style-rtl.css |
79 B |
build/block-library/blocks/categories/style.css |
79 B |
build/block-library/blocks/code/style-rtl.css |
90 B |
build/block-library/blocks/code/style.css |
90 B |
build/block-library/blocks/code/theme-rtl.css |
131 B |
build/block-library/blocks/code/theme.css |
131 B |
build/block-library/blocks/columns/editor-rtl.css |
190 B |
build/block-library/blocks/columns/editor.css |
190 B |
build/block-library/blocks/columns/style-rtl.css |
475 B |
build/block-library/blocks/columns/style.css |
476 B |
build/block-library/blocks/cover/editor-rtl.css |
670 B |
build/block-library/blocks/cover/editor.css |
670 B |
build/block-library/blocks/cover/style-rtl.css |
1.22 kB |
build/block-library/blocks/cover/style.css |
1.23 kB |
build/block-library/blocks/embed/editor-rtl.css |
486 B |
build/block-library/blocks/embed/editor.css |
486 B |
build/block-library/blocks/embed/style-rtl.css |
401 B |
build/block-library/blocks/embed/style.css |
400 B |
build/block-library/blocks/embed/theme-rtl.css |
124 B |
build/block-library/blocks/embed/theme.css |
124 B |
build/block-library/blocks/file/editor-rtl.css |
301 B |
build/block-library/blocks/file/editor.css |
300 B |
build/block-library/blocks/file/style-rtl.css |
255 B |
build/block-library/blocks/file/style.css |
255 B |
build/block-library/blocks/file/view.min.js |
780 B |
build/block-library/blocks/freeform/editor-rtl.css |
2.44 kB |
build/block-library/blocks/freeform/editor.css |
2.44 kB |
build/block-library/blocks/gallery/editor-rtl.css |
704 B |
build/block-library/blocks/gallery/editor.css |
705 B |
build/block-library/blocks/gallery/style-rtl.css |
1.06 kB |
build/block-library/blocks/gallery/style.css |
1.06 kB |
build/block-library/blocks/gallery/theme-rtl.css |
122 B |
build/block-library/blocks/gallery/theme.css |
122 B |
build/block-library/blocks/group/editor-rtl.css |
160 B |
build/block-library/blocks/group/editor.css |
160 B |
build/block-library/blocks/group/style-rtl.css |
57 B |
build/block-library/blocks/group/style.css |
57 B |
build/block-library/blocks/group/theme-rtl.css |
93 B |
build/block-library/blocks/group/theme.css |
93 B |
build/block-library/blocks/heading/editor-rtl.css |
152 B |
build/block-library/blocks/heading/editor.css |
152 B |
build/block-library/blocks/heading/style-rtl.css |
76 B |
build/block-library/blocks/heading/style.css |
76 B |
build/block-library/blocks/home-link/style-rtl.css |
259 B |
build/block-library/blocks/home-link/style.css |
259 B |
build/block-library/blocks/html/editor-rtl.css |
281 B |
build/block-library/blocks/html/editor.css |
281 B |
build/block-library/blocks/image/editor-rtl.css |
729 B |
build/block-library/blocks/image/editor.css |
727 B |
build/block-library/blocks/image/style-rtl.css |
481 B |
build/block-library/blocks/image/style.css |
485 B |
build/block-library/blocks/image/theme-rtl.css |
124 B |
build/block-library/blocks/image/theme.css |
124 B |
build/block-library/blocks/latest-comments/style-rtl.css |
286 B |
build/block-library/blocks/latest-comments/style.css |
286 B |
build/block-library/blocks/latest-posts/editor-rtl.css |
137 B |
build/block-library/blocks/latest-posts/editor.css |
137 B |
build/block-library/blocks/latest-posts/style-rtl.css |
526 B |
build/block-library/blocks/latest-posts/style.css |
524 B |
build/block-library/blocks/list/style-rtl.css |
63 B |
build/block-library/blocks/list/style.css |
63 B |
build/block-library/blocks/media-text/editor-rtl.css |
263 B |
build/block-library/blocks/media-text/editor.css |
264 B |
build/block-library/blocks/media-text/style-rtl.css |
492 B |
build/block-library/blocks/media-text/style.css |
489 B |
build/block-library/blocks/more/editor-rtl.css |
434 B |
build/block-library/blocks/more/editor.css |
434 B |
build/block-library/blocks/navigation-link/editor-rtl.css |
474 B |
build/block-library/blocks/navigation-link/editor.css |
473 B |
build/block-library/blocks/navigation-link/style-rtl.css |
94 B |
build/block-library/blocks/navigation-link/style.css |
94 B |
build/block-library/blocks/navigation/editor-rtl.css |
1.69 kB |
build/block-library/blocks/navigation/editor.css |
1.69 kB |
build/block-library/blocks/navigation/style-rtl.css |
1.65 kB |
build/block-library/blocks/navigation/style.css |
1.66 kB |
build/block-library/blocks/navigation/view.min.js |
2.87 kB |
build/block-library/blocks/nextpage/editor-rtl.css |
395 B |
build/block-library/blocks/nextpage/editor.css |
395 B |
build/block-library/blocks/page-list/editor-rtl.css |
310 B |
build/block-library/blocks/page-list/editor.css |
311 B |
build/block-library/blocks/page-list/style-rtl.css |
240 B |
build/block-library/blocks/page-list/style.css |
240 B |
build/block-library/blocks/paragraph/editor-rtl.css |
157 B |
build/block-library/blocks/paragraph/editor.css |
157 B |
build/block-library/blocks/paragraph/style-rtl.css |
247 B |
build/block-library/blocks/paragraph/style.css |
248 B |
build/block-library/blocks/post-author/editor-rtl.css |
209 B |
build/block-library/blocks/post-author/editor.css |
209 B |
build/block-library/blocks/post-author/style-rtl.css |
183 B |
build/block-library/blocks/post-author/style.css |
184 B |
build/block-library/blocks/post-comments-form/style-rtl.css |
140 B |
build/block-library/blocks/post-comments-form/style.css |
140 B |
build/block-library/blocks/post-comments/style-rtl.css |
360 B |
build/block-library/blocks/post-comments/style.css |
359 B |
build/block-library/blocks/post-content/editor-rtl.css |
139 B |
build/block-library/blocks/post-content/editor.css |
139 B |
build/block-library/blocks/post-excerpt/editor-rtl.css |
73 B |
build/block-library/blocks/post-excerpt/editor.css |
73 B |
build/block-library/blocks/post-excerpt/style-rtl.css |
69 B |
build/block-library/blocks/post-excerpt/style.css |
69 B |
build/block-library/blocks/post-featured-image/editor-rtl.css |
338 B |
build/block-library/blocks/post-featured-image/editor.css |
338 B |
build/block-library/blocks/post-featured-image/style-rtl.css |
141 B |
build/block-library/blocks/post-featured-image/style.css |
141 B |
build/block-library/blocks/post-template/editor-rtl.css |
100 B |
build/block-library/blocks/post-template/editor.css |
99 B |
build/block-library/blocks/post-template/style-rtl.css |
379 B |
build/block-library/blocks/post-template/style.css |
380 B |
build/block-library/blocks/post-terms/style-rtl.css |
73 B |
build/block-library/blocks/post-terms/style.css |
73 B |
build/block-library/blocks/post-title/style-rtl.css |
60 B |
build/block-library/blocks/post-title/style.css |
60 B |
build/block-library/blocks/preformatted/style-rtl.css |
103 B |
build/block-library/blocks/preformatted/style.css |
103 B |
build/block-library/blocks/pullquote/editor-rtl.css |
183 B |
build/block-library/blocks/pullquote/editor.css |
183 B |
build/block-library/blocks/pullquote/style-rtl.css |
318 B |
build/block-library/blocks/pullquote/style.css |
318 B |
build/block-library/blocks/pullquote/theme-rtl.css |
169 B |
build/block-library/blocks/pullquote/theme.css |
169 B |
build/block-library/blocks/query-pagination-numbers/editor-rtl.css |
122 B |
build/block-library/blocks/query-pagination-numbers/editor.css |
121 B |
build/block-library/blocks/query-pagination/editor-rtl.css |
270 B |
build/block-library/blocks/query-pagination/editor.css |
262 B |
build/block-library/blocks/query-pagination/style-rtl.css |
168 B |
build/block-library/blocks/query-pagination/style.css |
168 B |
build/block-library/blocks/query-title/editor-rtl.css |
86 B |
build/block-library/blocks/query-title/editor.css |
86 B |
build/block-library/blocks/query/editor-rtl.css |
131 B |
build/block-library/blocks/query/editor.css |
132 B |
build/block-library/blocks/quote/style-rtl.css |
169 B |
build/block-library/blocks/quote/style.css |
169 B |
build/block-library/blocks/quote/theme-rtl.css |
221 B |
build/block-library/blocks/quote/theme.css |
221 B |
build/block-library/blocks/rss/editor-rtl.css |
201 B |
build/block-library/blocks/rss/editor.css |
202 B |
build/block-library/blocks/rss/style-rtl.css |
290 B |
build/block-library/blocks/rss/style.css |
290 B |
build/block-library/blocks/search/editor-rtl.css |
211 B |
build/block-library/blocks/search/editor.css |
211 B |
build/block-library/blocks/search/style-rtl.css |
359 B |
build/block-library/blocks/search/style.css |
362 B |
build/block-library/blocks/search/theme-rtl.css |
64 B |
build/block-library/blocks/search/theme.css |
64 B |
build/block-library/blocks/separator/editor-rtl.css |
99 B |
build/block-library/blocks/separator/editor.css |
99 B |
build/block-library/blocks/separator/style-rtl.css |
251 B |
build/block-library/blocks/separator/style.css |
251 B |
build/block-library/blocks/separator/theme-rtl.css |
172 B |
build/block-library/blocks/separator/theme.css |
172 B |
build/block-library/blocks/shortcode/editor-rtl.css |
476 B |
build/block-library/blocks/shortcode/editor.css |
476 B |
build/block-library/blocks/site-logo/editor-rtl.css |
465 B |
build/block-library/blocks/site-logo/editor.css |
465 B |
build/block-library/blocks/site-logo/style-rtl.css |
154 B |
build/block-library/blocks/site-logo/style.css |
154 B |
build/block-library/blocks/site-tagline/editor-rtl.css |
87 B |
build/block-library/blocks/site-tagline/editor.css |
87 B |
build/block-library/blocks/site-title/editor-rtl.css |
85 B |
build/block-library/blocks/site-title/editor.css |
85 B |
build/block-library/blocks/social-link/editor-rtl.css |
164 B |
build/block-library/blocks/social-link/editor.css |
165 B |
build/block-library/blocks/social-links/editor-rtl.css |
800 B |
build/block-library/blocks/social-links/editor.css |
799 B |
build/block-library/blocks/social-links/style-rtl.css |
1.34 kB |
build/block-library/blocks/social-links/style.css |
1.34 kB |
build/block-library/blocks/spacer/editor-rtl.css |
308 B |
build/block-library/blocks/spacer/editor.css |
308 B |
build/block-library/blocks/spacer/style-rtl.css |
48 B |
build/block-library/blocks/spacer/style.css |
48 B |
build/block-library/blocks/table/editor-rtl.css |
478 B |
build/block-library/blocks/table/editor.css |
478 B |
build/block-library/blocks/table/style-rtl.css |
480 B |
build/block-library/blocks/table/style.css |
480 B |
build/block-library/blocks/table/theme-rtl.css |
188 B |
build/block-library/blocks/table/theme.css |
188 B |
build/block-library/blocks/tag-cloud/style-rtl.css |
146 B |
build/block-library/blocks/tag-cloud/style.css |
146 B |
build/block-library/blocks/template-part/editor-rtl.css |
551 B |
build/block-library/blocks/template-part/editor.css |
550 B |
build/block-library/blocks/template-part/theme-rtl.css |
101 B |
build/block-library/blocks/template-part/theme.css |
101 B |
build/block-library/blocks/term-description/editor-rtl.css |
90 B |
build/block-library/blocks/term-description/editor.css |
90 B |
build/block-library/blocks/text-columns/editor-rtl.css |
95 B |
build/block-library/blocks/text-columns/editor.css |
95 B |
build/block-library/blocks/text-columns/style-rtl.css |
166 B |
build/block-library/blocks/text-columns/style.css |
166 B |
build/block-library/blocks/verse/style-rtl.css |
87 B |
build/block-library/blocks/verse/style.css |
87 B |
build/block-library/blocks/video/editor-rtl.css |
569 B |
build/block-library/blocks/video/editor.css |
570 B |
build/block-library/blocks/video/style-rtl.css |
173 B |
build/block-library/blocks/video/style.css |
173 B |
build/block-library/blocks/video/theme-rtl.css |
124 B |
build/block-library/blocks/video/theme.css |
124 B |
build/block-library/common-rtl.css |
1.29 kB |
build/block-library/common.css |
1.29 kB |
build/block-library/editor-rtl.css |
9.81 kB |
build/block-library/editor.css |
9.81 kB |
build/block-library/reset-rtl.css |
514 B |
build/block-library/reset.css |
515 B |
build/block-library/style-rtl.css |
10.3 kB |
build/block-library/style.css |
10.3 kB |
build/block-library/theme-rtl.css |
692 B |
build/block-library/theme.css |
693 B |
build/block-serialization-spec-parser/index.min.js |
3.06 kB |
build/components/style-rtl.css |
16.1 kB |
build/components/style.css |
16.1 kB |
build/customize-widgets/style-rtl.css |
1.48 kB |
build/customize-widgets/style.css |
1.48 kB |
build/data-controls/index.min.js |
830 B |
build/deprecated/index.min.js |
738 B |
build/edit-navigation/style-rtl.css |
3.12 kB |
build/edit-navigation/style.css |
3.12 kB |
build/edit-post/classic-rtl.css |
483 B |
build/edit-post/classic.css |
483 B |
build/edit-post/style-rtl.css |
7.25 kB |
build/edit-post/style.css |
7.24 kB |
build/edit-site/style-rtl.css |
5.04 kB |
build/edit-site/style.css |
5.03 kB |
build/edit-widgets/style-rtl.css |
3.88 kB |
build/edit-widgets/style.css |
3.89 kB |
build/editor/style-rtl.css |
3.88 kB |
build/editor/style.css |
3.88 kB |
build/escape-html/index.min.js |
739 B |
build/format-library/style-rtl.css |
668 B |
build/format-library/style.css |
669 B |
build/html-entities/index.min.js |
628 B |
build/is-shallow-equal/index.min.js |
709 B |
build/keycodes/index.min.js |
1.43 kB |
build/list-reusable-blocks/index.min.js |
2.07 kB |
build/list-reusable-blocks/style-rtl.css |
842 B |
build/list-reusable-blocks/style.css |
842 B |
build/nux/index.min.js |
2.31 kB |
build/nux/style-rtl.css |
745 B |
build/nux/style.css |
742 B |
build/plugins/index.min.js |
1.99 kB |
build/primitives/index.min.js |
1.06 kB |
build/react-i18n/index.min.js |
924 B |
build/redux-routine/index.min.js |
2.82 kB |
build/reusable-blocks/index.min.js |
2.56 kB |
build/reusable-blocks/style-rtl.css |
256 B |
build/reusable-blocks/style.css |
256 B |
build/server-side-render/index.min.js |
1.64 kB |
build/shortcode/index.min.js |
1.68 kB |
build/token-list/index.min.js |
847 B |
build/viewport/index.min.js |
1.28 kB |
build/widgets/index.min.js |
6.48 kB |
build/widgets/style-rtl.css |
1.04 kB |
build/widgets/style.css |
1.05 kB |
build/wordcount/index.min.js |
1.24 kB |
Is it possible to avoid the slots here? Can't we just use |
We should also do the same for other hooks that add styles like that. I'm thinking about duotone and elements. |
Yes, we should do the same. There's no way to avoid the slot for now I think, because the Block filter doesn't have access to the owner document. |
What about the frontend? Do we have the same inline style tags there? should we try to move them as well? |
Oh, yes. I didn't think about that :) |
Also wonder who the lazy loading of styles currently work? Can we use similar techniques (in the frontend) cc @aristath |
@youknowriad So this is related to something I'm wondering about. There's a few options where to put the style elements, but for layout style, it seems better to load them in the head because you wouldn't wan't any structural shifts after the content has rendered on the page. Lazy loading the styles seems completely out of the question? |
Lazy loading styles works on the frontend because everything goes through |
Getting an error with the CPT "lock all" template, which happens when the content is replaced in the store though
|
Error should be resolved now. Would be good to get this into the release for the template editor. |
Changes look good and this works as expected for me.
I see that we have a few different places in which we output <style>
tags within the body that we could look into consolidating for clarity in a follow-up.
lib/block-supports/layout.php
Outdated
add_action( | ||
'wp_head', | ||
function () use ( $style ) { | ||
echo '<style>' . $style . '</style>'; | ||
} | ||
); |
I do believe using wp_head
here will only work for block based themes.
On classic themes the content isn't parsed after wp_head
is already runned so this will never get printed. Basically the same reason global styles are loaded in the footer when loading core assets individually. See https://core.trac.wordpress.org/changeset/51309
@ajlende Removed the |
Personally, I don't fell confident adding this to 5.8 that late. What do you think about leaving this for a potential 5.8.x and have a couple plugin releases with it? |
Sounds good to me. |
@@ -240,13 +242,19 @@ const withDuotoneStyles = createHigherOrderComponent( | |||
|
|||
const className = classnames( props?.className, id ); | |||
|
|||
const element = useContext( Head.context ); |
This breaks the hooks rules (it should be called before the if call above)
@@ -210,12 +212,18 @@ export const withLayoutStyles = createHigherOrderComponent( | |||
`wp-container-${ id }` | |||
); | |||
|
|||
const element = useContext( Head.context ); |
same here
* Fix API docs generation (#33384) * Docs: use markdown headings instead of links for API declarations (#33381) * Docs: Run Prettier after updating API in documentation (#33498) (cherry picked from commit 626f233) * Use tabs instead of spaces in block transform doc example (#33549) (cherry picked from commit 8afca1e) * Fix metabox reordering (#30617). * Block editor: don't render layout and duotone styles in between blocks (#32083) * Widgets: Allow HTML tags in description (#33814) * Widgets: Allow HTML tags in description * Use `dangerouslySetInnerHTML` Avoid `<div />` inside the `<p />` tag * Describe by dangerouslySetInnerHTML is used * Use safeHTML * Update comment * Editor: Set 'hide_empty' for the most used terms query (#33457) Don't include terms that aren't assigned to any posts as "most used" terms. * Update widget editor help links to point to the new support article (#33482) * If select-all fires in .editor-post-title__input, end the process.. (#33621) * Writing flow: select all: remove early return for post title (#33699) * Call onChangeSectionExpanded conditionally (#33618) * FontSizePicker: Use number values when the initial value is a number (#33679) * FontSizePicker: Don't use units if the value is a number * Add unit tests * Disable units when we have number values * Fix justification for button block when selected (#33739) * Remove margin setting, auto right conflict with justify buttons * Per review, add little margin back * Add error boundaries to widget screens (#33771) * Add error boundary to edit widgets screen * Add error boundary to customize widgets * Refactor sidebar controls provider to application level so that its state is not lost when re-initializing * Revert "Refactor sidebar controls provider to application level so that its state is not lost when re-initializing" This reverts commit 7d607ff. * Remove rebootability from customize widgets * Remove debug code * Fix insertion point in Widgets editors (#33802) * Default batch processor: Respect the batch endpoint's maxItems (#34280) This updates the default batch processor to make multiple batch requests if the number of requests to process exceeds the number of requests that the batch endpoint can handle. We determine the number of requests that the batch endpoint can handle by making a preflight OPTIONS request to /batch/v1. By default it is 25 requests. See https://make.wordpress.org/core/2020/11/20/rest-api-batch-framework-in-wordpress-5-6/. * Fix button block focus trap after a URL has been added (#34314) * Rework button block link UI to match RichText format implementation * Refine some more, determine visibility by selection and url state * Add e2e test * Also focus rich text when unlinking using a keyboard shortcut * Text for dropdown fields within legacy widgets in the Customizer is off centered (#34076) * Fix ESLint errors reported * Regenerate autogenerated docs * Update the `INSERTER_SEARCH_SELECTOR` path. This is a partial cherry pick of 2356b2d in order to fix the performance tests. Co-authored-by: André <[email protected]> Co-authored-by: JuanMa <[email protected]> Co-authored-by: Greg Ziółkowski <[email protected]> Co-authored-by: Jeff Bowen <[email protected]> Co-authored-by: Bruno Ribarić <[email protected]> Co-authored-by: Ella van Durpe <[email protected]> Co-authored-by: Petter Walbø Johnsgård <[email protected]> Co-authored-by: George Mamadashvili <[email protected]> Co-authored-by: Daniel Richards <[email protected]> Co-authored-by: Hiroshi Urabe <[email protected]> Co-authored-by: Kai Hao <[email protected]> Co-authored-by: Marcus Kazmierczak <[email protected]> Co-authored-by: Robert Anderson <[email protected]> Co-authored-by: Anton Vlasenko <[email protected]>
Description
Fixes #30500.
How has this been tested?
Screenshots
Types of changes
Checklist:
*.native.js
files for terms that need renaming or removal).The text was updated successfully, but these errors were encountered: