[wp-trac] [WordPress Trac] #53494: Styles not applied to block using theme.json with seperate assets loading enabled

Fri Jun 25 07:50:46 UTC 2021

#53494: Styles not applied to block using theme.json with seperate assets loading
enabled
--------------------------+---------------------
 Reporter:  walbo         |       Owner:  (none)
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  5.8
Component:  Editor        |     Version:  trunk
 Severity:  normal        |  Resolution:
 Keywords:                |     Focuses:
--------------------------+---------------------

Comment (by aristath):

 Adding this fixes the issue, but I'm unsure about whether it's a good
 solution or not:
 {{{#!php
 remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
 add_action( 'wp_footer', 'wp_enqueue_global_styles' );
 }}}
 The problem here is that both global styles and the block's stylesheet use
 `.wp-block-create-block-wp-test-block` as a CSS selector.
 In a block theme (fse), blocks get parsed in `<head>` so block stylesheets
 get added in the `<head>`.
 In classic themes however, blocks get parsed on-render and can't be added
 to `<head>` because the header has already been rendered. As a result,
 individual block styles get added in the footer, changing the CSS load
 priority (which is why the filter is disabled by default for classic
 themes).

 Should we change the position of global styles?
 In all cases I think they should load ''after'' block styles to make sure
 they are applied:
 * In block themes: Change the priority so they get loaded ''after'' block
 styles in the `<head>`
 * In classic themes: Use the code above to make them load in the footer,
 right after the block styles.

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