Block level settings: remove WP filters in Gutenberg

[ramonjd]

What?

Remove the corresponding WP filters in the plugin for _gutenberg_add_block_level_presets_class so that we don't double up on block level settings styles when the plugin is active.

Why?

#42124 introduced two hooks for _gutenberg_add_block_level_presets_class to print block level settings stylesheets to the page.

These changes were backported to Core in WordPress/wordpress-develop#4013.

Now, when running the plugin in WordPress 6.3-alpha-55628 the style block is output twice.

How?

Removing the WP filters:

remove_filter( 'render_block', '_wp_add_block_level_presets_class', 10, 2 );
remove_filter( 'pre_render_block', '_wp_add_block_level_preset_styles', 10, 2 );

Testing Instructions

Here is some test HTML :

<!-- wp:group {"settings":{"blocks":{"core/button":{"color":{"palette":{"custom":[{"slug":"button-red","color":"red","name":"button red"},{"slug":"button-blue","color":"blue","name":"button blue"}]}}},"core/paragraph":{"color":{"palette":{"custom":[{"slug":"paragraph-red","color":"red","name":"paragraph red"},{"slug":"paragraph-blue","color":"blue","name":"paragraph blue"}]}}}},"color":{"palette":{"custom":[{"slug":"global-aquamarine","color":"aquamarine","name":"Global aquamarine"},{"slug":"global-pink","color":"pink","name":"Global Pink"}]}}}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>Leaf paragraph of inner group block.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"button-blue"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-button-blue-background-color has-background wp-element-button">blue</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"button-red"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-button-red-background-color has-background wp-element-button">red</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:paragraph {"backgroundColor":"paragraph-blue"} -->
<p class="has-paragraph-blue-background-color has-background">blue</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"backgroundColor":"paragraph-red"} -->
<p class="has-paragraph-red-background-color has-background">red</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

And don't forget the theme.json with the block-level CSS settings.

Example theme.json

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "840px",
			"wideSize": "1100px"
		},
		"color": {
			"palette": [
				{
					"slug": "global-aquamarine",
					"color": "aquamarine",
					"name": "Global aquamarine"
				},
				{
					"slug": "global-pink",
					"color": "pink",
					"name": "Global Pink"
				}
			]
		},
		"blocks": {
			"core/button": {
				"color": {
					"palette": {
						"custom": [
							{
								"slug": "button-red",
								"color": "red",
								"name": "button red"
							},
							{
								"slug": "button-blue",
								"color": "blue",
								"name": "button blue"
							}
						]
					}
				}
			},
			"core/paragraph": {
				"color": {
					"palette": {
						"custom": [
							{
								"slug": "paragraph-red",
								"color": "red",
								"name": "paragraph red"
							},
							{
								"slug": "paragraph-blue",
								"color": "blue",
								"name": "paragraph blue"
							}
						]
					}
				}
			}
		}
	},
	"styles": {
		"color": {
			"background": "var(--wp--preset--color--global-aquamarine)",
			"text": "var(--wp--preset--color--global-pink)"
		}
	},
	"patterns": [
		"short-text-surrounded-by-round-images",
		"partner-logos"
	]
}

Check that the resulting CSS is not output twice.

Before	After

[github-actions]

Flaky tests detected in eae4665.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4615028665
📝 Reported issues:

• [Flaky Test] allows shift tabbing to the block toolbar from the first block #49025 in /test/e2e/specs/site-editor/writing-flow.spec.js
• [Flaky Test] can detach blocks from a template part #42245 in /test/e2e/specs/site-editor/template-part.spec.js
• [Flaky Test] prevent the removal of locked column block from the column count change UI #49534 in /test/e2e/specs/editor/blocks/columns.spec.js
• [Flaky Test] shows changes in a template when a template part it contains is modified #42139 in /test/e2e/specs/site-editor/template-part.spec.js

[andrewserong]

Thanks for tidying this up @ramonjd!

✅ Confirmed that on trunk the style tag and its contents is output twice
✅ With this PR applied, the style tag is only output once

Unrelated to this PR, it looks like this block support's feature is only supported on the site frontend and not within the post or site editors? At any rate, there's no difference in behaviour to the editor with this PR so that's a little off topic for now 😄

LGTM! ✨

[ramonjd]

Unrelated to this PR, it looks like this block support's feature is only supported on the site frontend and not within the post or site editors?

I noticed that too and assumed that it was just implemented to be a theme.json API for now. Maybe @jorgefilipecosta can confirm.

Thanks a lot for testing!!