Editor: enqueue block custom CSS only when block renders on the page.

Updates the global styles custom CSS handling logic to be consistent with other global styles and take advantage of conditional enqueuing of block styles.

Props isabel_brison, aaronrobertshaw, andrewserong.
Fixes #61395.

Built from https://develop.svn.wordpress.org/trunk@58703


git-svn-id: http://core.svn.wordpress.org/trunk@58105 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
isabel_brison
2024-07-10 06:19:17 +00:00
parent 85092d6493
commit ccc46f8ada
7 changed files with 103 additions and 79 deletions

View File

@@ -6310,3 +6310,80 @@ function wp_interactivity_process_directives_of_interactive_blocks( array $parse
_deprecated_function( __FUNCTION__, '6.6.0' );
return $parsed_block;
}
/**
* Gets the global styles custom CSS from theme.json.
*
* @since 6.2.0
* @deprecated 6.7.0 Use {@see 'wp_get_global_stylesheet'} instead.
*
* @return string The global styles custom CSS.
*/
function wp_get_global_styles_custom_css() {
_deprecated_function( __FUNCTION__, '6.7.0', 'wp_get_global_stylesheet' );
if ( ! wp_theme_has_theme_json() ) {
return '';
}
/*
* Ignore cache when the development mode is set to 'theme', so it doesn't interfere with the theme
* developer's workflow.
*/
$can_use_cached = ! wp_is_development_mode( 'theme' );
/*
* By using the 'theme_json' group, this data is marked to be non-persistent across requests.
* @see `wp_cache_add_non_persistent_groups()`.
*
* The rationale for this is to make sure derived data from theme.json
* 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 behavior:
* @see https://make.wordpress.org/core/2022/10/10/filters-for-theme-json-data/
*
* A different alternative considered was to invalidate the cache upon certain
* events such as options add/update/delete, user meta, etc.
* It was judged not enough, hence this approach.
* @see https://github.com/WordPress/gutenberg/pull/45372
*/
$cache_key = 'wp_get_global_styles_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_css();
if ( $can_use_cached ) {
wp_cache_set( $cache_key, $stylesheet, $cache_group );
}
return $stylesheet;
}
/**
* Enqueues the global styles custom css defined via theme.json.
*
* @since 6.2.0
* @deprecated 6.7.0 Use {@see 'wp_enqueue_global_styles'} instead.
*/
function wp_enqueue_global_styles_custom_css() {
_deprecated_function( __FUNCTION__, '6.7.0', 'wp_enqueue_global_styles' );
if ( ! wp_is_block_theme() ) {
return;
}
// Don't enqueue Customizer's custom CSS separately.
remove_action( 'wp_head', 'wp_custom_css_cb', 101 );
$custom_css = wp_get_custom_css();
$custom_css .= wp_get_global_styles_custom_css();
if ( ! empty( $custom_css ) ) {
wp_add_inline_style( 'global-styles', $custom_css );
}
}