Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update preset styles to use Selectors API #49427

Merged
merged 1 commit into from
Apr 13, 2023

Conversation

aaronrobertshaw
Copy link
Contributor

Related:

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"
 }

@aaronrobertshaw aaronrobertshaw added the Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json label Mar 29, 2023
@aaronrobertshaw aaronrobertshaw self-assigned this Mar 29, 2023
@github-actions
Copy link

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:

@oandregal
Copy link
Member

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
Copy link
Member

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.

@aaronrobertshaw aaronrobertshaw merged commit 53d3a62 into trunk Apr 13, 2023
@aaronrobertshaw aaronrobertshaw deleted the update/block-level-preset-styles-selector branch April 13, 2023 07:35
@github-actions github-actions bot added this to the Gutenberg 15.7 milestone Apr 13, 2023
@bph bph added the [Type] Bug An existing feature does not function as intended label Apr 26, 2023
@ramonjd ramonjd added the Needs PHP backport Needs PHP backport to Core label Jun 5, 2023
ramonjd added a commit to ramonjd/wordpress-develop that referenced this pull request Jun 21, 2023
ramonjd added a commit to ramonjd/wordpress-develop that referenced this pull request Jun 21, 2023
ramonjd added a commit to ramonjd/wordpress-develop that referenced this pull request Jun 22, 2023
ramonjd added a commit to ramonjd/wordpress-develop that referenced this pull request Jun 25, 2023
ramonjd added a commit to ramonjd/wordpress-develop that referenced this pull request Jun 26, 2023
tellthemachines pushed a commit to ramonjd/wordpress-develop that referenced this pull request Jun 27, 2023
@ramonjd ramonjd removed the Needs PHP backport Needs PHP backport to Core label Jun 30, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants