The order of the Gutenberg stylesheets affects the UI

[afercia]

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

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

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

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.

[ocean90]

I think it should follow the dependencies tree of the scripts. Since ​block-library depends on components the current order would be correct in core, although not defined as such, yet.

[desrosj]

I am able to reproduce the issue using the Twenty Nineteen theme with and without the package updates from Gutenberg 4.5.

45279.diff​ fixes the issue, but the dependency is backwards. It's possible the CSS dependencies do not match the JS ones.

Writing out an update here made me think of something else to try. I thought that when registering a style, dependencies specified need to have been previously registered. But that does not appear to be true.

[desrosj]

Checking into the implementation in the plugin a bit further, the CSS dependencies do not always match the packages.

I can reproduce this issue in the plugin by adding wp-components as a dependency of wp-block-library.

I think 45279.diff​ is probably the right approach here, but changing the stylesheet loading order could cause some other styling issues to pop up.

[youknowriad]

In my opinion wp-components and wp-block-library are both completely unrelated styles.

• wp-block-library is about the frontend styles of The blocks (not the editor styles, this wp-edit-blocks)
• wp-components is about the generic components to build the UI

So no style should depend on the other in this case. I think a better fix would be to ensure these two styles don't conflict no matter the loading order. I'd be fine with a temporary fix like suggested here but we should follow up on the Github repository to fix the root issue.

[gziolo]

I agree with Riad, that we should investigate why this conflict happens in the first place. Those styles shouldn't depend on each in this direction. It should be probably like this:

wp-components < wp-editor < wp-block-library < wp-edit-blocks

I think it's fine to move forward with the proposed fix for now given that this is how it works in Gutenberg as of today. We should definitely revisit it very soon.

[desrosj]

Agreed! I opened ​GB-12179 to explore this upstream.

[desrosj]

Just opened ​GB-12187 to address this in the packages.

I am not sure if updating just one package is possible, but if the affected package can be released and then bumped in Core, the temporary fix in 45279.diff​ would not be needed.

[desrosj]

This has been ​fixed upstream and can be resolved in core once the package is released and the version is bumped in Core.

Leaving this open until that happens and this is fully tested and confirmed.

[noisysocks]

r43935 contained the upstream fix. I can no longer reproduce this issue in the 5.0 branch.