Block styles set via the "css" property in theme.json are ignored on the frontend in classic/hybrid themes

[mrleemon]

Description

Block styles set via the "css" property in theme.json are ignored on the frontend in classic themes. An example:

"blocks": {
  "core/latest-posts": {
    "color": {
      "background": "blue"
    },
    "css": "& li a {color: pink}"
  }
}

The background color set via "color" can be seen in both the block editor and the frontend. The link color set via "css" can only be seen in the block editor.

Block themes (I tested Twenty Twenty-Three) are not affected by this issue, just classic/hybrid ones.

Step-by-step reproduction instructions

1. Install and activate a classic/hybrid theme that ships a theme.json file, such as Astra .
2. Edit the theme's theme.json file and add the following in the styles section:

"blocks": {
  "core/latest-posts": {
    "color": {
      "background": "blue"
    },
    "css": "& li a {color: pink}"
  }
}

3. Edit a page and add a Latest Posts block and verify that the background color of the block is blue and the links are pink.
4. Save changes.
5. Head to the frontend version of the page and see that only the background color is applied. The links are not pink.

Screenshots, screen recording, code snippet

Block editor:

Frontend:

Environment info

I'm using WP 6.3 beta 4.
NO Gutenberg plugin installed.
PHP 8.0.22
MySQL 8.0.16

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[mrleemon]

It looks like the following code is the culprit:

https://github.com/WordPress/WordPress/blob/c66ed1c6e94b0cea58e7fd1c5502cd5a2e34cfdc/wp-includes/script-loader.php#L2487

If I remove the !wp_is_block_theme() conditional, the "css" prop styles are applied on frontend.

I think the check must be replaced with:

if ( ! wp_theme_has_theme_json() ) {
    return;
}

I hope this can be fixed in WP 6.3.

[mrleemon]

Until this get fixed in core, you can add the following code to your functions.php file:

function wp_enqueue_global_styles_custom_css_fix() {
	if ( ! wp_is_block_theme() && ! wp_theme_has_theme_json() ) {
		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 );
	}
}
add_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles_custom_css_fix' );

[spacedmonkey]

Done some benchmarking on this change.

#52655 (comment)

[colorful-tones]

Hi folks,
We are only one week away from the Beta 1 cut-off date for WordPress 6.6. This issue hasn’t seen any movement in a while, so we (the editor triage leads of the 6.6 release) have decided to remove it from the WordPress 6.6 Editor Tasks project board.

[k94av]

It seems to me this has been fixed in trunk.

I think #62357 / WordPress/wordpress-develop#6750 solved the issue, by also deprecating wp_get_global_styles_custom_css.

Can anyone confirm?

[mrleemon]

Apparently, this is no longer an issue in 6.6. I'm currently testing this with 6.6 RC4 and custom CSS in theme.json works on both the editor and the frontend in classic themes. The pull request you linked appears to be milestoned for 6.7, so my issue must have been fixed elsewhere. Can anyone confirm this?

[carolinan]

Test results

Theme.json:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"styles":{
			"css": "a { border: 1px solid green}",
			"elements": {
				"link": {
					"css": "color: red"
				}
			},
			"blocks": {
				"core/paragraph": {
					"css": "background: blue"
				},
				"core/button": {
					"variations": {
						"outline": {
							"css": "border: 1px solid red"
						}
					}
				}
			}
	},
	"version": 3
}

6.6, with and and without Gutenberg trunk

✅ Block Editor: Links are red with a green border. Paragraphs have blue background. Outlined buttons have red border.
👎 Front: Links are red but there is no border. Paragraphs have blue background. Outlined buttons have red border.
👎 Customizer: Links are red but there is no border. Paragraphs have blue background. Outlined buttons have red border.

[mrleemon]

Thanks for the test, @carolinan! So, right now (WP 6.6), custom CSS on the frontend/customizer of sites using classic/hybrid themes is still not working when it's outside the elements and blocks properties. It's an improvement over the initial situation where custom CSS on the frontend/customizer wasn't working at all. Does #62357 fix this particular case?