Make WordPress Core

Opened 9 months ago

Last modified 9 months ago

#59321 new defect (bug)

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

Reported by: leemon's profile leemon Owned by:
Milestone: Awaiting Review 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

  1. Install and activate a classic theme that ships a theme.json file, such as [Astra ](https://wordpress.org/themes/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}"
  }
}

  1. 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.
  2. Save changes.
  3. 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:
https://user-images.githubusercontent.com/2060659/253602606-e56391e7-e320-49f8-b939-7ac60f903a4b.jpg

Frontend:
https://user-images.githubusercontent.com/2060659/253602584-875cf30c-c96b-428e-93c6-71b1ad58cc2e.jpg

### 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 (2)

This ticket was mentioned in PR #5207 on WordPress/wordpress-develop by @leemon.


9 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

Note: See TracTickets for help on using tickets.