Global styles: filter block level styles before compiling global stylesheet

[ramonjd]

Fixes #42206

What? Why? How?

Since #42005, global block styles are enqueued twice:

1. In global-styles-inline-css
2. In wp-block-social-links-inline-css

This causes duplicate styles in styles.blocks[ $block_name ] rendered to the HTML.

The gutenberg_get_style_nodes filter has to be registered before we call gutenberg_get_global_stylesheet() otherwise global styles won't filter out the block styles that are later enqueued.

Testing Instructions

Add some block styles to your theme.json. Any block will do.

I'm using emptytheme and the Social links block as an example.

Example theme.json

{
	"version": 2,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "840px",
			"wideSize": "1100px"
		}
	},
	"styles": {
		"spacing": {
		},
		"blocks": {
			"core/social-links": {
				"spacing": {
					"blockGap": "55px",
					"margin": "100px",
					"padding": "150px"
				},
				"color": {
					"text": "red",
					"background": "yellow"
				}
			}
		}
	},
	"patterns": [
		"short-text-surrounded-by-round-images",
		"partner-logos"
	]
}

Create a post with that block and publish it.

Example block code

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /--></ul>
<!-- /wp:social-links -->

Inspect the block HTML and see that the styles are NOT applied twice.

[aaronrobertshaw]

Thanks for fixing this @ramonjd 👍

This PR tests as advertised

✅ Could replicate the issue on trunk
✅ After checking out this PR branch the duplicates were gone
✅ Tested using supplied snippets, different dynamic and static blocks, with different themes, and in both; site and block editors.

LGTM 🚢

Before	After

[scruffian]

Thanks for fixing this!