Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Always output core block global styles after base global styles. #6010

Closed
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
39 changes: 28 additions & 11 deletions src/wp-includes/global-styles-and-settings.php
Expand Up @@ -298,8 +298,12 @@ function wp_get_global_styles_custom_css() {
* Adds global style rules to the inline style for each block.
*
* @since 6.1.0
*
* @global WP_Styles $wp_styles
*/
function wp_add_global_styles_for_blocks() {
global $wp_styles;

$tree = WP_Theme_JSON_Resolver::get_merged_data();
$block_nodes = $tree->get_styles_block_nodes();
foreach ( $block_nodes as $metadata ) {
Expand All @@ -311,28 +315,41 @@ function wp_add_global_styles_for_blocks() {
}

$stylesheet_handle = 'global-styles';

/*
* When `wp_should_load_separate_core_block_assets()` is true, block styles are
* enqueued for each block on the page in class WP_Block's render function.
* This means there will be a handle in the styles queue for each of those blocks.
* Block-specific global styles should be attached to the global-styles handle, but
* only for blocks on the page, thus we check if the block's handle is in the queue
* before adding the inline style.
* This conditional loading only applies to core blocks.
*/
if ( isset( $metadata['name'] ) ) {
/*
* These block styles are added on block_render.
* This hooks inline CSS to them so that they are loaded conditionally
* based on whether or not the block is used on the page.
*/
if ( str_starts_with( $metadata['name'], 'core/' ) ) {
$block_name = str_replace( 'core/', '', $metadata['name'] );
$stylesheet_handle = 'wp-block-' . $block_name;
$block_name = str_replace( 'core/', '', $metadata['name'] );
$block_handle = 'wp-block-' . $block_name;
if ( in_array( $block_handle, $wp_styles->queue ) ) {
wp_add_inline_style( $stylesheet_handle, $block_css );
}
} else {
wp_add_inline_style( $stylesheet_handle, $block_css );
}
wp_add_inline_style( $stylesheet_handle, $block_css );
}

// The likes of block element styles from theme.json do not have $metadata['name'] set.
if ( ! isset( $metadata['name'] ) && ! empty( $metadata['path'] ) ) {
$block_name = wp_get_block_name_from_theme_json_path( $metadata['path'] );
if ( $block_name ) {
if ( str_starts_with( $block_name, 'core/' ) ) {
$block_name = str_replace( 'core/', '', $block_name );
$stylesheet_handle = 'wp-block-' . $block_name;
$block_name = str_replace( 'core/', '', $block_name );
$block_handle = 'wp-block-' . $block_name;
if ( in_array( $block_handle, $wp_styles->queue ) ) {
wp_add_inline_style( $stylesheet_handle, $block_css );
}
} else {
wp_add_inline_style( $stylesheet_handle, $block_css );
}
wp_add_inline_style( $stylesheet_handle, $block_css );
}
}
}
Expand Down