Skip to content

Make sure base global styles are loaded before block styles. #5892

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.

Sign up for GitHub

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

Closed
tellthemachines wants to merge 12 commits into from
Closed

Make sure base global styles are loaded before block styles. #5892

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
b643d7a
Make sure base global styles are loaded before block styles.
tellthemachines Jan 18, 2024
83367d8
Separate base and per-block global styles when single stylesheet is e…
tellthemachines Jan 22, 2024
00dc2c3
Separate base and per-block custom CSS and enqueue in different places.
tellthemachines Jan 22, 2024
48ce988
Fix lint error.
tellthemachines Jan 22, 2024
be210d6
Fix undefined variable
tellthemachines Jan 22, 2024
aef490b
Remove custom CSS changes and address review feedback
tellthemachines Jan 24, 2024
0a7045a
Remove extra spaces
tellthemachines Jan 24, 2024
bef9311
Make sure global styles only load in the front end.
tellthemachines Jan 25, 2024
9010293
Remove unnecessary filter and function call.
tellthemachines Jan 29, 2024
6d050e0
Split out tests for separate core block assets
tellthemachines Jan 30, 2024
ca1698e
remove redundant test
tellthemachines Jan 30, 2024
1226e21
Fix spacing
tellthemachines Jan 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Remove custom CSS changes and address review feedback
  • Loading branch information
@tellthemachines
tellthemachines committed Jan 24, 2024
commit aef490bb2e7a79198c7e365a2a1c4678260de30c
38 changes: 0 additions & 38 deletions src/wp-includes/class-wp-theme-json.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1200,44 +1200,6 @@ public function get_custom_css() {
return $stylesheet;
}

/**
* Returns the global styles base custom CSS.
*
* @since 6.5.0
*
* @return string The global styles base custom CSS.
*/
public function get_custom_base_css() {
return isset( $this->theme_json['styles']['css'] ) ? $this->theme_json['styles']['css'] : '';
}


/**
* Returns the global styles per-block custom CSS.
*
* @since 6.5.0
*
* @return string The global styles per-block custom CSS.
*/
public function get_custom_block_css() {
$stylesheet = '';

// Add the global styles block CSS.
if ( isset( $this->theme_json['styles']['blocks'] ) ) {
foreach ( $this->theme_json['styles']['blocks'] as $name => $node ) {
$custom_block_css = isset( $this->theme_json['styles']['blocks'][ $name ]['css'] )
? $this->theme_json['styles']['blocks'][ $name ]['css']
: null;
if ( $custom_block_css ) {
$selector = static::$blocks_metadata[ $name ]['selector'];
$stylesheet .= $this->process_blocks_custom_css( $custom_block_css, $selector );
}
}
}

return $stylesheet;
}

/**
* Returns the page templates of the active theme.
*
Expand Down
2 changes: 2 additions & 0 deletions src/wp-includes/default-filters.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -601,6 +601,8 @@

add_action( 'wp_enqueue_scripts', 'wp_add_global_styles_for_blocks' );
Copy link
Member

@oandregal oandregal Jan 18, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doesn't this add the block-level global styles twice to the global-styles-inline-css stylesheet when there's a single stylesheet for blocks?

Copy link
Contributor Author

@tellthemachines tellthemachines Jan 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh that's a good point, I'll have to test that scenario better.

Copy link
Contributor Author

@tellthemachines tellthemachines Jan 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just confirmed and there's no duplication of block-level global styles in the single stylesheet scenario. I removed it from where it was called inside wp_enqueue_global_styles in the script loader, so it's only getting called here, independently of the stylesheet setting.


add_action( 'wp_enqueue_scripts', 'wp_enqueue_block_global_styles' );

// Global styles custom CSS.
add_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles_custom_css' );

Expand Down
89 changes: 5 additions & 84 deletions src/wp-includes/global-styles-and-settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ function wp_get_global_settings( $path = array(), $context = array() ) {
* is always fresh from the potential modifications done via hooks
* that can use dynamic data (modify the stylesheet depending on some option,
* settings depending on user permissions, etc.).
* See some of the existing hooks to modify theme.json behaviour:
* See some of the existing hooks to modify theme.json behavior:
* https://make.wordpress.org/core/2022/10/10/filters-for-theme-json-data/
*
* A different alternative considered was to invalidate the cache upon certain
Expand Down Expand Up @@ -294,94 +294,21 @@ function wp_get_global_styles_custom_css() {
return $stylesheet;
}

/**
* Gets the global styles base custom CSS from theme.json.
* Logic should follow wp_get_global_styles_custom_css.
*
* @since 6.5.0
*
* @return string The global base custom CSS.
*/
function wp_get_global_styles_base_custom_css() {
if ( ! wp_theme_has_theme_json() ) {
return '';
}

$can_use_cached = ! wp_is_development_mode( 'theme' );

$cache_key = 'wp_get_global_styles_base_custom_css';
$cache_group = 'theme_json';
if ( $can_use_cached ) {
$cached = wp_cache_get( $cache_key, $cache_group );
if ( $cached ) {
return $cached;
}
}

$tree = WP_Theme_JSON_Resolver::get_merged_data();
$stylesheet = $tree->get_custom_base_css();

if ( $can_use_cached ) {
wp_cache_set( $cache_key, $stylesheet, $cache_group );
}

return $stylesheet;
}

