<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[58703] trunk: Editor: enqueue block custom CSS only when block renders on the page.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/58703">58703</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/58703","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>isabel_brison</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2024-07-10 06:17:44 +0000 (Wed, 10 Jul 2024)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>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 <a href="https://core.trac.wordpress.org/ticket/61395">#61395</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpincludesblockeditorphp">trunk/src/wp-includes/block-editor.php</a></li>
<li><a href="#trunksrcwpincludesclasswpthemejsonphp">trunk/src/wp-includes/class-wp-theme-json.php</a></li>
<li><a href="#trunksrcwpincludesdefaultfiltersphp">trunk/src/wp-includes/default-filters.php</a></li>
<li><a href="#trunksrcwpincludesdeprecatedphp">trunk/src/wp-includes/deprecated.php</a></li>
<li><a href="#trunksrcwpincludesglobalstylesandsettingsphp">trunk/src/wp-includes/global-styles-and-settings.php</a></li>
<li><a href="#trunksrcwpincludesscriptloaderphp">trunk/src/wp-includes/script-loader.php</a></li>
<li><a href="#trunktestsphpunitteststhemewpThemeJsonphp">trunk/tests/phpunit/tests/theme/wpThemeJson.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpincludesblockeditorphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/block-editor.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/block-editor.php 2024-07-09 21:43:11 UTC (rev 58702)
+++ trunk/src/wp-includes/block-editor.php 2024-07-10 06:17:44 UTC (rev 58703)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -532,7 +532,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * entered by users does not break other global styles.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> $global_styles[] = array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'css' => wp_get_global_styles_custom_css(),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'css' => wp_get_global_stylesheet( array( 'custom-css' ) ),
</ins><span class="cx" style="display: block; padding: 0 10px"> '__unstableType' => 'user',
</span><span class="cx" style="display: block; padding: 0 10px"> 'isGlobalStyles' => true,
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span></span></pre></div>
<a id="trunksrcwpincludesclasswpthemejsonphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/class-wp-theme-json.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-theme-json.php 2024-07-09 21:43:11 UTC (rev 58702)
+++ trunk/src/wp-includes/class-wp-theme-json.php 2024-07-10 06:17:44 UTC (rev 58703)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1423,6 +1423,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $stylesheet .= $this->get_preset_classes( $setting_nodes, $origins );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Load the custom CSS last so it has the highest specificity.
+ if ( in_array( 'custom-css', $types, true ) ) {
+ // Add the global styles root CSS.
+ $stylesheet .= _wp_array_get( $this->theme_json, array( 'styles', 'css' ) );
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> return $stylesheet;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1467,10 +1473,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * Returns the global styles custom CSS.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 6.2.0
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @deprecated 6.7.0 Use {@see 'get_stylesheet'} instead.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @return string The global styles custom CSS.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> public function get_custom_css() {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ _deprecated_function( __METHOD__, '6.7.0', 'get_stylesheet' );
</ins><span class="cx" style="display: block; padding: 0 10px"> // Add the global styles root CSS.
</span><span class="cx" style="display: block; padding: 0 10px"> $stylesheet = isset( $this->theme_json['styles']['css'] ) ? $this->theme_json['styles']['css'] : '';
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2692,6 +2700,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'duotone' => $duotone_selector,
</span><span class="cx" style="display: block; padding: 0 10px"> 'features' => $feature_selectors,
</span><span class="cx" style="display: block; padding: 0 10px"> 'variations' => $variation_selectors,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'css' => $selector,
</ins><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'] ) ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2908,7 +2917,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // 7. Generate and append any custom CSS rules pertaining to nested block style variations.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // 7. Generate and append any custom CSS rules.
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( isset( $node['css'] ) && ! $is_root_selector ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $block_rules .= $this->process_blocks_custom_css( $node['css'], $selector );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpincludesdefaultfiltersphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/default-filters.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/default-filters.php 2024-07-09 21:43:11 UTC (rev 58702)
+++ trunk/src/wp-includes/default-filters.php 2024-07-10 06:17:44 UTC (rev 58703)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -600,9 +600,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'wp_footer', 'wp_enqueue_global_styles', 1 );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-// Global styles custom CSS.
-add_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles_custom_css' );
-
</del><span class="cx" style="display: block; padding: 0 10px"> // Block supports, and other styles parsed and stored in the Style Engine.
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'wp_enqueue_scripts', 'wp_enqueue_stored_styles' );
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'wp_footer', 'wp_enqueue_stored_styles', 1 );
</span></span></pre></div>
<a id="trunksrcwpincludesdeprecatedphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/deprecated.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/deprecated.php 2024-07-09 21:43:11 UTC (rev 58702)
+++ trunk/src/wp-includes/deprecated.php 2024-07-10 06:17:44 UTC (rev 58703)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -6310,3 +6310,80 @@
</span><span class="cx" style="display: block; padding: 0 10px"> _deprecated_function( __FUNCTION__, '6.6.0' );
</span><span class="cx" style="display: block; padding: 0 10px"> return $parsed_block;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+/**
+ * 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 );
+ }
+}
</ins></span></pre></div>
<a id="trunksrcwpincludesglobalstylesandsettingsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/global-styles-and-settings.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/global-styles-and-settings.php 2024-07-09 21:43:11 UTC (rev 58702)
+++ trunk/src/wp-includes/global-styles-and-settings.php 2024-07-10 06:17:44 UTC (rev 58703)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -244,58 +244,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * Gets the global styles custom CSS from theme.json.
- *
- * @since 6.2.0
- *
- * @return string The global styles custom CSS.
- */
-function wp_get_global_styles_custom_css() {
- 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;
-}
-
-/**
</del><span class="cx" style="display: block; padding: 0 10px"> * Adds global style rules to the inline style for each block.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 6.1.0
</span></span></pre></div>
<a id="trunksrcwpincludesscriptloaderphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/script-loader.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/script-loader.php 2024-07-09 21:43:11 UTC (rev 58702)
+++ trunk/src/wp-includes/script-loader.php 2024-07-10 06:17:44 UTC (rev 58703)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2504,6 +2504,20 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $stylesheet = wp_get_global_stylesheet();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( $is_block_theme ) {
+ /*
+ * Dequeue the Customizer's custom CSS
+ * and add it before the global styles custom CSS.
+ */
+ remove_action( 'wp_head', 'wp_custom_css_cb', 101 );
+ // Get the custom CSS from the Customizer and add it to the global stylesheet.
+ $custom_css = wp_get_custom_css();
+ $stylesheet .= $custom_css;
+
+ // Add the global styles custom CSS at the end.
+ $stylesheet .= wp_get_global_stylesheet( array( 'custom-css' ) );
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( empty( $stylesheet ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2517,27 +2531,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * Enqueues the global styles custom css defined via theme.json.
- *
- * @since 6.2.0
- */
-function wp_enqueue_global_styles_custom_css() {
- 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 );
- }
-}
-
-/**
</del><span class="cx" style="display: block; padding: 0 10px"> * Checks if the editor scripts and styles for all registered block types
</span><span class="cx" style="display: block; padding: 0 10px"> * should be enqueued on the current screen.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span></span></pre></div>
<a id="trunktestsphpunitteststhemewpThemeJsonphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/phpunit/tests/theme/wpThemeJson.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/theme/wpThemeJson.php 2024-07-09 21:43:11 UTC (rev 58702)
+++ trunk/tests/phpunit/tests/theme/wpThemeJson.php 2024-07-10 06:17:44 UTC (rev 58703)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5035,15 +5035,34 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @ticket 57536
- * @ticket 61165
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Tests that base custom CSS is generated correctly.
+ *
+ * @ticket 61395
</ins><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- public function test_get_custom_css_handles_global_custom_css() {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ public function test_get_stylesheet_handles_base_custom_css() {
</ins><span class="cx" style="display: block; padding: 0 10px"> $theme_json = new WP_Theme_JSON(
</span><span class="cx" style="display: block; padding: 0 10px"> array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'version' => WP_Theme_JSON::LATEST_SCHEMA,
</span><span class="cx" style="display: block; padding: 0 10px"> 'styles' => array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'css' => 'body {color:purple;}',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'css' => 'body {color:purple;}',
+ ),
+ )
+ );
+
+ $custom_css = 'body {color:purple;}';
+ $this->assertSame( $custom_css, $theme_json->get_stylesheet( array( 'custom-css' ) ) );
+ }
+
+ /**
+ * Tests that block custom CSS is generated correctly.
+ *
+ * @ticket 61395
+ */
+ public function test_get_styles_for_block_handles_block_custom_css() {
+ $theme_json = new WP_Theme_JSON(
+ array(
+ 'version' => WP_Theme_JSON::LATEST_SCHEMA,
+ 'styles' => array(
</ins><span class="cx" style="display: block; padding: 0 10px"> 'blocks' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'core/paragraph' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'css' => 'color:red;',
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5053,8 +5072,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> )
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $custom_css = 'body {color:purple;}:root :where(p){color:red;}';
- $this->assertSame( $custom_css, $theme_json->get_custom_css() );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $paragraph_node = array(
+ 'name' => 'core/paragraph',
+ 'path' => array( 'styles', 'blocks', 'core/paragraph' ),
+ 'selector' => 'p',
+ 'selectors' => array(
+ 'root' => 'p',
+ ),
+ );
+
+ $custom_css = ':root :where(p){color:red;}';
+ $this->assertSame( $custom_css, $theme_json->get_styles_for_block( $paragraph_node ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span></span></pre>
</div>
</div>
</body>
</html>