Bundled themes: Add missing path data for enqueued stylesheet in block themes so they can be inlined (and add minification)

[westonruter]

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

This allows for style.css from Twenty Twenty-Two and Twenty Twenty-Five to be inlined so as to eliminate a render-blocking resource from the page. See Core-63007 for impact metrics on LCP.

This also introduces minification for style.css to reduce the size of the stylesheets in the two core block themes that use them:

Theme	style.css size	style.min.css size	Reduction
Twenty Twenty-Two	5,990	2,551	-57%
Twenty Twenty-Five	2,503	583	-77%

This is important when the overall limit for inlining CSS (styles_inline_size_limit) is by default 20,000 bytes. The same scheme is used for core, where the file extension .min.css is used for the minified files. (It would be nice if a sourcemap were generated as well.)

I'm not sure if this is the right place to introduce the minification, as perhaps it should be part of the theme's own build process. Also, ideally other themes would also have their stylesheets minified (see comment on Core-49665).

HTML Diffs

Twenty Twenty-Two

Twenty Twenty-Two with SCRIPT_DEBUG enabled

--- before.html	2025-02-24 15:30:29.721396646 -0800
+++ after-with-script-debug.html	2025-02-24 15:28:55.417393830 -0800
@@ -1151,7 +1151,170 @@
 			z-index: 100000;
 		}
 </style>