/**
* Gets the global styles per-block custom CSS from theme.json.
* Logic should follow wp_get_global_styles_custom_css.
*
* @since 6.5.0
*
* @return string The global per-block custom CSS.
*/
function wp_get_global_styles_block_custom_css() {
if ( ! wp_theme_has_theme_json() ) {
return '';
}

$can_use_cached = ! wp_is_development_mode( 'theme' );

$cache_key = 'wp_get_global_styles_block_custom_css';
$cache_group = 'theme_json';
if ( $can_use_cached ) {
$cached = wp_cache_get( $cache_key, $cache_group );
if ( $cached ) {
return $cached;
}
}

$tree = WP_Theme_JSON_Resolver::get_merged_data();
$stylesheet = $tree->get_custom_block_css();

if ( $can_use_cached ) {
wp_cache_set( $cache_key, $stylesheet, $cache_group );
}

return $stylesheet;
}

/**
* Adds global style rules to the inline style for each block.
*
* @since 6.1.0
*/
function wp_add_global_styles_for_blocks() {
$tree = WP_Theme_JSON_Resolver::get_merged_data();
$block_nodes = $tree->get_styles_block_nodes();

if ( ! wp_should_load_separate_core_block_assets() ) {
wp_register_style( 'global-styles-blocks', false );
return;
}

$tree = WP_Theme_JSON_Resolver::get_merged_data();
$block_nodes = $tree->get_styles_block_nodes();
foreach ( $block_nodes as $metadata ) {
$block_css = $tree->get_styles_for_block( $metadata );

if ( ! wp_should_load_separate_core_block_assets() ) {
wp_add_inline_style( 'global-styles-blocks', $block_css );
continue;
}

$stylesheet_handle = 'global-styles';
if ( isset( $metadata['name'] ) ) {
/*
Expand All @@ -408,10 +335,6 @@ function wp_add_global_styles_for_blocks() {
}
}
}

if ( ! wp_should_load_separate_core_block_assets() ) {
wp_enqueue_style( 'global-styles-blocks' );
}
}

/**
Expand Down Expand Up @@ -507,8 +430,6 @@ function wp_clean_theme_json_cache() {
wp_cache_delete( 'wp_get_global_settings_custom', 'theme_json' );
wp_cache_delete( 'wp_get_global_settings_theme', 'theme_json' );
wp_cache_delete( 'wp_get_global_styles_custom_css', 'theme_json' );
wp_cache_delete( 'wp_get_global_styles_base_custom_css', 'theme_json' );
wp_cache_delete( 'wp_get_global_styles_block_custom_css', 'theme_json' );
wp_cache_delete( 'wp_get_theme_data_template_parts', 'theme_json' );
WP_Theme_JSON_Resolver::clean_cached_data();
}
Expand Down
34 changes: 26 additions & 8 deletions src/wp-includes/script-loader.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2514,6 +2514,31 @@ function wp_enqueue_global_styles() {
wp_enqueue_style( 'global-styles' );
}

/**
* Enqueues block global styles when separate core block assets are disabled.
*
* @since 6.5.0
*/
function wp_enqueue_block_global_styles() {
if ( wp_should_load_separate_core_block_assets() ) {
return;
}

$tree = WP_Theme_JSON_Resolver::get_merged_data();
$block_nodes = $tree->get_styles_block_nodes();

wp_register_style( 'global-styles-blocks', false );

foreach ( $block_nodes as $metadata ) {
$block_css = $tree->get_styles_for_block( $metadata );
wp_add_inline_style( 'global-styles-blocks', $block_css );
}

wp_enqueue_style( 'global-styles-blocks' );

wp_enqueue_global_styles();
}

/**
* Enqueues the global styles custom css defined via theme.json.
*
Expand All @@ -2528,18 +2553,11 @@ function wp_enqueue_global_styles_custom_css() {
remove_action( 'wp_head', 'wp_custom_css_cb', 101 );

$custom_css = wp_get_custom_css();
$custom_css .= wp_get_global_styles_base_custom_css();
$custom_css .= wp_get_global_styles_custom_css();

if ( ! empty( $custom_css ) ) {
wp_add_inline_style( 'global-styles', $custom_css );
}
$block_custom_css = wp_get_global_styles_block_custom_css();

if ( ! empty( $block_custom_css ) ) {
wp_register_style( 'global-styles-block-custom', false );
wp_add_inline_style( 'global-styles-block-custom', $block_custom_css );
wp_enqueue_style( 'global-styles-block-custom' );
}
}


Expand Down