[wp-trac] [WordPress Trac] #59499: Block custom CSS: Fix incorrect CSS when multiple root selectors

[WordPress Trac]

#59499: Block custom CSS: Fix incorrect CSS when multiple root selectors
--------------------------+-----------------------------
 Reporter:  wildworks     |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  General       |    Version:
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 Backports changes to PHP files made in the Gutenberg plugin with:
 https://github.com/WordPress/gutenberg/pull/53602

 This patch fixes a problem where nested custom CSS is not output correctly
 when a block has multiple root selectors.

 === Testing Instructions

 - Insert two types of List blocks in the post editor:

 {{{
 <!-- wp:list -->
 <ul><!-- wp:list-item -->
 <li>List Item</li>
 <!-- /wp:list-item -->
 <!-- wp:list-item -->
 <li>List Item</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->
 <!-- wp:list {"ordered":true} -->
 <ol><!-- wp:list-item -->
 <li>List Item</li>
 <!-- /wp:list-item -->
 <!-- wp:list-item -->
 <li>List Item</li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list -->
 }}}

 - In the `src/wp-content/themes/twentytwentythree/theme.json` file, apply
 custom CSS to the list block as follows:

 {{{
 {
         ...
         "styles": {
                 "blocks": {
                         "core/list": {
                                 "css": "background: #ccc; & ::marker{
 color: red;}"
                         }
                 },
                 ...
         },
         ...

 }
 }}}

 - View the post.
 - The gray background color and red marker style should be correctly
 applied to both the Ordered and Unordered lists.

 - Check that the global style is output correctly as shown below.

 {{{
 <style id='global-styles-inline-css'>
 ol, ul{
         background: #ccc;
 }
 ol ::marker, ul ::marker{
         color: red;
 }
 </style>
 }}}

 - If this patch is not applied, nested CSS will not be output correctly as
 shown below.

 {{{
 <style id='global-styles-inline-css'>
 ol, ul{
         background: #ccc;
 }
 ol, ul ::marker{
         color: red;
 }
 </style>
 }}}

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