[wp-trac] [WordPress Trac] #59321: Block styles set via the "css" property in theme.json are ignored on the frontend in classic/hybrid themes

[WordPress Trac]

#59321: Block styles set via the "css" property in theme.json are ignored on the
frontend in classic/hybrid themes
--------------------------+-----------------------------
 Reporter:  leemon        |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Editor        |    Version:  6.3.1
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 ### 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}"
   }
 }

 }}}


 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:**
 [[Image(https://user-
 images.githubusercontent.com/2060659/253602606-e56391e7-e320-49f8-b939-7ac60f903a4b.jpg)]]

 **Frontend:**
 [[Image(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

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/59321>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform