[wp-trac] [WordPress Trac] #63589: Unable to live preview changes to Additional CSS in the Customizer when using a Block Theme

[WordPress Trac]

#63589: Unable to live preview changes to Additional CSS in the Customizer when
using a Block Theme
-----------------------------------------+--------------------------
 Reporter:  westonruter                  |       Owner:  westonruter
     Type:  defect (bug)                 |      Status:  accepted
 Priority:  normal                       |   Milestone:  6.9
Component:  Customize                    |     Version:  6.2
 Severity:  normal                       |  Resolution:
 Keywords:  has-patch changes-requested  |     Focuses:
-----------------------------------------+--------------------------

Comment (by wildworks):

 As I understand it, the current issue is that in block themes, all custom
 CSS is integrated into the inline global styles:

 {{{
 <style id='global-styles-inline-css'>
 /* CSS variables */
 :root {
   --wp--preset--aspect-ratio--square: 1;
   // ...
 }
 /* Layout and site styles */
 :where(body) {
         // ...
 }
 /* Customizer Custom CSS here */
 body {
   color: blue
 };
 /* Global Styles Custom CSS here */
 body {
   color: red;
 }
 /* Global Styles Block Custom CSS here*/
 :root :where(p) {
   color: yellow;
 }
 </style>
 }}}

 There is probably a reason for this, but I expect that in order to be able
 to dynamically change ''only'' the Customizer custom CSS (`wp-custom-css`)
 in the Customizer preview, it will be necessary to split the styles while
 maintaining the order of this CSS. For example, something like this:

 {{{
 <style id='global-styles-inline-css'>
 /* CSS variables */
 :root {
   --wp--preset--aspect-ratio--square: 1;
   // ...
 }
 /* Layout and site styles */
 :where(body) {
         // ...
 }
 </style>

 <style id='wp-custom-css'>
 /* Customizer Custom CSS here */
 body {
   color: blue
 };
 </style>

 <style id='global-styles-custom-css'>
 /* Global Styles Custom CSS here */
 body {
   color: red;
 }
 /* Global Styles Block Custom CSS here*/
 :root :where(p) {
   color: yellow;
 }
 </style>
 }}}

 @isabel_brison, @aaronrobertshaw, and @andrewserong may know a better
 approach.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/63589#comment:14>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform