#59321 closed defect (bug) (wontfix)
Block styles set via the "css" property in theme.json are ignored on the frontend in classic/hybrid themes
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Priority: | normal | |
Severity: | normal | Version: | 6.3.1 |
Component: | Editor | Keywords: | has-patch |
Focuses: | Cc: |
Description
### Description
Block styles set via the "css" property in theme.json are ignored on the frontend in classic/hybrid 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](https://es.wordpress.org/themes/twentytwentythree/)) are not affected by this issue, just classic ones.
### Step-by-step reproduction instructions
- Install and activate a classic theme that ships a theme.json file, such as [Astra ](https://wordpress.org/themes/astra/).
- 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}" } }
- 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.
- Save changes.
- 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
### Environment info
I'm using WP 6.3.1
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
Change History (5)
This ticket was mentioned in PR #5207 on WordPress/wordpress-develop by @leemon.
20 months ago
#2
- Keywords has-patch added
Check wp_theme_has_theme_json in addition to wp_is_block_theme in wp_enqueue_global_styles_custom_css() so classic/hybrid themes that use a theme.json file can use its css
prop to add custom styles.
Trac ticket: [](https://core.trac.wordpress.org/ticket/59321)
Gutenberg repo ticket: https://github.com/WordPress/gutenberg/issues/52644
Related Gutenberg plugin issue: https://github.com/WordPress/gutenberg/issues/52644