Editor: Add support for custom CSS in global styles.

This changeset introduces functions `wp_get_global_styles_custom_css()` and `wp_enqueue_global_styles_custom_css()`, which allow accessing and enqueuing custom CSS added via global styles.

Custom CSS via global styles is handled separately from custom CSS via the Customizer. If a site uses both features, the custom CSS from both sources will be loaded. The global styles custom CSS is then loaded after the Customizer custom CSS, so if there are any conflicts between the rules, the global styles take precedence.

Similarly to e.g. [55185], the result is cached in a non-persistent cache, except when `WP_DEBUG` is on to avoid interrupting the theme developer's workflow.

Props glendaviesnz, oandregal, ntsekouras, mamaduka, davidbaumwald, hellofromtonya, flixos90.
Fixes #57536.


git-svn-id: https://develop.svn.wordpress.org/trunk@55192 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Felix Arntz
2023-02-02 18:50:54 +00:00
parent 61d5704c25
commit 7b43a6da54
8 changed files with 312 additions and 2 deletions

View File

@@ -425,6 +425,7 @@ class WP_Theme_JSON {
'textDecoration' => null,
'textTransform' => null,
),
'css' => null,
);
/**
@@ -1005,6 +1006,31 @@ class WP_Theme_JSON {
return $stylesheet;
}
/**
* Returns the global styles custom css.
*
* @since 6.2.0
*
* @return string
*/
public function get_custom_css() {
// Add the global styles root CSS.
$stylesheet = _wp_array_get( $this->theme_json, array( 'styles', 'css' ), '' );
// 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 = _wp_array_get( $this->theme_json, array( 'styles', 'blocks', $name, 'css' ) );
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.
*
@@ -2740,7 +2766,12 @@ class WP_Theme_JSON {
continue;
}
$output = static::remove_insecure_styles( $input );
// The global styles custom CSS is not sanitized, but can only be edited by users with 'edit_css' capability.
if ( isset( $input['css'] ) && current_user_can( 'edit_css' ) ) {
$output = $input;
} else {
$output = static::remove_insecure_styles( $input );
}
/*
* Get a reference to element name from path.