Load block styles on demand in classic themes via template enhancement output buffer

[westonruter]

This is intended to be a fast-follow after the introduction of the template enhancement output buffer in #43258.

In classic themes, a lot more CSS is added to a page than is needed because wp_head() is called the rest of the page is rendered, so it is not yet known in the HEAD what blocks will be used. This is in contrast with block themes, which render the content first and then wp_head() is called due to the way that template-canvas.php is constructed. This can be fixed with output buffering, which essentially makes the same block theme approach available to classic themes.

Instead of printing the styles at wp_head, a placeholder comment can be printed instead. Then at wp_footer, the output of print_late_styles() can be captured. The output of print_late_styles() can then replace the previously-output placeholder comment.

See ​demonstration plugin.

See performance impacts in these PR comments:

• ​Improved CSS coverage
• ​Web vitals benchmarks for Twenty Twenty on broadband, Fast 4G, and Slow 3G connections
• ​Web vitals benchmarks for all classic themes on a broadband connection (average LCP improvement: -14.94%)
• ​Impact on Lighthouse performance core for all classic themes (average improvement to score: +7.74%)

[westonruter]

This can now proceed now that #43258 has been fixed via [60936].

Use output buffering for template enhancement to reduce unecessarily loaded CSS in classic themes. Makes use of wp_should_output_buffer_template_for_enhancement filter to delay the output of CSS until after the content is known and can be output by capturing the output of print_late_styles().

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

We also need to add unit tests.

@sjapaget Do you anticipate being able to continue working on this before next week? The beta1 release is on Tuesday, so this needs to be completed quickly. If you don't have availability, I'll follow up with additional commits to get it to the finish line.

@sjapaget Do you anticipate being able to continue working on this before next week? The beta1 release is on Tuesday, so this needs to be completed quickly. If you don't have availability, I'll follow up with additional commits to get it to the finish line.

I've done a bit more to it this afternoon (just pushed up) and will have time tomorrow too, but I'd very much appreciate some pointers on how to approach testing this properly if possible?

Here's a diff in Twenty Twenty-One before and after, when where the styles_inline_size_limit is also set to zero to reduce the diff size:

.html

@@ -47 +47 @@
     <link
       rel="stylesheet"
       id="wp-block-library-css"
-      href="http://localhost:8000/wp-includes/css/dist/block-library/style.min.css?ver=6.9-alpha-60093-src"
+      href="http://localhost:8000/wp-includes/css/dist/block-library/common.min.css?ver=6.9-alpha-60093-src"
       media="all"
     />
     <link
       rel="stylesheet"
-      id="wp-block-library-theme-css"
-      href="http://localhost:8000/wp-includes/css/dist/block-library/theme.min.css?ver=6.9-alpha-60093-src"
-      media="all"
-    />
-    <link
-      rel="stylesheet"
       id="classic-theme-styles-css"
       href="http://localhost:8000/wp-includes/css/classic-themes.min.css?ver=6.9-alpha-60093-src"
       media="all"
@@ -84 +78 @@
       }
       /*# sourceURL=twenty-twenty-one-custom-color-overrides-inline-css */
     </style>
+    <link
+      rel="stylesheet"
+      id="twenty-twenty-one-style-css"
+      href="http://localhost:8000/wp-content/themes/twentytwentyone/style.css?ver=2.6"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="twenty-twenty-one-print-style-css"
+      href="http://localhost:8000/wp-content/themes/twentytwentyone/assets/css/print.css?ver=2.6"
+      media="print"
+    />
+    <link
+      rel="stylesheet"
+      id="tt1-dark-mode-css"
+      href="http://localhost:8000/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css?ver=2.6"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-image-css"
+      href="http://localhost:8000/wp-includes/blocks/image/style.min.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-image-theme-css"
+      href="http://localhost:8000/wp-includes/blocks/image/theme.min.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-paragraph-css"
+      href="http://localhost:8000/wp-includes/blocks/paragraph/style.min.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-group-css"
+      href="http://localhost:8000/wp-includes/blocks/group/style.min.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-group-theme-css"
+      href="http://localhost:8000/wp-includes/blocks/group/theme.min.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-search-css"
+      href="http://localhost:8000/wp-includes/blocks/search/style.min.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-search-theme-css"
+      href="http://localhost:8000/wp-includes/blocks/search/theme.min.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-heading-css"
+      href="http://localhost:8000/wp-includes/blocks/heading/style.min.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-latest-posts-css"
+      href="http://localhost:8000/wp-includes/blocks/latest-posts/style.min.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-latest-comments-css"
+      href="http://localhost:8000/wp-includes/blocks/latest-comments/style.min.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-archives-css"
+      href="http://localhost:8000/wp-includes/blocks/archives/style.min.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-categories-css"
+      href="http://localhost:8000/wp-includes/blocks/categories/style.min.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
     <style id="global-styles-inline-css">
       :root {
         --wp--preset--aspect-ratio--square: 1;
@@ -451 +535 @@
       .has-x-large-font-size {
         font-size: var(--wp--preset--font-size--x-large) !important;
       }
-      :where(.wp-block-post-template.is-layout-flex) {
-        gap: 1.25em;
+      /*# sourceURL=global-styles-inline-css */
+    </style>
+    <style id="core-block-supports-inline-css">
+      .wp-container-core-group-is-layout-1c1b4f74 > .alignfull {
+        margin-right: calc(var(--wp--preset--spacing--50) * -1);
+        margin-left: calc(var(--wp--preset--spacing--50) * -1);
       }
-      :where(.wp-block-post-template.is-layout-grid) {
-        gap: 1.25em;
-      }
-      :where(.wp-block-columns.is-layout-flex) {
-        gap: 2em;
-      }
-      :where(.wp-block-columns.is-layout-grid) {
-        gap: 2em;
-      }
-      :root :where(.wp-block-pullquote) {
-        font-size: 1.5em;
-        line-height: 1.6;
+      /*# sourceURL=core-block-supports-inline-css */
+    </style>
+    <style id="core-block-supports-duotone-inline-css">
+      .wp-duotone-f6cff4-ffee58-1.wp-block-image img,
+      .wp-duotone-f6cff4-ffee58-1.wp-block-image .components-placeholder {
+        filter: url(#wp-duotone-f6cff4-ffee58-1);
       }
-      /*# sourceURL=global-styles-inline-css */
+      /*# sourceURL=core-block-supports-duotone-inline-css */
     </style>
-    <link
-      rel="stylesheet"
-      id="twenty-twenty-one-style-css"
-      href="http://localhost:8000/wp-content/themes/twentytwentyone/style.css?ver=2.6"
-      media="all"
-    />
-    <link
-      rel="stylesheet"
-      id="twenty-twenty-one-print-style-css"
-      href="http://localhost:8000/wp-content/themes/twentytwentyone/assets/css/print.css?ver=2.6"
-      media="print"
-    />
-    <link
-      rel="stylesheet"
-      id="tt1-dark-mode-css"
-      href="http://localhost:8000/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css?ver=2.6"
-      media="all"
-    />
     <script id="twenty-twenty-one-ie11-polyfills-js-after">
       (Element.prototype.matches &&
         Element.prototype.closest &&
@@ -1260 +1324 @@
       }
       //# sourceURL=twentytwentyone_add_ie_class
     </script>
-    <style id="core-block-supports-inline-css">
-      .wp-container-core-group-is-layout-1c1b4f74 > .alignfull {
-        margin-right: calc(var(--wp--preset--spacing--50) * -1);
-        margin-left: calc(var(--wp--preset--spacing--50) * -1);
-      }
-      /*# sourceURL=core-block-supports-inline-css */
-    </style>
-    <style id="core-block-supports-duotone-inline-css">
-      .wp-duotone-f6cff4-ffee58-1.wp-block-image img,
-      .wp-duotone-f6cff4-ffee58-1.wp-block-image .components-placeholder {
-        filter: url(#wp-duotone-f6cff4-ffee58-1);
-      }
-      /*# sourceURL=core-block-supports-duotone-inline-css */
-    </style>
     <script
       src="http://localhost:8000/wp-content/themes/twentytwentyone/assets/js/dark-mode-toggler.js?ver=1.0.0"
       id="twentytwentyone-dark-mode-support-toggle-js"

These styles seem to be missing with the changes in this PR:

:where(.wp-block-post-template.is-layout-flex) {
        gap: 1.25em;
      }
      :where(.wp-block-post-template.is-layout-grid) {
        gap: 1.25em;
      }
      :where(.wp-block-columns.is-layout-flex) {
        gap: 2em;
      }
      :where(.wp-block-columns.is-layout-grid) {
        gap: 2em;
      }
      :root :where(.wp-block-pullquote) {
        font-size: 1.5em;
        line-height: 1.6;
      }

However, once I added a Quote block to the post, then the :root :where(.wp-block-pullquote) appeared. And when I added a Columns block, then the .wp-block-columns rules showed up. So this indicates that they are successfully being loaded on-demand.

I ran CSS coverage in Chrome DevTools in Twenty Twenty-One on the Sample Page.

### Before

### After

So this cuts off 105 kB of CSS! That's a one-third reduction.

This is looking good. I see similar savings when testing against the Twenty Twelve theme.

It seems there's a small increase in processing time and memory use, but it doesn't seem significant. I didn't run an extensive comparison on those things, but here's what Query Monitor shows after doing numerous refreshes to confirm the consistency:

## Before

## After

I'll commit this in the next hour.

When I loading assets on demand:

add_filter( 'should_load_separate_core_block_assets', '__return_false', 1000 );
add_filter( 'should_load_block_assets_on_demand', '__return_false', 1000 );

The before/after diff shows the same order of cascade:

.html

@@ -418 +418 @@
       href="http://localhost:8000/wp-content/themes/twentyfourteen/css/blocks.css?ver=20250715"
       media="all"
     />
+    <style id="core-block-supports-inline-css">
+      /**
+ * Core styles: block-supports
+ */
+      .wp-container-core-group-is-layout-1c1b4f74 > .alignfull {
+        margin-right: calc(var(--wp--preset--spacing--50) * -1);
+        margin-left: calc(var(--wp--preset--spacing--50) * -1);
+      }
+      .wp-container-core-columns-is-layout-9d6595d7 {
+        flex-wrap: nowrap;
+      }
+      .wp-elements-6c33bc3c49cd227fd8339cc6d69a7265
+        a:where(:not(.wp-element-button)) {
+        color: var(--wp--preset--color--base);
+      }
+      .wp-container-core-group-is-layout-45f4d935 > .alignfull {
+        margin-right: calc(var(--wp--preset--spacing--60) * -1);
+        margin-left: calc(var(--wp--preset--spacing--60) * -1);
+      }
+      .wp-container-core-group-is-layout-651e6f64 > .alignfull {
+        margin-right: calc(var(--wp--preset--spacing--30) * -1);
+        margin-left: calc(var(--wp--preset--spacing--30) * -1);
+      }
+      .wp-block-gallery.wp-block-gallery-2 {
+        --wp--style--unstable-gallery-gap: var(
+          --wp--style--gallery-gap-default,
+          var(--gallery-block--gutter-size, var(--wp--style--block-gap, 0.5em))
+        );
+        gap: var(
+          --wp--style--gallery-gap-default,
+          var(--gallery-block--gutter-size, var(--wp--style--block-gap, 0.5em))
+        );
+      }
+
+      /*# sourceURL=core-block-supports-inline-css */
+    </style>
+    <style id="core-block-supports-duotone-inline-css">
+      .wp-duotone-f6cff4-ffee58-1.wp-block-image img,
+      .wp-duotone-f6cff4-ffee58-1.wp-block-image .components-placeholder {
+        filter: url(#wp-duotone-f6cff4-ffee58-1);
+      }
+
+      /*# sourceURL=core-block-supports-duotone-inline-css */
+    </style>
     <script
       src="http://localhost:8000/wp-includes/js/jquery/jquery.js?ver=3.7.1"
       id="jquery-core-js"
@@ -3494 +3538 @@
         </filter>
       </defs>
     </svg>
-
-    <style id="core-block-supports-inline-css">
-      /**
- * Core styles: block-supports
- */
-      .wp-container-core-group-is-layout-1c1b4f74 > .alignfull {
-        margin-right: calc(var(--wp--preset--spacing--50) * -1);
-        margin-left: calc(var(--wp--preset--spacing--50) * -1);
-      }
-      .wp-container-core-columns-is-layout-9d6595d7 {
-        flex-wrap: nowrap;
-      }
-      .wp-elements-6c33bc3c49cd227fd8339cc6d69a7265
-        a:where(:not(.wp-element-button)) {
-        color: var(--wp--preset--color--base);
-      }
-      .wp-container-core-group-is-layout-45f4d935 > .alignfull {
-        margin-right: calc(var(--wp--preset--spacing--60) * -1);
-        margin-left: calc(var(--wp--preset--spacing--60) * -1);
-      }
-      .wp-container-core-group-is-layout-651e6f64 > .alignfull {
-        margin-right: calc(var(--wp--preset--spacing--30) * -1);
-        margin-left: calc(var(--wp--preset--spacing--30) * -1);
-      }
-      .wp-block-gallery.wp-block-gallery-2 {
-        --wp--style--unstable-gallery-gap: var(
-          --wp--style--gallery-gap-default,
-          var(--gallery-block--gutter-size, var(--wp--style--block-gap, 0.5em))
-        );
-        gap: var(
-          --wp--style--gallery-gap-default,
-          var(--gallery-block--gutter-size, var(--wp--style--block-gap, 0.5em))
-        );
-      }
 
-      /*# sourceURL=core-block-supports-inline-css */
-    </style>
-    <style id="core-block-supports-duotone-inline-css">
-      .wp-duotone-f6cff4-ffee58-1.wp-block-image img,
-      .wp-duotone-f6cff4-ffee58-1.wp-block-image .components-placeholder {
-        filter: url(#wp-duotone-f6cff4-ffee58-1);
-      }
-
-      /*# sourceURL=core-block-supports-duotone-inline-css */
-    </style>
     <script
       src="http://localhost:8000/wp-includes/js/wp-embed.js?ver=6.9-alpha-60093-src"
       id="wp-embed-js"

What was previously printed in the wp_footer is now printed at wp_head, which is great as that reduces FOUC.

In contrast, when I force styles to be loaded on demand:

add_filter( 'should_load_separate_core_block_assets', '__return_true', 1000 );
add_filter( 'should_load_block_assets_on_demand', '__return_true', 1000 );

This is the diff I see:

.html

@@ -76 +76 @@
       href="http://localhost:8000/wp-content/themes/twentyfourteen/css/blocks.css?ver=20250715"
       media="all"
     />
+    <link
+      rel="stylesheet"
+      id="wp-block-image-css"
+      href="http://localhost:8000/wp-includes/blocks/image/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-image-theme-css"
+      href="http://localhost:8000/wp-includes/blocks/image/theme.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-paragraph-css"
+      href="http://localhost:8000/wp-includes/blocks/paragraph/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-group-css"
+      href="http://localhost:8000/wp-includes/blocks/group/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-group-theme-css"
+      href="http://localhost:8000/wp-includes/blocks/group/theme.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-pullquote-css"
+      href="http://localhost:8000/wp-includes/blocks/pullquote/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-pullquote-theme-css"
+      href="http://localhost:8000/wp-includes/blocks/pullquote/theme.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-columns-css"
+      href="http://localhost:8000/wp-includes/blocks/columns/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-cover-css"
+      href="http://localhost:8000/wp-includes/blocks/cover/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-social-links-css"
+      href="http://localhost:8000/wp-includes/blocks/social-links/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-embed-css"
+      href="http://localhost:8000/wp-includes/blocks/embed/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-embed-theme-css"
+      href="http://localhost:8000/wp-includes/blocks/embed/theme.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-categories-css"
+      href="http://localhost:8000/wp-includes/blocks/categories/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-gallery-css"
+      href="http://localhost:8000/wp-includes/blocks/gallery/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-gallery-theme-css"
+      href="http://localhost:8000/wp-includes/blocks/gallery/theme.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-search-css"
+      href="http://localhost:8000/wp-includes/blocks/search/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-search-theme-css"
+      href="http://localhost:8000/wp-includes/blocks/search/theme.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-heading-css"
+      href="http://localhost:8000/wp-includes/blocks/heading/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-latest-posts-css"
+      href="http://localhost:8000/wp-includes/blocks/latest-posts/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-latest-comments-css"
+      href="http://localhost:8000/wp-includes/blocks/latest-comments/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-archives-css"
+      href="http://localhost:8000/wp-includes/blocks/archives/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <style id="global-styles-inline-css">
+      :root {
+        --wp--preset--aspect-ratio--square: 1;
+        --wp--preset--aspect-ratio--4-3: 4/3;
+        --wp--preset--aspect-ratio--3-4: 3/4;
+        --wp--preset--aspect-ratio--3-2: 3/2;
+        --wp--preset--aspect-ratio--2-3: 2/3;
+        --wp--preset--aspect-ratio--16-9: 16/9;
+        --wp--preset--aspect-ratio--9-16: 9/16;
+        --wp--preset--color--black: #000;
+        --wp--preset--color--cyan-bluish-gray: #abb8c3;
+        --wp--preset--color--white: #fff;
+        --wp--preset--color--pale-pink: #f78da7;
+        --wp--preset--color--vivid-red: #cf2e2e;
+        --wp--preset--color--luminous-vivid-orange: #ff6900;
+        --wp--preset--color--luminous-vivid-amber: #fcb900;
+        --wp--preset--color--light-green-cyan: #7bdcb5;
+        --wp--preset--color--vivid-green-cyan: #00d084;
+        --wp--preset--color--pale-cyan-blue: #8ed1fc;
+        --wp--preset--color--vivid-cyan-blue: #0693e3;
+        --wp--preset--color--vivid-purple: #9b51e0;
+        --wp--preset--color--green: #24890d;
+        --wp--preset--color--dark-gray: #2b2b2b;
+        --wp--preset--color--medium-gray: #767676;
+        --wp--preset--color--light-gray: #f5f5f5;
+        --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(
+          135deg,
+          rgb(6, 147, 227) 0%,
+          rgb(155, 81, 224) 100%
+        );
+        --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(
+          135deg,
+          rgb(122, 220, 180) 0%,
+          rgb(0, 208, 130) 100%
+        );
+        --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(
+          135deg,
+          rgb(252, 185, 0) 0%,
+          rgb(255, 105, 0) 100%
+        );
+        --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(
+          135deg,
+          rgb(255, 105, 0) 0%,
+          rgb(207, 46, 46) 100%
+        );
+        --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(
+          135deg,
+          rgb(238, 238, 238) 0%,
+          rgb(169, 184, 195) 100%
+        );
+        --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(
+          135deg,
+          rgb(74, 234, 220) 0%,
+          rgb(151, 120, 209) 20%,
+          rgb(207, 42, 186) 40%,
+          rgb(238, 44, 130) 60%,
+          rgb(251, 105, 98) 80%,
+          rgb(254, 248, 76) 100%
+        );
+        --wp--preset--gradient--blush-light-purple: linear-gradient(
+          135deg,
+          rgb(255, 206, 236) 0%,
+          rgb(152, 150, 240) 100%
+        );
+        --wp--preset--gradient--blush-bordeaux: linear-gradient(
+          135deg,
+          rgb(254, 205, 165) 0%,
+          rgb(254, 45, 45) 50%,
+          rgb(107, 0, 62) 100%
+        );
+        --wp--preset--gradient--luminous-dusk: linear-gradient(
+          135deg,
+          rgb(255, 203, 112) 0%,
+          rgb(199, 81, 192) 50%,
+          rgb(65, 88, 208) 100%
+        );
+        --wp--preset--gradient--pale-ocean: linear-gradient(
+          135deg,
+          rgb(255, 245, 203) 0%,
+          rgb(182, 227, 212) 50%,
+          rgb(51, 167, 181) 100%
+        );
+        --wp--preset--gradient--electric-grass: linear-gradient(
+          135deg,
+          rgb(202, 248, 128) 0%,
+          rgb(113, 206, 126) 100%
+        );
+        --wp--preset--gradient--midnight: linear-gradient(
+          135deg,
+          rgb(2, 3, 129) 0%,
+          rgb(40, 116, 252) 100%
+        );
+        --wp--preset--font-size--small: 13px;
+        --wp--preset--font-size--medium: 20px;
+        --wp--preset--font-size--large: 36px;
+        --wp--preset--font-size--x-large: 42px;
+        --wp--preset--spacing--20: 0.44rem;
+        --wp--preset--spacing--30: 0.67rem;
+        --wp--preset--spacing--40: 1rem;
+        --wp--preset--spacing--50: 1.5rem;
+        --wp--preset--spacing--60: 2.25rem;
+        --wp--preset--spacing--70: 3.38rem;
+        --wp--preset--spacing--80: 5.06rem;
+        --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
+        --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
+        --wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
+        --wp--preset--shadow--outlined:
+          6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
+        --wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);
+      }
+      :where(.is-layout-flex) {
+        gap: 0.5em;
+      }
+      :where(.is-layout-grid) {
+        gap: 0.5em;
+      }
+      body .is-layout-flex {
+        display: flex;
+      }
+      .is-layout-flex {
+        flex-wrap: wrap;
+        align-items: center;
+      }
+      .is-layout-flex > :is(*, div) {
+        margin: 0;
+      }
+      body .is-layout-grid {
+        display: grid;
+      }
+      .is-layout-grid > :is(*, div) {
+        margin: 0;
+      }
+      :where(.wp-block-columns.is-layout-flex) {
+        gap: 2em;
+      }
+      :where(.wp-block-columns.is-layout-grid) {
+        gap: 2em;
+      }
+      :where(.wp-block-post-template.is-layout-flex) {
+        gap: 1.25em;
+      }
+      :where(.wp-block-post-template.is-layout-grid) {
+        gap: 1.25em;
+      }
+      .has-black-color {
+        color: var(--wp--preset--color--black) !important;
+      }
+      .has-cyan-bluish-gray-color {
+        color: var(--wp--preset--color--cyan-bluish-gray) !important;
+      }
+      .has-white-color {
+        color: var(--wp--preset--color--white) !important;
+      }
+      .has-pale-pink-color {
+        color: var(--wp--preset--color--pale-pink) !important;
+      }
+      .has-vivid-red-color {
+        color: var(--wp--preset--color--vivid-red) !important;
+      }
+      .has-luminous-vivid-orange-color {
+        color: var(--wp--preset--color--luminous-vivid-orange) !important;
+      }
+      .has-luminous-vivid-amber-color {
+        color: var(--wp--preset--color--luminous-vivid-amber) !important;
+      }
+      .has-light-green-cyan-color {
+        color: var(--wp--preset--color--light-green-cyan) !important;
+      }
+      .has-vivid-green-cyan-color {
+        color: var(--wp--preset--color--vivid-green-cyan) !important;
+      }
+      .has-pale-cyan-blue-color {
+        color: var(--wp--preset--color--pale-cyan-blue) !important;
+      }
+      .has-vivid-cyan-blue-color {
+        color: var(--wp--preset--color--vivid-cyan-blue) !important;
+      }
+      .has-vivid-purple-color {
+        color: var(--wp--preset--color--vivid-purple) !important;
+      }
+      .has-black-background-color {
+        background-color: var(--wp--preset--color--black) !important;
+      }
+      .has-cyan-bluish-gray-background-color {
+        background-color: var(--wp--preset--color--cyan-bluish-gray) !important;
+      }
+      .has-white-background-color {
+        background-color: var(--wp--preset--color--white) !important;
+      }
+      .has-pale-pink-background-color {
+        background-color: var(--wp--preset--color--pale-pink) !important;
+      }
+      .has-vivid-red-background-color {
+        background-color: var(--wp--preset--color--vivid-red) !important;
+      }
+      .has-luminous-vivid-orange-background-color {
+        background-color: var(
+          --wp--preset--color--luminous-vivid-orange
+        ) !important;
+      }
+      .has-luminous-vivid-amber-background-color {
+        background-color: var(
+          --wp--preset--color--luminous-vivid-amber
+        ) !important;
+      }
+      .has-light-green-cyan-background-color {
+        background-color: var(--wp--preset--color--light-green-cyan) !important;
+      }
+      .has-vivid-green-cyan-background-color {
+        background-color: var(--wp--preset--color--vivid-green-cyan) !important;
+      }
+      .has-pale-cyan-blue-background-color {
+        background-color: var(--wp--preset--color--pale-cyan-blue) !important;
+      }
+      .has-vivid-cyan-blue-background-color {
+        background-color: var(--wp--preset--color--vivid-cyan-blue) !important;
+      }
+      .has-vivid-purple-background-color {
+        background-color: var(--wp--preset--color--vivid-purple) !important;
+      }
+      .has-black-border-color {
+        border-color: var(--wp--preset--color--black) !important;
+      }
+      .has-cyan-bluish-gray-border-color {
+        border-color: var(--wp--preset--color--cyan-bluish-gray) !important;
+      }
+      .has-white-border-color {
+        border-color: var(--wp--preset--color--white) !important;
+      }
+      .has-pale-pink-border-color {
+        border-color: var(--wp--preset--color--pale-pink) !important;
+      }
+      .has-vivid-red-border-color {
+        border-color: var(--wp--preset--color--vivid-red) !important;
+      }
+      .has-luminous-vivid-orange-border-color {
+        border-color: var(
+          --wp--preset--color--luminous-vivid-orange
+        ) !important;
+      }
+      .has-luminous-vivid-amber-border-color {
+        border-color: var(--wp--preset--color--luminous-vivid-amber) !important;
+      }
+      .has-light-green-cyan-border-color {
+        border-color: var(--wp--preset--color--light-green-cyan) !important;
+      }
+      .has-vivid-green-cyan-border-color {
+        border-color: var(--wp--preset--color--vivid-green-cyan) !important;
+      }
+      .has-pale-cyan-blue-border-color {
+        border-color: var(--wp--preset--color--pale-cyan-blue) !important;
+      }
+      .has-vivid-cyan-blue-border-color {
+        border-color: var(--wp--preset--color--vivid-cyan-blue) !important;
+      }
+      .has-vivid-purple-border-color {
+        border-color: var(--wp--preset--color--vivid-purple) !important;
+      }
+      .has-vivid-cyan-blue-to-vivid-purple-gradient-background {
+        background: var(
+          --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple
+        ) !important;
+      }
+      .has-light-green-cyan-to-vivid-green-cyan-gradient-background {
+        background: var(
+          --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan
+        ) !important;
+      }
+      .has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background {
+        background: var(
+          --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange
+        ) !important;
+      }
+      .has-luminous-vivid-orange-to-vivid-red-gradient-background {
+        background: var(
+          --wp--preset--gradient--luminous-vivid-orange-to-vivid-red
+        ) !important;
+      }
+      .has-very-light-gray-to-cyan-bluish-gray-gradient-background {
+        background: var(
+          --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray
+        ) !important;
+      }
+      .has-cool-to-warm-spectrum-gradient-background {
+        background: var(
+          --wp--preset--gradient--cool-to-warm-spectrum
+        ) !important;
+      }
+      .has-blush-light-purple-gradient-background {
+        background: var(--wp--preset--gradient--blush-light-purple) !important;
+      }
+      .has-blush-bordeaux-gradient-background {
+        background: var(--wp--preset--gradient--blush-bordeaux) !important;
+      }
+      .has-luminous-dusk-gradient-background {
+        background: var(--wp--preset--gradient--luminous-dusk) !important;
+      }
+      .has-pale-ocean-gradient-background {
+        background: var(--wp--preset--gradient--pale-ocean) !important;
+      }
+      .has-electric-grass-gradient-background {
+        background: var(--wp--preset--gradient--electric-grass) !important;
+      }
+      .has-midnight-gradient-background {
+        background: var(--wp--preset--gradient--midnight) !important;
+      }
+      .has-small-font-size {
+        font-size: var(--wp--preset--font-size--small) !important;
+      }
+      .has-medium-font-size {
+        font-size: var(--wp--preset--font-size--medium) !important;
+      }
+      .has-large-font-size {
+        font-size: var(--wp--preset--font-size--large) !important;
+      }
+      .has-x-large-font-size {
+        font-size: var(--wp--preset--font-size--x-large) !important;
+      }
+      :where(.wp-block-columns.is-layout-flex) {
+        gap: 2em;
+      }
+      :where(.wp-block-columns.is-layout-grid) {
+        gap: 2em;
+      }
+      :root :where(.wp-block-pullquote) {
+        font-size: 1.5em;
+        line-height: 1.6;
+      }
+      /*# sourceURL=global-styles-inline-css */
+    </style>
+    <style id="core-block-supports-inline-css">
+      /**
+ * Core styles: block-supports
+ */
+      .wp-container-core-group-is-layout-1c1b4f74 > .alignfull {
+        margin-right: calc(var(--wp--preset--spacing--50) * -1);
+        margin-left: calc(var(--wp--preset--spacing--50) * -1);
+      }
+      .wp-container-core-columns-is-layout-9d6595d7 {
+        flex-wrap: nowrap;
+      }
+      .wp-elements-6c33bc3c49cd227fd8339cc6d69a7265
+        a:where(:not(.wp-element-button)) {
+        color: var(--wp--preset--color--base);
+      }
+      .wp-container-core-group-is-layout-45f4d935 > .alignfull {
+        margin-right: calc(var(--wp--preset--spacing--60) * -1);
+        margin-left: calc(var(--wp--preset--spacing--60) * -1);
+      }
+      .wp-container-core-group-is-layout-651e6f64 > .alignfull {
+        margin-right: calc(var(--wp--preset--spacing--30) * -1);
+        margin-left: calc(var(--wp--preset--spacing--30) * -1);
+      }
+      .wp-block-gallery.wp-block-gallery-2 {
+        --wp--style--unstable-gallery-gap: var(
+          --wp--style--gallery-gap-default,
+          var(--gallery-block--gutter-size, var(--wp--style--block-gap, 0.5em))
+        );
+        gap: var(
+          --wp--style--gallery-gap-default,
+          var(--gallery-block--gutter-size, var(--wp--style--block-gap, 0.5em))
+        );
+      }
+
+      /*# sourceURL=core-block-supports-inline-css */
+    </style>
+    <style id="core-block-supports-duotone-inline-css">
+      .wp-duotone-f6cff4-ffee58-1.wp-block-image img,
+      .wp-duotone-f6cff4-ffee58-1.wp-block-image .components-placeholder {
+        filter: url(#wp-duotone-f6cff4-ffee58-1);
+      }
+
+      /*# sourceURL=core-block-supports-duotone-inline-css */
+    </style>
     <script
       src="http://localhost:8000/wp-includes/js/jquery/jquery.js?ver=3.7.1"
       id="jquery-core-js"
@@ -3152 +3652 @@
         </filter>
       </defs>
     </svg>
-
-    <link
-      rel="stylesheet"
-      id="wp-block-image-css"
-      href="http://localhost:8000/wp-includes/blocks/image/style.css?ver=6.9-alpha-60093-src"
-      media="all"
-    />
-    <link
-      rel="stylesheet"
-      id="wp-block-image-theme-css"
-      href="http://localhost:8000/wp-includes/blocks/image/theme.css?ver=6.9-alpha-60093-src"
-      media="all"
-    />
-    <link
-      rel="stylesheet"
-      id="wp-block-paragraph-css"
-      href="http://localhost:8000/wp-includes/blocks/paragraph/style.css?ver=6.9-alpha-60093-src"
-      media="all"
-    />
-    <link
-      rel="stylesheet"
-      id="wp-block-group-css"
-      href="http://localhost:8000/wp-includes/blocks/group/style.css?ver=6.9-alpha-60093-src"
-      media="all"
-    />
-    <link
-      rel="stylesheet"
-      id="wp-block-group-theme-css"
-      href="http://localhost:8000/wp-includes/blocks/group/theme.css?ver=6.9-alpha-60093-src"
-      media="all"
-    />
-    <link
-      rel="stylesheet"
-      id="wp-block-pullquote-css"
-      href="http://localhost:8000/wp-includes/blocks/pullquote/style.css?ver=6.9-alpha-60093-src"
-      media="all"
-    />
-    <link
-      rel="stylesheet"
-      id="wp-block-pullquote-theme-css"
-      href="http://localhost:8000/wp-includes/blocks/pullquote/theme.css?ver=6.9-alpha-60093-src"
-      media="all"
-    />
-    <link
-      rel="stylesheet"
-      id="wp-block-columns-css"
-      href="http://localhost:8000/wp-includes/blocks/columns/style.css?ver=6.9-alpha-60093-src"
-      media="all"
-    />
-    <link
-      rel="stylesheet"
-      id="wp-block-cover-css"
-      href="http://localhost:8000/wp-includes/blocks/cover/style.css?ver=6.9-alpha-60093-src"
-      media="all"
-    />
-    <link
-      rel="stylesheet"
-      id="wp-block-social-links-css"
-      href="http://localhost:8000/wp-includes/blocks/social-links/style.css?ver=6.9-alpha-60093-src"
-      media="all"
-    />
-    <link
-      rel="stylesheet"
-      id="wp-block-embed-css"
-      href="http://localhost:8000/wp-includes/blocks/embed/style.css?ver=6.9-alpha-60093-src"
-      media="all"
-    />
-    <link
-      rel="stylesheet"
-      id="wp-block-embed-theme-css"
-      href="http://localhost:8000/wp-includes/blocks/embed/theme.css?ver=6.9-alpha-60093-src"
-      media="all"
-    />
-    <link
-      rel="stylesheet"
-      id="wp-block-categories-css"
-      href="http://localhost:8000/wp-includes/blocks/categories/style.css?ver=6.9-alpha-60093-src"
-      media="all"
-    />
-    <link
-      rel="stylesheet"
-      id="wp-block-gallery-css"
-      href="http://localhost:8000/wp-includes/blocks/gallery/style.css?ver=6.9-alpha-60093-src"
-      media="all"
-    />
-    <link
-      rel="stylesheet"
-      id="wp-block-gallery-theme-css"
-      href="http://localhost:8000/wp-includes/blocks/gallery/theme.css?ver=6.9-alpha-60093-src"
-      media="all"
-    />
-    <link
-      rel="stylesheet"
-      id="wp-block-search-css"
-      href="http://localhost:8000/wp-includes/blocks/search/style.css?ver=6.9-alpha-60093-src"
-      media="all"
-    />
-    <link
-      rel="stylesheet"
-      id="wp-block-search-theme-css"
-      href="http://localhost:8000/wp-includes/blocks/search/theme.css?ver=6.9-alpha-60093-src"
-      media="all"
-    />
-    <link
-      rel="stylesheet"
-      id="wp-block-heading-css"
-      href="http://localhost:8000/wp-includes/blocks/heading/style.css?ver=6.9-alpha-60093-src"
-      media="all"
-    />
-    <link
-      rel="stylesheet"
-      id="wp-block-latest-posts-css"
-      href="http://localhost:8000/wp-includes/blocks/latest-posts/style.css?ver=6.9-alpha-60093-src"
-      media="all"
-    />
-    <link
-      rel="stylesheet"
-      id="wp-block-latest-comments-css"
-      href="http://localhost:8000/wp-includes/blocks/latest-comments/style.css?ver=6.9-alpha-60093-src"
-      media="all"
-    />
-    <link
-      rel="stylesheet"
-      id="wp-block-archives-css"
-      href="http://localhost:8000/wp-includes/blocks/archives/style.css?ver=6.9-alpha-60093-src"
-      media="all"
-    />
-    <style id="global-styles-inline-css">
-      :root {
-        --wp--preset--aspect-ratio--square: 1;
-        --wp--preset--aspect-ratio--4-3: 4/3;
-        --wp--preset--aspect-ratio--3-4: 3/4;
-        --wp--preset--aspect-ratio--3-2: 3/2;
-        --wp--preset--aspect-ratio--2-3: 2/3;
-        --wp--preset--aspect-ratio--16-9: 16/9;
-        --wp--preset--aspect-ratio--9-16: 9/16;
-        --wp--preset--color--black: #000;
-        --wp--preset--color--cyan-bluish-gray: #abb8c3;
-        --wp--preset--color--white: #fff;
-        --wp--preset--color--pale-pink: #f78da7;
-        --wp--preset--color--vivid-red: #cf2e2e;
-        --wp--preset--color--luminous-vivid-orange: #ff6900;
-        --wp--preset--color--luminous-vivid-amber: #fcb900;
-        --wp--preset--color--light-green-cyan: #7bdcb5;
-        --wp--preset--color--vivid-green-cyan: #00d084;
-        --wp--preset--color--pale-cyan-blue: #8ed1fc;
-        --wp--preset--color--vivid-cyan-blue: #0693e3;
-        --wp--preset--color--vivid-purple: #9b51e0;
-        --wp--preset--color--green: #24890d;
-        --wp--preset--color--dark-gray: #2b2b2b;
-        --wp--preset--color--medium-gray: #767676;
-        --wp--preset--color--light-gray: #f5f5f5;
-        --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(
-          135deg,
-          rgb(6, 147, 227) 0%,
-          rgb(155, 81, 224) 100%
-        );
-        --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(
-          135deg,
-          rgb(122, 220, 180) 0%,
-          rgb(0, 208, 130) 100%
-        );
-        --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(
-          135deg,
-          rgb(252, 185, 0) 0%,
-          rgb(255, 105, 0) 100%
-        );
-        --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(
-          135deg,
-          rgb(255, 105, 0) 0%,
-          rgb(207, 46, 46) 100%
-        );
-        --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(
-          135deg,
-          rgb(238, 238, 238) 0%,
-          rgb(169, 184, 195) 100%
-        );
-        --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(
-          135deg,
-          rgb(74, 234, 220) 0%,
-          rgb(151, 120, 209) 20%,
-          rgb(207, 42, 186) 40%,
-          rgb(238, 44, 130) 60%,
-          rgb(251, 105, 98) 80%,
-          rgb(254, 248, 76) 100%
-        );
-        --wp--preset--gradient--blush-light-purple: linear-gradient(
-          135deg,
-          rgb(255, 206, 236) 0%,
-          rgb(152, 150, 240) 100%
-        );
-        --wp--preset--gradient--blush-bordeaux: linear-gradient(
-          135deg,
-          rgb(254, 205, 165) 0%,
-          rgb(254, 45, 45) 50%,
-          rgb(107, 0, 62) 100%
-        );
-        --wp--preset--gradient--luminous-dusk: linear-gradient(
-          135deg,
-          rgb(255, 203, 112) 0%,
-          rgb(199, 81, 192) 50%,
-          rgb(65, 88, 208) 100%
-        );
-        --wp--preset--gradient--pale-ocean: linear-gradient(
-          135deg,
-          rgb(255, 245, 203) 0%,
-          rgb(182, 227, 212) 50%,
-          rgb(51, 167, 181) 100%
-        );
-        --wp--preset--gradient--electric-grass: linear-gradient(
-          135deg,
-          rgb(202, 248, 128) 0%,
-          rgb(113, 206, 126) 100%
-        );
-        --wp--preset--gradient--midnight: linear-gradient(
-          135deg,
-          rgb(2, 3, 129) 0%,
-          rgb(40, 116, 252) 100%
-        );
-        --wp--preset--font-size--small: 13px;
-        --wp--preset--font-size--medium: 20px;
-        --wp--preset--font-size--large: 36px;
-        --wp--preset--font-size--x-large: 42px;
-        --wp--preset--spacing--20: 0.44rem;
-        --wp--preset--spacing--30: 0.67rem;
-        --wp--preset--spacing--40: 1rem;
-        --wp--preset--spacing--50: 1.5rem;
-        --wp--preset--spacing--60: 2.25rem;
-        --wp--preset--spacing--70: 3.38rem;
-        --wp--preset--spacing--80: 5.06rem;
-        --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
-        --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
-        --wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
-        --wp--preset--shadow--outlined:
-          6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
-        --wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);
-      }
-      :where(.is-layout-flex) {
-        gap: 0.5em;
-      }
-      :where(.is-layout-grid) {
-        gap: 0.5em;
-      }
-      body .is-layout-flex {
-        display: flex;
-      }
-      .is-layout-flex {
-        flex-wrap: wrap;
-        align-items: center;
-      }
-      .is-layout-flex > :is(*, div) {
-        margin: 0;
-      }
-      body .is-layout-grid {
-        display: grid;
-      }
-      .is-layout-grid > :is(*, div) {
-        margin: 0;
-      }
-      :where(.wp-block-columns.is-layout-flex) {
-        gap: 2em;
-      }
-      :where(.wp-block-columns.is-layout-grid) {
-        gap: 2em;
-      }
-      :where(.wp-block-post-template.is-layout-flex) {
-        gap: 1.25em;
-      }
-      :where(.wp-block-post-template.is-layout-grid) {
-        gap: 1.25em;
-      }
-      .has-black-color {
-        color: var(--wp--preset--color--black) !important;
-      }
-      .has-cyan-bluish-gray-color {
-        color: var(--wp--preset--color--cyan-bluish-gray) !important;
-      }
-      .has-white-color {
-        color: var(--wp--preset--color--white) !important;
-      }
-      .has-pale-pink-color {
-        color: var(--wp--preset--color--pale-pink) !important;
-      }
-      .has-vivid-red-color {
-        color: var(--wp--preset--color--vivid-red) !important;
-      }
-      .has-luminous-vivid-orange-color {
-        color: var(--wp--preset--color--luminous-vivid-orange) !important;
-      }
-      .has-luminous-vivid-amber-color {
-        color: var(--wp--preset--color--luminous-vivid-amber) !important;
-      }
-      .has-light-green-cyan-color {
-        color: var(--wp--preset--color--light-green-cyan) !important;
-      }
-      .has-vivid-green-cyan-color {
-        color: var(--wp--preset--color--vivid-green-cyan) !important;
-      }
-      .has-pale-cyan-blue-color {
-        color: var(--wp--preset--color--pale-cyan-blue) !important;
-      }
-      .has-vivid-cyan-blue-color {
-        color: var(--wp--preset--color--vivid-cyan-blue) !important;
-      }
-      .has-vivid-purple-color {
-        color: var(--wp--preset--color--vivid-purple) !important;
-      }
-      .has-black-background-color {
-        background-color: var(--wp--preset--color--black) !important;
-      }
-      .has-cyan-bluish-gray-background-color {
-        background-color: var(--wp--preset--color--cyan-bluish-gray) !important;
-      }
-      .has-white-background-color {
-        background-color: var(--wp--preset--color--white) !important;
-      }
-      .has-pale-pink-background-color {
-        background-color: var(--wp--preset--color--pale-pink) !important;
-      }
-      .has-vivid-red-background-color {
-        background-color: var(--wp--preset--color--vivid-red) !important;
-      }
-      .has-luminous-vivid-orange-background-color {
-        background-color: var(
-          --wp--preset--color--luminous-vivid-orange
-        ) !important;
-      }
-      .has-luminous-vivid-amber-background-color {
-        background-color: var(
-          --wp--preset--color--luminous-vivid-amber
-        ) !important;
-      }
-      .has-light-green-cyan-background-color {
-        background-color: var(--wp--preset--color--light-green-cyan) !important;
-      }
-      .has-vivid-green-cyan-background-color {
-        background-color: var(--wp--preset--color--vivid-green-cyan) !important;
-      }
-      .has-pale-cyan-blue-background-color {
-        background-color: var(--wp--preset--color--pale-cyan-blue) !important;
-      }
-      .has-vivid-cyan-blue-background-color {
-        background-color: var(--wp--preset--color--vivid-cyan-blue) !important;
-      }
-      .has-vivid-purple-background-color {
-        background-color: var(--wp--preset--color--vivid-purple) !important;
-      }
-      .has-black-border-color {
-        border-color: var(--wp--preset--color--black) !important;
-      }
-      .has-cyan-bluish-gray-border-color {
-        border-color: var(--wp--preset--color--cyan-bluish-gray) !important;
-      }
-      .has-white-border-color {
-        border-color: var(--wp--preset--color--white) !important;
-      }
-      .has-pale-pink-border-color {
-        border-color: var(--wp--preset--color--pale-pink) !important;
-      }
-      .has-vivid-red-border-color {
-        border-color: var(--wp--preset--color--vivid-red) !important;
-      }
-      .has-luminous-vivid-orange-border-color {
-        border-color: var(
-          --wp--preset--color--luminous-vivid-orange
-        ) !important;
-      }
-      .has-luminous-vivid-amber-border-color {
-        border-color: var(--wp--preset--color--luminous-vivid-amber) !important;
-      }
-      .has-light-green-cyan-border-color {
-        border-color: var(--wp--preset--color--light-green-cyan) !important;
-      }
-      .has-vivid-green-cyan-border-color {
-        border-color: var(--wp--preset--color--vivid-green-cyan) !important;
-      }
-      .has-pale-cyan-blue-border-color {
-        border-color: var(--wp--preset--color--pale-cyan-blue) !important;
-      }
-      .has-vivid-cyan-blue-border-color {
-        border-color: var(--wp--preset--color--vivid-cyan-blue) !important;
-      }
-      .has-vivid-purple-border-color {
-        border-color: var(--wp--preset--color--vivid-purple) !important;
-      }
-      .has-vivid-cyan-blue-to-vivid-purple-gradient-background {
-        background: var(
-          --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple
-        ) !important;
-      }
-      .has-light-green-cyan-to-vivid-green-cyan-gradient-background {
-        background: var(
-          --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan
-        ) !important;
-      }
-      .has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background {
-        background: var(
-          --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange
-        ) !important;
-      }
-      .has-luminous-vivid-orange-to-vivid-red-gradient-background {
-        background: var(
-          --wp--preset--gradient--luminous-vivid-orange-to-vivid-red
-        ) !important;
-      }
-      .has-very-light-gray-to-cyan-bluish-gray-gradient-background {
-        background: var(
-          --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray
-        ) !important;
-      }
-      .has-cool-to-warm-spectrum-gradient-background {
-        background: var(
-          --wp--preset--gradient--cool-to-warm-spectrum
-        ) !important;
-      }
-      .has-blush-light-purple-gradient-background {
-        background: var(--wp--preset--gradient--blush-light-purple) !important;
-      }
-      .has-blush-bordeaux-gradient-background {
-        background: var(--wp--preset--gradient--blush-bordeaux) !important;
-      }
-      .has-luminous-dusk-gradient-background {
-        background: var(--wp--preset--gradient--luminous-dusk) !important;
-      }
-      .has-pale-ocean-gradient-background {
-        background: var(--wp--preset--gradient--pale-ocean) !important;
-      }
-      .has-electric-grass-gradient-background {
-        background: var(--wp--preset--gradient--electric-grass) !important;
-      }
-      .has-midnight-gradient-background {
-        background: var(--wp--preset--gradient--midnight) !important;
-      }
-      .has-small-font-size {
-        font-size: var(--wp--preset--font-size--small) !important;
-      }
-      .has-medium-font-size {
-        font-size: var(--wp--preset--font-size--medium) !important;
-      }
-      .has-large-font-size {
-        font-size: var(--wp--preset--font-size--large) !important;
-      }
-      .has-x-large-font-size {
-        font-size: var(--wp--preset--font-size--x-large) !important;
-      }
-      :where(.wp-block-columns.is-layout-flex) {
-        gap: 2em;
-      }
-      :where(.wp-block-columns.is-layout-grid) {
-        gap: 2em;
-      }
-      :root :where(.wp-block-pullquote) {
-        font-size: 1.5em;
-        line-height: 1.6;
-      }
-      /*# sourceURL=global-styles-inline-css */
-    </style>
-    <style id="core-block-supports-inline-css">
-      /**
- * Core styles: block-supports
- */
-      .wp-container-core-group-is-layout-1c1b4f74 > .alignfull {
-        margin-right: calc(var(--wp--preset--spacing--50) * -1);
-        margin-left: calc(var(--wp--preset--spacing--50) * -1);
-      }
-      .wp-container-core-columns-is-layout-9d6595d7 {
-        flex-wrap: nowrap;
-      }
-      .wp-elements-6c33bc3c49cd227fd8339cc6d69a7265
-        a:where(:not(.wp-element-button)) {
-        color: var(--wp--preset--color--base);
-      }
-      .wp-container-core-group-is-layout-45f4d935 > .alignfull {
-        margin-right: calc(var(--wp--preset--spacing--60) * -1);
-        margin-left: calc(var(--wp--preset--spacing--60) * -1);
-      }
-      .wp-container-core-group-is-layout-651e6f64 > .alignfull {
-        margin-right: calc(var(--wp--preset--spacing--30) * -1);
-        margin-left: calc(var(--wp--preset--spacing--30) * -1);
-      }
-      .wp-block-gallery.wp-block-gallery-2 {
-        --wp--style--unstable-gallery-gap: var(
-          --wp--style--gallery-gap-default,
-          var(--gallery-block--gutter-size, var(--wp--style--block-gap, 0.5em))
-        );
-        gap: var(
-          --wp--style--gallery-gap-default,
-          var(--gallery-block--gutter-size, var(--wp--style--block-gap, 0.5em))
-        );
-      }
-
-      /*# sourceURL=core-block-supports-inline-css */
-    </style>
-    <style id="core-block-supports-duotone-inline-css">
-      .wp-duotone-f6cff4-ffee58-1.wp-block-image img,
-      .wp-duotone-f6cff4-ffee58-1.wp-block-image .components-placeholder {
-        filter: url(#wp-duotone-f6cff4-ffee58-1);
-      }
 
-      /*# sourceURL=core-block-supports-duotone-inline-css */
-    </style>
     <script
       src="http://localhost:8000/wp-includes/js/wp-embed.js?ver=6.9-alpha-60093-src"
       id="wp-embed-js"

Again, the cascade is the same, with the benefit of FOUC elimination.

And here is the diff when before the styles are not loaded on demand, but after they are:

.html

@@ -43 +43 @@
     <link
       rel="stylesheet"
       id="wp-block-library-css"
-      href="http://localhost:8000/wp-includes/css/dist/block-library/style.css?ver=6.9-alpha-60093-src"
+      href="http://localhost:8000/wp-includes/css/dist/block-library/common.css?ver=6.9-alpha-60093-src"
       media="all"
     />
     <link
       rel="stylesheet"
-      id="wp-block-library-theme-css"
-      href="http://localhost:8000/wp-includes/css/dist/block-library/theme.css?ver=6.9-alpha-60093-src"
+      id="classic-theme-styles-css"
+      href="http://localhost:8000/wp-includes/css/classic-themes.css?ver=6.9-alpha-60093-src"
       media="all"
     />
     <link
       rel="stylesheet"
-      id="classic-theme-styles-css"
-      href="http://localhost:8000/wp-includes/css/classic-themes.css?ver=6.9-alpha-60093-src"
+      id="twentyfourteen-lato-css"
+      href="http://localhost:8000/wp-content/themes/twentyfourteen/fonts/font-lato.css?ver=20230328"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="genericons-css"
+      href="http://localhost:8000/wp-content/themes/twentyfourteen/genericons/genericons.css?ver=3.0.3"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="twentyfourteen-style-css"
+      href="http://localhost:8000/wp-content/themes/twentyfourteen/style.css?ver=20250715"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="twentyfourteen-block-style-css"
+      href="http://localhost:8000/wp-content/themes/twentyfourteen/css/blocks.css?ver=20250715"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-image-css"
+      href="http://localhost:8000/wp-includes/blocks/image/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-image-theme-css"
+      href="http://localhost:8000/wp-includes/blocks/image/theme.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-paragraph-css"
+      href="http://localhost:8000/wp-includes/blocks/paragraph/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-group-css"
+      href="http://localhost:8000/wp-includes/blocks/group/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-group-theme-css"
+      href="http://localhost:8000/wp-includes/blocks/group/theme.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-pullquote-css"
+      href="http://localhost:8000/wp-includes/blocks/pullquote/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-pullquote-theme-css"
+      href="http://localhost:8000/wp-includes/blocks/pullquote/theme.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-columns-css"
+      href="http://localhost:8000/wp-includes/blocks/columns/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-cover-css"
+      href="http://localhost:8000/wp-includes/blocks/cover/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-social-links-css"
+      href="http://localhost:8000/wp-includes/blocks/social-links/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-embed-css"
+      href="http://localhost:8000/wp-includes/blocks/embed/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-embed-theme-css"
+      href="http://localhost:8000/wp-includes/blocks/embed/theme.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-categories-css"
+      href="http://localhost:8000/wp-includes/blocks/categories/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-gallery-css"
+      href="http://localhost:8000/wp-includes/blocks/gallery/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-gallery-theme-css"
+      href="http://localhost:8000/wp-includes/blocks/gallery/theme.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-search-css"
+      href="http://localhost:8000/wp-includes/blocks/search/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-search-theme-css"
+      href="http://localhost:8000/wp-includes/blocks/search/theme.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-heading-css"
+      href="http://localhost:8000/wp-includes/blocks/heading/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-latest-posts-css"
+      href="http://localhost:8000/wp-includes/blocks/latest-posts/style.css?ver=6.9-alpha-60093-src"
       media="all"
     />
+    <link
+      rel="stylesheet"
+      id="wp-block-latest-comments-css"
+      href="http://localhost:8000/wp-includes/blocks/latest-comments/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
+    <link
+      rel="stylesheet"
+      id="wp-block-archives-css"
+      href="http://localhost:8000/wp-includes/blocks/archives/style.css?ver=6.9-alpha-60093-src"
+      media="all"
+    />
     <style id="global-styles-inline-css">
       :root {
         --wp--preset--aspect-ratio--square: 1;
@@ -376 +520 @@
       .has-x-large-font-size {
         font-size: var(--wp--preset--font-size--x-large) !important;
       }
-      :where(.wp-block-post-template.is-layout-flex) {
-        gap: 1.25em;
-      }
-      :where(.wp-block-post-template.is-layout-grid) {
-        gap: 1.25em;
-      }
       :where(.wp-block-columns.is-layout-flex) {
         gap: 2em;
       }
@@ -394 +532 @@
       }
       /*# sourceURL=global-styles-inline-css */
     </style>
-    <link
-      rel="stylesheet"
-      id="twentyfourteen-lato-css"
-      href="http://localhost:8000/wp-content/themes/twentyfourteen/fonts/font-lato.css?ver=20230328"
-      media="all"
-    />
-    <link
-      rel="stylesheet"
-      id="genericons-css"
-      href="http://localhost:8000/wp-content/themes/twentyfourteen/genericons/genericons.css?ver=3.0.3"
-      media="all"
-    />
-    <link
-      rel="stylesheet"
-      id="twentyfourteen-style-css"
-      href="http://localhost:8000/wp-content/themes/twentyfourteen/style.css?ver=20250715"
-      media="all"
-    />
-    <link
-      rel="stylesheet"
-      id="twentyfourteen-block-style-css"
-      href="http://localhost:8000/wp-content/themes/twentyfourteen/css/blocks.css?ver=20250715"
-      media="all"
-    />
+    <style id="core-block-supports-inline-css">
+      /**
+ * Core styles: block-supports
+ */
+      .wp-container-core-group-is-layout-1c1b4f74 > .alignfull {
+        margin-right: calc(var(--wp--preset--spacing--50) * -1);
+        margin-left: calc(var(--wp--preset--spacing--50) * -1);
+      }
+      .wp-container-core-columns-is-layout-9d6595d7 {
+        flex-wrap: nowrap;
+      }
+      .wp-elements-6c33bc3c49cd227fd8339cc6d69a7265
+        a:where(:not(.wp-element-button)) {
+        color: var(--wp--preset--color--base);
+      }
+      .wp-container-core-group-is-layout-45f4d935 > .alignfull {
+        margin-right: calc(var(--wp--preset--spacing--60) * -1);
+        margin-left: calc(var(--wp--preset--spacing--60) * -1);
+      }
+      .wp-container-core-group-is-layout-651e6f64 > .alignfull {
+        margin-right: calc(var(--wp--preset--spacing--30) * -1);
+        margin-left: calc(var(--wp--preset--spacing--30) * -1);
+      }
+      .wp-block-gallery.wp-block-gallery-2 {
+        --wp--style--unstable-gallery-gap: var(
+          --wp--style--gallery-gap-default,
+          var(--gallery-block--gutter-size, var(--wp--style--block-gap, 0.5em))
+        );
+        gap: var(
+          --wp--style--gallery-gap-default,
+          var(--gallery-block--gutter-size, var(--wp--style--block-gap, 0.5em))
+        );
+      }
+
+      /*# sourceURL=core-block-supports-inline-css */
+    </style>
+    <style id="core-block-supports-duotone-inline-css">
+      .wp-duotone-f6cff4-ffee58-1.wp-block-image img,
+      .wp-duotone-f6cff4-ffee58-1.wp-block-image .components-placeholder {
+        filter: url(#wp-duotone-f6cff4-ffee58-1);
+      }
+
+      /*# sourceURL=core-block-supports-duotone-inline-css */
+    </style>
     <script
       src="http://localhost:8000/wp-includes/js/jquery/jquery.js?ver=3.7.1"
       id="jquery-core-js"
@@ -3495 +3653 @@
       </defs>
     </svg>
 
-    <style id="core-block-supports-inline-css">
-      /**
- * Core styles: block-supports
- */
-      .wp-container-core-group-is-layout-1c1b4f74 > .alignfull {
-        margin-right: calc(var(--wp--preset--spacing--50) * -1);
-        margin-left: calc(var(--wp--preset--spacing--50) * -1);
-      }
-      .wp-container-core-columns-is-layout-9d6595d7 {
-        flex-wrap: nowrap;
-      }
-      .wp-elements-6c33bc3c49cd227fd8339cc6d69a7265
-        a:where(:not(.wp-element-button)) {
-        color: var(--wp--preset--color--base);
-      }
-      .wp-container-core-group-is-layout-45f4d935 > .alignfull {
-        margin-right: calc(var(--wp--preset--spacing--60) * -1);
-        margin-left: calc(var(--wp--preset--spacing--60) * -1);
-      }
-      .wp-container-core-group-is-layout-651e6f64 > .alignfull {
-        margin-right: calc(var(--wp--preset--spacing--30) * -1);
-        margin-left: calc(var(--wp--preset--spacing--30) * -1);
-      }
-      .wp-block-gallery.wp-block-gallery-2 {
-        --wp--style--unstable-gallery-gap: var(
-          --wp--style--gallery-gap-default,
-          var(--gallery-block--gutter-size, var(--wp--style--block-gap, 0.5em))
-        );
-        gap: var(
-          --wp--style--gallery-gap-default,
-          var(--gallery-block--gutter-size, var(--wp--style--block-gap, 0.5em))
-        );
-      }
-
-      /*# sourceURL=core-block-supports-inline-css */
-    </style>
-    <style id="core-block-supports-duotone-inline-css">
-      .wp-duotone-f6cff4-ffee58-1.wp-block-image img,
-      .wp-duotone-f6cff4-ffee58-1.wp-block-image .components-placeholder {
-        filter: url(#wp-duotone-f6cff4-ffee58-1);
-      }
-
-      /*# sourceURL=core-block-supports-duotone-inline-css */
-    </style>
     <script
       src="http://localhost:8000/wp-includes/js/wp-embed.js?ver=6.9-alpha-60093-src"
       id="wp-embed-js"

Side-by-side view with Diff Checker: ​https://www.diffchecker.com/tCVBWjnO/

In this last diff (​https://github.com/WordPress/wordpress-develop/pull/10288#issuecomment-3424538348), I do see that this CSS appears in a different order:

<link
      rel="stylesheet"
      id="twentyfourteen-block-style-css"
      href="http://localhost:8000/wp-content/themes/twentyfourteen/css/blocks.css?ver=20250715"
      media="all"
    />

• Before: It appears _after_ wp-block-library-css.
• After: It appears _before_ the individual block-specific stylesheets enqueued instead of wp-block-library-css.

Difference in the cascade for an IMG in the Image block:

Before | After

--

|

With many thanks to @dmsnell, there is now a fix for the CSS cascade issue: 61d2fa9.

The issue is that the styles were being inserted _after_ wp_print_styles() finished as opposed to inserting the styles immediately after the position where wp-block-library was printed.

Block styles not on demand | Block styles on demand

--

|

[westonruter]

In 61008:

Script Loader: Load block styles on demand in classic themes via the template enhancement output buffer.

• This applies in classic themes when a site has not opted out of the template enhancement buffer by filtering wp_should_output_buffer_template_for_enhancement off.
• Both should_load_separate_core_block_assets and should_load_block_assets_on_demand are filtered on, as otherwise they are only enabled by default in block themes.
• Any style enqueued after wp_head and printed via print_late_styles() will get hoisted up to be inserted right after the wp-block-library inline style in the HEAD.
• The result is a >10% benchmarked improvement in LCP for core classic themes due to a ~100KB reduction in the amount of CSS unconditionally being served with every page load.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/10288

Follow-up to [60936].

Props sjapaget, westonruter, peterwilsoncc, dmsnell, mindctrl.
See #43258.
Fixes #64099.

[Soean]

Hi,
we remove the wp-block-library styles from our site:

<?php
add_action(
        'enqueue_block_assets',
        function (): void {
                wp_deregister_style( 'wp-block-library' );
                wp_register_style( 'wp-block-library', '' );
        }
);

Like others:

• ​https://github.com/search?q=wp_deregister_style%28+%27wp-block-library%27+%29%3B&type=code
• ​https://github.com/search?q=wp_dequeue_style%28+%27wp-block-library%27+%29&type=code

With WP 6.9-Beta1 we don't get the global-styles-inline-css styles anymore, which breaks our styles.

[westonruter]

Replying to Soean:

Hi,
we remove the wp-block-library styles from our site: [...]
With WP 6.9-Beta1 we don't get the global-styles-inline-css styles anymore, which breaks our styles.

@Soean thanks for that. I had ​wondered about this and intended to follow up during beta. I'll file new defect ticket and attack a PR with a fix. I'll ping you there when ready.

[westonruter]

@Soean Can you share more details about how your styles are being enqueued? Are you enqueueing them after wp_head so they are printed at wp_footer?

[westonruter]

@Soean I've opened #64150 to address this issue. Let's continue discussing there.

[westonruter]

In 61076:

Script Loader: Fall back to hoisting late-printed styles to end of HEAD if wp-block-library is not enqueued.

When the wp-block-library stylesheet is not enqueued, there will be no associated inline style present. This inline style normally contains the placeholder CSS comment for the HTML Tag Processor to identify the token after which the late-printed styles should be inserted. However, when the wp-block-library stylesheet is not enqueued (such as in themes which do not use blocks), or else the inline style is not printed for whatever reason, this adds a fallback to insert the late-printed styles immediately before </head>. This ensures that late-printed styles will always get hoisted.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/10417

Follow-up to [61008].

Props westonruter, peterwilsoncc, Soean.
See #64099, #43258.
Fixes #64150.

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

[westonruter]

CSS code coverage for Astra without on demand block style loading

[westonruter]

CSS code coverage for Astra with on demand block style loading

[westonruter]

CSS code coverage for Twenty Twenty without on demand block style loading

[westonruter]

CSS code coverage for Twenty Twenty with on demand block style loading

[westonruter]

I'm re-opening this to track the follow-up work being done in ​PR 10436 to improve hoisted stylesheet ordering.

Also, the change in [61076] to make the wp-block-styles theme support a precondition for loading separate block styles on demand was a mistake. I suggested it erroneously in #64150. It prevented styles from being loaded on demand for Twenty Twenty (see #64166) and Astra, and any other theme that doesn't add wp-block-styles theme support.

@Soean For the the immediate term, for you to continue excluding block styles in your theme, in addition to doing:

<?php
add_action(
        'enqueue_block_assets',
        function (): void {
                wp_deregister_style( 'wp-block-library' );
                wp_register_style( 'wp-block-library', '' );
        }
);

You'll also need to do:

<?php
add_action(
        'after_setup_theme',
        function (): void {
                add_filter( 'should_load_separate_core_block_assets', '__return_false' );
        }
);

Given how overwhelmingly the wp-block-library styles are not being blocked from being printed (as indeed core doesn't even have an official way to do this), it seems the benefits of ensuring better performance for when wp-block-library outweigh the the benefits of maintaining backwards-compatibility for the minority of sites which try to exclude the block styles from being loaded (as commented above). This said, I'm re-opening this ticket in part because I want to if there may still be an alternative solution to prevent the separate block styles from being enqueued if wp-block-library is nullified.

What follows are the performance benefits of loading the block styles on demand, note in particular the improvements to FCP, LCP, and LCP-TTFB. The regression in TTFB is expected due to the introduction of the output buffer, but since the FCP and LCP are ultimately reduced, the result is a net improvement. The "TTLB" (time to last byte) numbers need further investigation.

Twenty Twenty

Total CSS is reduced from 291 kB down to 184 kB. Coverage report: before​ vs after​.

Web vitals benchmarks over broadband:

Metric	Before	After	Diff (ms)	Diff (%)
FCP (median)	357.4	337	-20.40	-5.7%
LCP (median)	365.7	345.3	-20.40	-5.6%
TTFB (median)	63.9	94.9	+31.00	+48.5%
TTLB (median)	99.4	141.1	+41.70	+42.0%
LCP-TTFB (median)	300.5	250.4	-50.10	-16.7%

Web vitals benchmarks over Fast 4G:

Metric	Before	After	Diff (ms)	Diff (%)
FCP (median)	668.6	581.7	-86.90	-13.0%
LCP (median)	677	590	-87.00	-12.9%
TTFB (median)	64.8	97.3	+32.50	+50.2%
TTLB (median)	215	229	+14.00	+6.5%
LCP-TTFB (median)	611.8	487.1	-124.70	-20.4%

Astra

Total CSS is reduced from 271 kB down to 156 kB. Coverage report: before​ vs after​.

Web vitals benchmarks over broadband:

Metric	Before	After	Diff (ms)	Diff (%)
FCP (median)	355.4	259.9	-95.50	-26.9%
LCP (median)	355.4	259.9	-95.50	-26.9%
TTFB (median)	72.6	100.9	+28.30	+39.0%
TTLB (median)	186.7	225.3	+38.60	+20.7%
LCP-TTFB (median)	282.7	158.5	-124.20	-43.9%

Web vitals benchmarks over Fast 4G:

Metric	Before	After	Diff (ms)	Diff (%)
FCP (median)	620.7	444.7	-176.00	-28.4%
LCP (median)	620.7	444.7	-176.00	-28.4%
TTFB (median)	72.5	101.9	+29.40	+40.6%
TTLB (median)	277.3	282.9	+5.60	+2.0%
LCP-TTFB (median)	548.2	345.6	-202.60	-37.0%

---

Benchmarking commands using ​GoogleChromeLabs/wpp-research:

npm run research -- benchmark-web-vitals --url="http://localhost:8000/sample-page/?enable_plugins=disable-template-enhancement-output-buffer.php&script_debug=0&wp_debug_display=0" --url="http://localhost:8000/sample-page/?enable_plugins=none&script_debug=0&wp_debug_display=0" --network-conditions=broadband --number="$number" --diff --output=md | tee "broadband.md"
npm run research -- benchmark-web-vitals --url="http://localhost:8000/sample-page/?enable_plugins=disable-template-enhancement-output-buffer.php&script_debug=0&wp_debug_display=0" --url="http://localhost:8000/sample-page/?enable_plugins=none&script_debug=0&wp_debug_display=0" --network-conditions="Fast 4G" --number="$number" --diff --output=md | tee "fast-4g.md"

See rationale. This reverts part of r61076, the part which added the wp-block-styles theme support check.

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

[westonruter]

In 61122:

Script Loader: Load block styles on demand in classic themes even when wp-block-styles support is absent.

This reverts part of [61076] which made wp-block-styles theme support a precondition for opting in to should_load_separate_core_block_assets and should_load_block_assets_on_demand. This meant that the Twenty Twenty theme (and other themes without this support declared) would not benefit from on-demand block style loading. Nevertheless, even though such themes were not getting block styles loaded on demand, the wp_load_classic_theme_block_styles_on_demand() function was proceeding to opt in to the output buffer for hoisting late-printed styles, even though it was unlikely there would then be any. This meant the template enhancement output buffer was being opened for no reason.

Enabling on-demand block style loading is measured to improve FCP and LCP in Twenty Twenty, for example a ~13% improvement over a Fast 4G connection when loading the Sample Page.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/10457

Follow-up to [61008], [61076], [60936].

Props westonruter.
See #64099, #64150, #64166, #43258.

Committed in r61122

This was a big headache. But I believe all the kinks are now worked out!

[westonruter]

Ready for review: ​https://github.com/WordPress/wordpress-develop/pull/10436

I've tested this with a ​helper plugin that includes three functions to run and am seeing some regressions between the 6.8 branch and this one when it comes to de registering or modifying the block CSS.

There's various ways a theme may wish to modify the block styles that are now being replaced with Core's styles.

Test function	WordPress 6.8	Feature branch	Result
add_dependency_to_block_library			✅
deregister_and_replace_blocks_styles			⚠️
remove_theme_support_block_styles			⚠️
register_custom_block_styles			⚠️

@peterwilsoncc Thank you for this. After evaluating the error scenarios, they all appear to be the same as is described in my ticket comment. Namely, if a site is explicitly expecting wp-block-library to be present and _not_ the separate block styles, then they need to add this plugin code:

add_filter( 'should_load_separate_core_block_assets', '__return_false' );

This needs to be called out in the dev note for sure.

[westonruter]

In 61174:

Script Loader: Improve hoisted stylesheet ordering (in classic themes) to preserve CSS cascade.

This ensures that on-demand block styles are inserted right after the wp-block-library inline style whereas other stylesheets not related to blocks are appended to the end of the HEAD. This helps ensure the expected cascade is preserved. If no wp-block-library inline style is present, then all styles get appended to the HEAD regardless.

The handling of the CSS placeholder comment added to the wp-block-library inline style is also improved. It is now inserted later to ensure the inline style is printed. Additionally, when the CSS placeholder comment is removed from the wp-block-library inline style, the entire STYLE tag is now removed if there are no styles left (aside from the sourceURL comment).

Lastly, the use of the HTML Tag Processor is significantly improved to leverage WP_HTML_Text_Replacement.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/10436

Follow-up to [61008].

Props westonruter, peterwilsoncc, dmsnell.
Fixes #64099.

[sabernhardt]

The on-demand style printing does not work in situations such as having a Cover block inside a Latest Posts block showing full post content (until after I added a Cover block in a separate widget). It likely can have trouble with other nested blocks too.

It's very late to keep trying to fix this enhancement for 6.9, write a dev note, etc. Could we revert and revisit early for 7.0?

[westonruter]

@sabernhardt As we've been chatting over DM, it looks like this is an existing issue which is already affecting block themes. It has been reported in ​Gutenberg#69427 where I just added a ​comment noting that would start to be seen by classic themes in 6.9.

[awetz583]

This isn't a bug, but maybe something for a devnote: After this update, a block needs to return some HTML in order for the CSS styles to load in the front end.

Testing a custom dynamic block on a classic/hybrid theme that didn't have any content in the render.php file resulted in no CSS loading on the page. This makes sense, it's just a change from how this block worked in 6.8

[westonruter]

@awetz583 Thanks for calling that out. This would actually be related to #63676. There is a new filter enqueue_empty_block_content_assets which is specifically introduced to opt-in to enqueueing scripts and styles for blocks that have no content. I'm working on a dev note about it now.

[westonruter]

Dev note: ​https://make.wordpress.org/core/2025/11/18/wordpress-6-9-frontend-performance-field-guide/#load-block-styles-on-demand-in-classic-themes