[wp-trac] [WordPress Trac] #55188: Block styles should load after global styles in the editor

[WordPress Trac]

#55188: Block styles should load after global styles in the editor
---------------------------+-----------------------------
 Reporter:  oandregal      |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Script Loader  |    Version:  5.9
 Severity:  normal         |   Keywords:
  Focuses:                 |
---------------------------+-----------------------------
 Originally reported https://github.com/WordPress/gutenberg/issues/37839 by
 Andrew Staffell. Copied verbatim below:

 In the editor, the style rules from `theme.json` are being inlined after
 those from `add_editor_style()`. This makes it difficult for a block style
 to override a default at the same level of specificity. As far as I can
 see you have to artificially increase the specificity, which makes it less
 flexible.


 **Step-by-step reproduction instructions**

 Here's a simple example.

 I have a "No gap under" block style for groups so that several colour-
 background groups can be placed flush against each other, ie. overriding
 the default bottom margin.

 ''theme.json''


 {{{

 {
         "$schema": "https://schemas.wp.org/trunk/theme.json",
         "version": 2,
         "settings": {
         "styles": {
                 "blocks": {
                         "core/group": {
                                 "spacing": {
                                         "margin": {
                                                 "bottom": "2rem"
                                         }
                                 }
                         }
                 }
         }
 }

 }}}


 ''Block style definition''

 {{{

 <?php
 registerBlockStyle('core/group', {
         name: 'no-gap-under',
         label: 'No gap under',
 });

 }}}


 ''add_editor_style() definition''


 {{{
 .is-style-no-gap-under {
         margin-bottom: 0;
 }

 }}}


 **Result**


 The block style is ineffectual in the editor: because the theme.json rules
 are inlined after the editor styles, the block style (which should
 function as an override) doesn't work, and is overridden by the default
 instead. (It works fine in the front-end because the block styles are
 easily loaded after the inlined theme.json styles.)

 {{{
 .editor-styles-wrapper .wp-block-group {
   margin-bottom: 2rem;
 }
 .editor-styles-wrapper .has-blue-4-background-color {
   background-color: var(--wp--preset--color--blue-4) !important;
 }
 .editor-styles-wrapper .is-style-no-gap-under{
   margin-bottom: 0; /* not applied because it goes last*/
 }
 }}}

 The element being inspected here is:


 {{{
 <div class="block-editor-block-list__block wp-container-0 is-selected wp-
 block-group is-style-no-gap-under block-editor-block-list__layout">
 }}}


 The first and last rules would ideally be in the opposite order, allowing
 easy overriding without having to add extra class or tag names to the rule
 to force it. I've tested just inverting the two corresponding <style>
 declarations by dragging them into the opposite order in Chrome Dev Tools,
 and putting the add_editor_style() rules below the theme.json rules
 instantly fixes the problem.

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