Inline styles block styles in bundled 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.

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