[wp-trac] [WordPress Trac] #45279: The order of the Gutenberg stylesheets affects the UI

[WordPress Trac]

#45279: The order of the Gutenberg stylesheets affects the UI
--------------------------+-----------------------------
 Reporter:  afercia       |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  5.0
Component:  Editor        |    Version:
 Severity:  normal        |   Keywords:  has-screenshots
  Focuses:  ui            |
--------------------------+-----------------------------
 Tested on WordPress `/branches/5.0` with Twenty Seventeen.

 - create a post
 - add a cover image block
 - notice the block UI has a black background and it's taller than expected

 [[Image(http://cldup.com/SGxish1zmi.png)]]

 Turns out the `wp-components` stylesheet is printed out before the `wp-
 block-library` stylesheet:

 [[Image(http://cldup.com/jfnZp46QkI.jpg)]]

 While in the Gutenberg plugin everything looks fine because the order is
 different: `wp-block-library` is printed out before `wp-components`:

 [[Image(http://cldup.com/F9pK6C0tDN.jpg)]]

 I'd tend to think either the order of the stylesheets should be guaranteed
 (and documented) or the Gutenberg styles shouldn't be affected by the
 order. The second option would probably lead to an increased CSS selector
 specificity, which is not desirable.

 Changing the order in `script-loader.php` fixes it for me, but I'm not
 sure it's the best option.

 Note: the black background and taller height are meant to be used for the
 cover image "overlay" when an image has been inserted, see
 https://github.com/WordPress/gutenberg/pull/10291
 On the other hand, I guess this is a general issue that potentially
 applies to all the Gutenberg UI.

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