Inline styles block styles in bundled classic themes

[spacedmonkey]

In [50836] function was added, to inline block styles, so for better performance. There are a number of small stylesheets in bundled themes that could do with that could use this functionality. To opt-in a stylesheet, simply add the path add an extra piece of data of the stylesheet. Like this.

wp_enqueue_style( 'twentyfifteen-block-style', get_template_directory_uri() . '/css/blocks.css', array( 'twentyfifteen-style' ), '20230122' );
wp_style_add_data( 'twentyfifteen-block-style', 'path', get_template_directory() . '/css/blocks.css' );

This could improve FE performance, as it remove a blocking request.

Blocked by:

• #64109

Trac ticket: https://core.trac.wordpress.org/ticket/58519

[sabernhardt]

We would need metrics for loading the first page plus an identical page—after the browser saves the external stylesheet(s)—to compare against the same pages with inlined stylesheets.

These styles are not minified, so the proposed inlining would print hundreds of lines on every page of the site. I thought the 162 lines for Twenty Seventeen's SVG icons was a lot, but inlining both the blocks and colors-dark would add more than 1,000 lines in that theme. I also do not like the extra page weight when browsers currently cache that for the next page view, though I can be convinced this would improve it overall.

Sizes, as of r55932:

Stylesheet	Lines	Bytes
Twenty Ten blocks	255	4,701
Twenty Eleven blocks	415	7,732
Twenty Eleven dark	623	13,254
Twenty Twelve blocks	447	10,594
Twenty Thirteen blocks	683	16,096
Twenty Fourteen blocks	423	8,022
Twenty Fifteen blocks	715	13,711
Twenty Sixteen blocks	464	9,023
Twenty Seventeen blocks	479	10,745
Twenty Seventeen colors-dark	566	18,233

[karmatosed]

@spacedmonkey this was discussed in the scrub today for default themes and the consensus is that more information would be needed or else this is recommended for now to be closed with a 'maybe later'. The focus right now is on bugs for default themes and this unless we are mistaken doesn't fall into that.

This said, if you can provide us with reasons we shouldn't follow through with that, we can reverse that decision happily.

[karmatosed]

I am going to progress through closing this for now. Thank you everyone for the collaboration.

[westonruter]

Re-opening to explore alongside #63007 and #63012 in 6.9.

[westonruter]

Also as I commented on #63007:

I think a better approach for inlining classic themes' blocks.css would be to split up the stylesheet into multiple stylesheets, one for each block. Then if we can enable should_load_separate_core_block_assets for classic themes, then we can only enqueue the specific theme block styles which are actually used via wp_enqueue_block_style(). This would require the use of output buffering from #43258 (which I've just milestoned for 6.8), however, since we'd need to inject the CSS from the head after the rest of the template has been rendered. Maybe the themes' blocks stylesheets can't be split up so easily, however.

[westonruter]

Currently blocked by #63012 (under development).

[westonruter]

This ticket is specifically about classic themes, since block themes get their styles added via theme.json (except for anything specific in style.css for TT2 and TT5). The related ticket #63012 had its scope reduced for stylesheet minification to focus specifically on the bundled block themes, with the intention that stylesheets for classic themes can be minified in a separate ticket. I think then we can punt this work to inline block styles for classic themes along with minification of those styles in the next release. This release can be focused on block themes. So I'm punting.

[westonruter]

I've opened #64109 to add minification for stylesheets in bundled classic themes. This is a blocker for being able to inline the classic themes' block styles.

On a related note, with #64099 we should be able to load block styles on demand in classic themes via template enhancement output buffer. This being the case, we should break up the blocks.css used in classic themes into a separate stylesheet for each block. These can then be attached as inline scripts for the underlying block-specific stylesheet, when stylesheets are being loaded on demand (i.e. when wp_should_load_block_assets_on_demand() returns true).