Update preset styles to use Selectors API

[aaronrobertshaw]

Related:

• Block.json: Refactor and stabilize selectors API #46496
• Selectors API: Fix for global styles hook, style variations, and duotone #49393

What?

• Updates the collection of custom block selectors for generating the preset styles to use the Selectors API.

Why?

Now the Selectors API has been stabilised, it may be used in place of the old supports.__experimentalSelector properties.

How?

If a block has a custom selector set via either the Selectors API or the old __experimentalSelector supports property, that selector is used.

Testing Instructions

1. Create a post using the example block content below
2. Ensure the preset styles selectors match trunk
3. Tweak a block.json file to customise or add a custom selector and refresh the editor or frontend and check that new selector is used for the preset styles.

Example block markup with block level presets

<!-- 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"}]}}}},"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":"global-aquamarine"} -->
<p class="has-global-aquamarine-background-color has-background">global-aquamarine</p>
<!-- /wp:paragraph -->

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

Example block.json tweak for Group block

diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json
index 2b227a1584..63bc1773a0 100644
--- a/packages/block-library/src/group/block.json
+++ b/packages/block-library/src/group/block.json
@@ -76,6 +76,9 @@
 			"allowSizingOnChildren": true
 		}
 	},
+	"selectors": {
+		"root": ".hi-there"
+	},
 	"editorStyle": "wp-block-group-editor",
 	"style": "wp-block-group"
 }

[github-actions]

Flaky tests detected in f0b8497.
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/4552095699
📝 Reported issues:

• [Flaky Test] allows tabbing to the inspector from the last block #48504 in /test/e2e/specs/site-editor/writing-flow.spec.js

[oandregal]

Tweak a block.json file to customise or add a custom selector and refresh the editor or frontend and check that new selector is used for the preset styles.

I'm able to make this work if I update a block that uses the existing __experimentalSelector to use the new API instead. For example, I used the button block.

However, if I add selectors.root to a block that doesn't use the legacy API I can't find the selector. I used that using the group and files blocks. I'll try again tomorrow, in case it's related to my setup or that I'm doing something wrong. Sharing in case you could double-check that scenario.

[oandregal]

However, if I add selectors.root to a block that doesn't use the legacy API I can't find the selector. I used that using the group and files blocks. I'll try again tomorrow, in case it's related to my setup or that I'm doing something wrong. Sharing in case you could double-check that scenario.

This is working fine as well.