Global Styles: Add Global styles to inline block styles #39571
Conversation
scruffian
added
the
Global Styles
| @@ -76,13 +76,13 @@ function gutenberg_get_global_styles( $path = array(), $context = array() ) { | |||
| function gutenberg_get_global_stylesheet( $types = array() ) { | |||
| // Return cached value if it can be used and exists. | |||
| // It's cached by theme to make sure that theme switching clears the cache. | |||
| $can_use_cached = ( | |||
| $can_use_cached = false; /* ( | |||
There was a problem hiding this comment.
Just for testing...
| $general_selector_rules = static::to_ruleset( $selector, $declarations ); | ||
| if ( 'styles' === $metadata['path'][0] && 'blocks' === $metadata['path'][1] ) { | ||
| $block_name = str_replace( 'core/', '', $metadata['path'][2] ); | ||
| wp_add_inline_style( |
There was a problem hiding this comment.
It terms of approach, I think we want to tap into the existing API: it already has logic to decide whether to enqueue the block's CSS as a single stylesheet with them all or a separate one per block. Otherwise, we'll need to replicate that logic for the global styles.
In terms of implementation, WP_Theme_JSON has remained agnostic about WordPress APIs (get_stylesheet, wp_add_inline_style, etc), which was the WP_Theme_JSON_Resolver responsibility. I think it's benefitial to separate those concerns.
There was a problem hiding this comment.
it already has logic to decide whether to enqueue the block's CSS as a single stylesheet with them all or a separate one per block
Do you know where this is? I can't find it!
There was a problem hiding this comment.
I don't! Looking for should_load_separate_block_assets can perhaps help to start the investigation.
There was a problem hiding this comment.
We could maybe also try using the wp_enqueue_block_style() function 🤔
Otherwise yes, you can just look up where wp_should_load_separate_core_block_assets() is used to see the details of the current implementation 😉
If you need any assistance with this, don't hesitate to reach out
|
An alternative version of this is here: #40513 |
What?
Only load the Global Styles CSS for blocks that are used on the page.
Why?
So we only load the required CSS.
How?
This adds the Global Styles CSS for each block to the inline CSS for that block. This mean that the CSS is loaded in a different place to at present. An alternative approach would be to keep the CSS in the
global-styles-inline-cssso that the load order is the same. I tried to do this, but I couldn't find where the CSS is actually enqueued for each block.Testing Instructions
global-styles-inline-cssorwp-block-quote-css:global-styles-inline-cssbut is inwp-block-quote-css: