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 Theme JSON $schema to allow pseudo selectors on button property #44303

Merged

Conversation

stephymiehle
Copy link
Contributor

What?

Provide better IDE feedback to show that the pseudo selectors :hover, :focus, and :active are allowed on the button property

See also:

Why?

Improving the developer experience – anecdotally, I was trying to implement a button hover style in a full-site theme but wasn't certain that I was doing so the right way since the schema was disallowing my solution

How?

Update the schema for top-level and interior blocks to allow the valid pseudo selectors :hover, :focus, and :active on the button property

As mentioned in #41936, this adds some code duplication and is not the DRYest solution. If this were implemented for all of the other properties in the same manner, we'd be extremely redundant. However, links and buttons are both very standard properties to support pseudo selector states; I feel that it's fair to add a small bit of duplication to support such a common use.

Testing Instructions

  1. Activate a Theme which you can modify locally.
  2. Open the Theme's theme.json file and update the $schema to point to your local Gutenberg version do the schema file (e.g. "$schema": "file:///Users/{{YOUR_USER}}/Sites/gutenberg/schemas/json/theme.json").
  3. Add allowed pseudo selector rules (:hover, :focus, and/or :active) under elements.button and {{BLOCK_NAME}}.elements.button and make sure your editor does not show any warnings or errors.
  4. Add disallowed pseudo selector rules (such as any applied to :empty) and make sure your editor flags them as disallowed.
  5. Add allowed pseudo selector rules under an unsupported element (such as h2) and make sure your editor flags them as disallowed.

Shamelessly adapted from #41936

Screenshots or screencast

Before

Common button pseudo selectors are disallowed even though they are functional and follow the same format/pattern as link:

image

After

Allowed pseudo selectors no longer show up as errors, but disallowed ones still do:

image

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Sep 20, 2022
@github-actions
Copy link

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @blindingstars! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

Copy link
Contributor

@getdave getdave left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good to me. Matches the work we did for link element.

At some point we can DRY this up, but it's not necessary at this point.

Thank you for taking the time to contribute - it's much appreciated 🙇

@ZebulanStanphill ZebulanStanphill added the [Type] Bug An existing feature does not function as intended label Sep 21, 2022
@Mamaduka
Copy link
Member

The failing e2e test isn't related to this change (See #44350), so I'm going to merge the PR.

Thanks for contributing, @blindingstars!

@Mamaduka Mamaduka merged commit 98a96e8 into WordPress:trunk Sep 22, 2022
@github-actions
Copy link

Congratulations on your first merged pull request, @blindingstars! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!

@github-actions github-actions bot added this to the Gutenberg 14.3 milestone Sep 22, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository [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