[wp-trac] [WordPress Trac] #63695: viewStyle is loaded in the footer when the active theme is the classic theme

[WordPress Trac]

#63695: viewStyle is loaded in the footer when the active theme is the classic
theme
--------------------------+------------------------------
 Reporter:  wildworks     |       Owner:  (none)
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  Awaiting Review
Component:  Editor        |     Version:
 Severity:  normal        |  Resolution:
 Keywords:  has-patch     |     Focuses:  performance
--------------------------+------------------------------
Changes (by westonruter):

 * focuses:   => performance


Comment:

 I'm trying to reproduce this in `trunk` right now.

 == Post where the block is present ==

 === Block Theme ===

 ✅ In T25 on a page that has the Test block, this is printed in `HEAD`:

 {{{
 <style id="create-block-test-style-inline-css">
 .wp-block-create-block-test{background-color:red}

 /*# sourceURL=http://localhost:8000/wp-content/plugins/test/build/style-
 index.css */
 </style>
 <style id="create-block-test-view-style-inline-css">
 .wp-block-create-block-test{background-color:blue}

 /*# sourceURL=http://localhost:8000/wp-content/plugins/test/build/view.css
 */
 </style>
 }}}

 === Classic Theme ===

 ✅ In T21, on a page that has the Test block this is printed in `HEAD`:

 {{{
 <style id="create-block-test-style-inline-css">
 .wp-block-create-block-test{background-color:red}

 /*# sourceURL=http://localhost:8000/wp-content/plugins/test/build/style-
 index.css */
 </style>

 <!-- ... -->

 <style id="create-block-test-view-style-inline-css">
 .wp-block-create-block-test{background-color:blue}

 /*# sourceURL=http://localhost:8000/wp-content/plugins/test/build/view.css
 */
 </style>
 }}}


 ⚠️ In T21, when I have the [https://wordpress.org/plugins/load-combined-
 core-block-assets/ Load Combined Core Block Assets] plugin active, the
 first style continues to be printed in the `HEAD` but the second is
 printed in the footer:

 {{{
 <style id="create-block-test-style-inline-css">
 .wp-block-create-block-test{background-color:red}

 /*# sourceURL=http://localhost:8000/wp-content/plugins/test/build/style-
 index.css */
 </style>
 }}}

 Down in the footer:

 {{{
 <style id="create-block-test-view-style-inline-css">
 .wp-block-create-block-test{background-color:blue}

 /*# sourceURL=http://localhost:8000/wp-content/plugins/test/build/view.css
 */
 </style>
 }}}

 So it seems #64099 partially fixed the behavior since blocks are now
 loaded on demand by default in classic themes.

 == Post where the block is absent ==

 === Block Theme ===

 ✅ None of the Test block styles are printed.

 === Classic Theme ===

 ✅ In T21, none of the test blocks are printed.

 ⚠️ With [https://wordpress.org/plugins/load-combined-core-block-assets/
 Load Combined Core Block Assets] plugin active, the following style
 appears in `HEAD`:

 {{{
 <style id="create-block-test-style-inline-css">
 .wp-block-create-block-test{background-color:red}

 /*# sourceURL=http://localhost:8000/wp-content/plugins/test/build/style-
 index.css */
 </style>
 }}}

 The other style is absent.

 ----

 When I check out the [https://github.com/WordPress/wordpress-
 develop/pull/10925 pull request] and I'm looking at a **Classic Theme**:

 === Post where the block is present ===

 ✅ Same as before:

 {{{
 <style id="create-block-test-style-inline-css">
 .wp-block-create-block-test{background-color:red}

 /*# sourceURL=http://localhost:8000/wp-content/plugins/test/build/style-
 index.css */
 </style>

 <!-- ... -->

 <style id="create-block-test-view-style-inline-css">
 .wp-block-create-block-test{background-color:blue}

 /*# sourceURL=http://localhost:8000/wp-content/plugins/test/build/view.css
 */
 </style>
 }}}

 ✅ In T21, when I have the [https://wordpress.org/plugins/load-combined-
 core-block-assets/ Load Combined Core Block Assets] plugin active, I now
 see both styles printed in the `HEAD`:

 {{{

 <style id="create-block-test-style-inline-css">
 .wp-block-create-block-test{background-color:red}

 /*# sourceURL=http://localhost:8000/wp-content/plugins/test/build/style-
 index.css */
 </style>
 <style id="create-block-test-view-style-inline-css">
 .wp-block-create-block-test{background-color:blue}

 /*# sourceURL=http://localhost:8000/wp-content/plugins/test/build/view.css
 */
 </style>
 }}}

 === Post where the block is absent ===

 ✅ Same as before, no block styles are printed.

 ✅❓ With [https://wordpress.org/plugins/load-combined-core-block-assets/
 Load Combined Core Block Assets] plugin active, the following style
 appears in `HEAD`:

 {{{
 <style id="create-block-test-style-inline-css">
 .wp-block-create-block-test{background-color:red}

 /*# sourceURL=http://localhost:8000/wp-content/plugins/test/build/style-
 index.css */
 </style>
 <style id="create-block-test-view-style-inline-css">
 .wp-block-create-block-test{background-color:blue}

 /*# sourceURL=http://localhost:8000/wp-content/plugins/test/build/view.css
 */
 </style>
 }}}


 ----

 The changes in the PR ensure that all block styles are always printed in
 the `HEAD` for all registered blocks for classic themes when not loading
 block styles on demand. So I suppose this is working as expected.
 Nevertheless, enqueueing styles for blocks which aren't on the page is not
 good for performance. This is what was improved in 6.9 so that classic
 themes could start loading block styles on demand. This is now the default
 behavior. So the change here is only going to ensure styles are enqueued
 for classic theme sites which turn off loading block styles on demand
 (e.g. by opting out of loading block styles separately).

 So this ticket seems to be partially obsolete, at least for default core
 behavior, yes?

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/63695#comment:8>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform