Avoid enqueuing global styles twice when running on WordPress 5.8

[oandregal]

The Gutenberg plugin embeds a stylesheet that contains the global styles of the site. WordPress 5.8 does the same. So, when the plugin runs on WordPress 5.8 we need to tell WordPress core not to enqueue its styles to prevent conflicts and avoid enqueueing them twice.

Types of changes

If there's a global-styles style handle, the plugin will overwrite the contents of the first style element (styles that come from WordPress core). If there's not, it'll enqueue a new stylesheet with that style handle.

How to test

Test the following scenarios and verify that when visiting the front end, there's a global-styles-inline-css stylesheet.

• WordPress <5.8 with Gutenberg
• WordPress 5.8 with and without Gutenberg

Alternatives considered

An alternative I've tried (see aa6e0fa) was to make the plugin use a different style handle (global-styles-gutenberg) and deregister core's if there was one. However, maintaining the style handle consistent allows third-party to hook into it as well.

[aristath]

Code looks good and works as advertised 👍

[aristath]

Just an idea... Instead of removing global-styles and adding global-styles-gutenberg, we could do something like this to switch the data:

if ( isset( wp_styles()->registered['global-styles'] ) ) {
	wp_styles()->registered['global-styles']->extra['after'][0] = $stylesheet;
} else {
	wp_register_style( 'global-styles', false, array(), true, true );
	wp_add_inline_style( 'global-styles', $stylesheet );
}

---

edit: the priority of the hook may need to be changed if we go with something like the above, just to be sure it runs after the global-styles stylesheet is added

[oandregal]

@aristath that sounds exactly like what my first instinct was but didn't find how to do it. Going to give it a try, thanks for sharing!

[oandregal]

This only overwrites the first element, which represents styles that come from WordPress core, so it preservess any other styles that may have been registered after.

[oandregal]

@aristath I've implemented your suggestion, it works nicely and we seem to have used a similar approach in other places as well. Maintaining the global-styles handle consistent no matter the runtime/plugin combination is a good call as well.

Going to merge after test pass, unless you have other feedback.

[aristath]

Tested again and everything works as expected ❤️
No objections, this should be merged.