[wp-trac] [WordPress Trac] #59404: Block specific elements styles are not applied for non-core block plugins

[WordPress Trac]

#59404: Block specific elements styles are not applied for non-core block plugins
--------------------------+-----------------------------
 Reporter:  zpericic      |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Themes        |    Version:  6.3.1
 Severity:  normal        |   Keywords:  has-patch
  Focuses:                |
--------------------------+-----------------------------
 ### Description

 Block specific styles are not serialized completely if block is not one of
 core plugins eg. name not starting with "core/".

 As result global styles are broken and non-core blocks could only be
 styled one-by-one or via external CSS.

 This is regression after
 [https://github.com/WordPress/gutenberg/pull/50310 50310].

 I have made PR [https://github.com/WordPress/gutenberg/pull/52228 52228]
 which shortly address this issue.

 ### Step-by-step reproduction instructions


 1. Install custom block which:
   - Name is not starting with 'core/"
   - Supports elements global style (eg. button, link, h[1-6])

 2. Apply some global styles on your custom block for button, link or
 h[1-6].

 theme.json example:
 ```
 {
   "styles": {
     "blocks": {
       "some/block": {
         "color": {
           "background": "black",
           "text": "white"
         },
         "elements": {
           "link": {
             "color": {
               "text": "red"
              }
           }
         }
       }
     },
     "elements": {
       "color": {
         "background": "white",
         "text": "black"
       },
       "link": {
         "color": {
           "text": "blue"
          }
       }
     }
   }
 }

 ```

 3. Link styles are not applied on frontend eg. links are blue. Block-
 specific elements styles are not serialized.

 Result:
 ```
 <style id='global-styles-inline-css'>
 body{...
 .wp-block-some-block{color: white; background-color: black;}
 ...
 </style>
 ```

 Expected result:
 ```
 <style id='global-styles-inline-css'>
 body{...
 .wp-block-some-block{color: white; background-color: black;}
 .wp-block-some-block a:where(:not(.wp-element-button)){color: red;}
 ...
 </style>
 ```

 ### Environment info

 Versions:
 - WordPress: 6.2.2 and newer
 - Gutenberg: 16.1.0 and newer

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