-<link rel='stylesheet' id='twentytwentytwo-style-css' href='http://localhost:8889/wp-content/themes/twentytwentytwo/style.css?ver=1.9' media='all' />
+<style id='twentytwentytwo-style-inline-css'>
+/*
+Theme Name: Twenty Twenty-Two
+Theme URI: https://wordpress.org/themes/twentytwentytwo/
+Author: the WordPress team
+Author URI: https://wordpress.org/
+Description: Built on a solidly designed foundation, Twenty Twenty-Two embraces the idea that everyone deserves a truly unique website. The theme’s subtle styles are inspired by the diversity and versatility of birds: its typography is lightweight yet strong, its color palette is drawn from nature, and its layout elements sit gently on the page. The true richness of Twenty Twenty-Two lies in its opportunity for customization. The theme is built to take advantage of the Site Editor features introduced in WordPress 5.9, which means that colors, typography, and the layout of every single page on your site can be customized to suit your vision. It also includes dozens of block patterns, opening the door to a wide range of professionally designed layouts in just a few clicks. Whether you’re building a single-page website, a blog, a business website, or a portfolio, Twenty Twenty-Two will help you create a site that is uniquely yours.
+Requires at least: 5.9
+Tested up to: 6.7
+Requires PHP: 5.6
+Version: 1.9
+License: GNU General Public License v2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+Text Domain: twentytwentytwo
+Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, style-variations, wide-blocks, block-styles, accessibility-ready, blog, portfolio, news
+
+Twenty Twenty-Two WordPress Theme, (C) 2021 WordPress.org
+Twenty Twenty-Two is distributed under the terms of the GNU GPL.
+*/
+
+/*
+ * Font smoothing.
+ * This is a niche setting that will not be available via Global Styles.
+ * https://github.com/WordPress/gutenberg/issues/35934
+ */
+
+body {
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: antialiased;
+}
+
+/*
+ * Text and navigation link styles.
+ * Necessary until the following issue is resolved in Gutenberg:
+ * https://github.com/WordPress/gutenberg/issues/27075
+ */
+
+a {
+	text-decoration-thickness: 1px;
+	text-underline-offset: 0.25ch;
+}
+
+a:hover,
+a:focus {
+	text-decoration-style: dashed;
+}
+
+a:active {
+	text-decoration: none;
+}
+
+.wp-block-navigation .wp-block-navigation-item a:hover,
+.wp-block-navigation .wp-block-navigation-item a:focus {
+	text-decoration: underline;
+	text-decoration-style: solid;
+}
+
+/*
+ * Search and File Block button styles.
+ * Necessary until the following issues are resolved in Gutenberg:
+ * https://github.com/WordPress/gutenberg/issues/36444
+ * https://github.com/WordPress/gutenberg/issues/27760
+ */
+
+.wp-block-search__button,
+.wp-block-file .wp-block-file__button {
+	background-color: var(--wp--preset--color--primary);
+	border-radius: 0;
+	border: 0 solid;
+	color: var(--wp--preset--color--background);
+	font-size: var(--wp--preset--font-size--medium);
+	padding: calc(.667em + 2px) calc(1.333em + 2px);
+}
+
+/*
+ * Button hover styles.
+ * Necessary until the following issue is resolved in Gutenberg:
+ * https://github.com/WordPress/gutenberg/issues/27075
+ */
+
+.wp-block-search__button:hover,
+.wp-block-file .wp-block-file__button:hover,
+.wp-block-button__link:hover {
+	opacity: 0.90;
+}
+
+/*
+ * Alignment styles.
+ * These rules are temporary, and should not be relied on or
+ * modified too heavily by themes or plugins that build on
+ * Twenty Twenty-Two. These are meant to be a precursor to
+ * a global solution provided by the Block Editor.
+ *
+ * Relevant issues:
+ * https://github.com/WordPress/gutenberg/issues/35607
+ * https://github.com/WordPress/gutenberg/issues/35884
+ */
+
+.wp-site-blocks,
+body > .is-root-container,
+.edit-post-visual-editor__post-title-wrapper,
+.wp-block-group.alignfull,
+.wp-block-group.has-background,
+.wp-block-cover.alignfull,
+.is-root-container .wp-block[data-align="full"] > .wp-block-group,
+.is-root-container .wp-block[data-align="full"] > .wp-block-cover {
+	padding-left: var(--wp--custom--spacing--outer);
+	padding-right: var(--wp--custom--spacing--outer);
+}
+
+.wp-site-blocks .alignfull,
+.wp-site-blocks > .wp-block-group.has-background,
+.wp-site-blocks > .wp-block-cover,
+.wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background,
+.wp-site-blocks > .wp-block-template-part > .wp-block-cover,
+body > .is-root-container > .wp-block-cover,
+body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background,
+body > .is-root-container > .wp-block-template-part > .wp-block-cover,
+.is-root-container .wp-block[data-align="full"] {
+	margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
+	margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
+	width: unset;
+}
+
+/* Blocks inside columns don't have negative margins. */
+.wp-site-blocks .wp-block-columns .wp-block-column .alignfull,
+.is-root-container .wp-block-columns .wp-block-column .wp-block[data-align="full"],
+/* We also want to avoid stacking negative margins. */
+.wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,
+.is-root-container .wp-block[data-align="full"] > *:not(.wp-block-group) .wp-block[data-align="full"] {
+	margin-left: auto !important;
+	margin-right: auto !important;
+	width: inherit;
+}
+
+/*
+ * Responsive menu container padding.
+ * This ensures the responsive container inherits the same
+ * spacing defined above. This behavior may be built into
+ * the Block Editor in the future.
+ */
+
+.wp-block-navigation__responsive-container.is-menu-open {
+	padding-top: var(--wp--custom--spacing--outer);
+	padding-bottom: var(--wp--custom--spacing--large);
+	padding-right: var(--wp--custom--spacing--outer);
+	padding-left: var(--wp--custom--spacing--outer);
+}
+
+/*
+ * Improves spacing for the legacy Post Comments block.
+ * https://core.trac.wordpress.org/ticket/57560
+ */
+
+.wp-block-post-comments ol.commentlist ul.children {
+	margin-top: 1rem;
+	margin-bottom: 1rem;
+}
+
+.wp-block-post-comments ol.commentlist li.comment:not(:last-child) {
+	margin-bottom: 1rem;
+}
+
+</style>
 <link rel="https://api.w.org/" href="http://localhost:8889/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="http://localhost:8889/wp-json/wp/v2/posts/1" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost:8889/xmlrpc.php?rsd" />
 <meta name="generator" content="WordPress 6.8-alpha-59274-src" />
 <link rel="canonical" href="http://localhost:8889/2025/01/21/hello-world/" />

Twenty Twenty-Two with SCRIPT_DEBUG disabled

--- before.html	2025-02-24 15:29:46.316395309 -0800
+++ after-without-script-debug.html	2025-02-24 15:28:48.059393507 -0800
@@ -125,7 +125,9 @@
 			z-index: 100000;
 		}
 </style>
-<link rel='stylesheet' id='twentytwentytwo-style-css' href='http://localhost:8889/wp-content/themes/twentytwentytwo/style.css?ver=1.9' media='all' />
+<style id='twentytwentytwo-style-inline-css'>
+body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}a{text-decoration-thickness:1px;text-underline-offset:0.25ch}a:focus,a:hover{text-decoration-style:dashed}a:active{text-decoration:none}.wp-block-navigation .wp-block-navigation-item a:focus,.wp-block-navigation .wp-block-navigation-item a:hover{text-decoration:underline;text-decoration-style:solid}.wp-block-file .wp-block-file__button,.wp-block-search__button{background-color:var(--wp--preset--color--primary);border-radius:0;border:0 solid;color:var(--wp--preset--color--background);font-size:var(--wp--preset--font-size--medium);padding:calc(.667em + 2px) calc(1.333em + 2px)}.wp-block-button__link:hover,.wp-block-file .wp-block-file__button:hover,.wp-block-search__button:hover{opacity:.9}.edit-post-visual-editor__post-title-wrapper,.is-root-container .wp-block[data-align=full]>.wp-block-cover,.is-root-container .wp-block[data-align=full]>.wp-block-group,.wp-block-cover.alignfull,.wp-block-group.alignfull,.wp-block-group.has-background,.wp-site-blocks,body>.is-root-container{padding-left:var(--wp--custom--spacing--outer);padding-right:var(--wp--custom--spacing--outer)}.is-root-container .wp-block[data-align=full],.wp-site-blocks .alignfull,.wp-site-blocks>.wp-block-cover,.wp-site-blocks>.wp-block-group.has-background,.wp-site-blocks>.wp-block-template-part>.wp-block-cover,.wp-site-blocks>.wp-block-template-part>.wp-block-group.has-background,body>.is-root-container>.wp-block-cover,body>.is-root-container>.wp-block-template-part>.wp-block-cover,body>.is-root-container>.wp-block-template-part>.wp-block-group.has-background{margin-left:calc(-1 * var(--wp--custom--spacing--outer))!important;margin-right:calc(-1 * var(--wp--custom--spacing--outer))!important;width:unset}.is-root-container .wp-block-columns .wp-block-column .wp-block[data-align=full],.is-root-container .wp-block[data-align=full]>:not(.wp-block-group) .wp-block[data-align=full],.wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,.wp-site-blocks .wp-block-columns .wp-block-column .alignfull{margin-left:auto!important;margin-right:auto!important;width:inherit}.wp-block-navigation__responsive-container.is-menu-open{padding-top:var(--wp--custom--spacing--outer);padding-bottom:var(--wp--custom--spacing--large);padding-right:var(--wp--custom--spacing--outer);padding-left:var(--wp--custom--spacing--outer)}.wp-block-post-comments ol.commentlist ul.children{margin-top:1rem;margin-bottom:1rem}.wp-block-post-comments ol.commentlist li.comment:not(:last-child){margin-bottom:1rem}
+</style>
 <link rel="https://api.w.org/" href="http://localhost:8889/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="http://localhost:8889/wp-json/wp/v2/posts/1" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost:8889/xmlrpc.php?rsd" />
 <meta name="generator" content="WordPress 6.8-alpha-59274-src" />
 <link rel="canonical" href="http://localhost:8889/2025/01/21/hello-world/" />

Twenty Twenty-Five

Twenty Twenty-Five with SCRIPT_DEBUG enabled

--- before.html	2025-02-23 21:16:06.914749205 -0800
+++ after-with-script-debug.html	2025-02-23 21:16:35.817750094 -0800
@@ -129,14 +1145,77 @@
 			z-index: 100000;
 		}
 </style>
-<link rel='stylesheet' id='twentytwentyfive-style-css' href='http://localhost:8889/wp-content/themes/twentytwentyfive/style.css?ver=1.1' media='all' />
+<style id='twentytwentyfive-style-inline-css'>
+/*
+Theme Name: Twenty Twenty-Five
+Theme URI: https://wordpress.org/themes/twentytwentyfive/
+Author: the WordPress team
+Author URI: https://wordpress.org
+Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
+Requires at least: 6.7
+Tested up to: 6.7
+Requires PHP: 7.2
+Version: 1.1
+License: GNU General Public License v2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+Text Domain: twentytwentyfive
+Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
+*/
+
+/*
+ * Link styles
+ * https://github.com/WordPress/gutenberg/issues/42319
+ */
+a {
+	text-decoration-thickness: 1px !important;
+	text-underline-offset: .1em;
+}
+
+/* Focus styles */
+:where(.wp-site-blocks *:focus) {
+	outline-width: 2px;
+	outline-style: solid;
+}
+
+/* Increase the bottom margin on submenus, so that the outline is visible. */
+.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
+	margin-bottom: 3px;
+}
+
+/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
+.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
+	outline-offset: 4px;
+}
+
+/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
+.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
+	outline-offset: 0;
+}
+
+/*
+ * Progressive enhancement to reduce widows and orphans
+ * https://github.com/WordPress/gutenberg/issues/55190
+ */
+h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
+	text-wrap: pretty;
+}
+
+/*
+ * Change the position of the more block on the front, by making it a block level element.
+ * https://github.com/WordPress/gutenberg/issues/65934
+*/
+.more-link {
+	display: block;
+}
+
+</style>
 <link rel="https://api.w.org/" href="http://localhost:8889/wp-json/" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost:8889/xmlrpc.php?rsd" />
 <meta name="generator" content="WordPress 6.8-alpha-59274-src" />
 <script type="importmap" id="wp-importmap">

Twenty Twenty-Five with SCRIPT_DEBUG disabled

--- before.html 2025-02-23 21:16:06.914749205 -0800
+++ after-without-script-debug.html     2025-02-23 21:16:46.022750407 -0800
@@ -129,7 +129,9 @@
                        z-index: 100000;
                }
 </style>
-<link rel='stylesheet' id='twentytwentyfive-style-css' href='http://localhost:8889/wp-content/themes/twentytwentyfive/style.css?ver=1.1' media='all' />
+<style id='twentytwentyfive-style-inline-css'>
+a{text-decoration-thickness:1px!important;text-underline-offset:.1em}:where(.wp-site-blocks :focus){outline-width:2px;outline-style:solid}.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child){margin-bottom:3px}.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content{outline-offset:4px}.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content{outline-offset:0}blockquote,caption,figcaption,h1,h2,h3,h4,h5,h6,p{text-wrap:pretty}.more-link{display:block}
+</style>
 <link rel="https://api.w.org/" href="http://localhost:8889/wp-json/" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost:8889/xmlrpc.php?rsd" />
 <meta name="generator" content="WordPress 6.8-alpha-59274-src" />
 <script type="importmap" id="wp-importmap">

---

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props westonruter, sabernhardt, spacedmonkey.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• The Plugin and Theme Directories cannot be accessed within Playground.
• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[westonruter]

Committed in 2e2b657 (r60935)