Update Theme JSON $schema
to allow pseudo selectors on button
property
#44303
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Provide better IDE feedback to show that the pseudo selectors
:hover
,:focus
, and:active
are allowed on thebutton
propertySee also:
elements
in theme json #41786: Pseudo selector support enabled$schema
to account for pseudo selector support #41936: Pseudo selectors allowed onlink
propertiesWhy?
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 thebutton
propertyAs 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
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"
).:hover
,:focus
, and/or:active
) underelements.button
and{{BLOCK_NAME}}.elements.button
and make sure your editor does not show any warnings or errors.:empty
) and make sure your editor flags them as disallowed.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 aslink
:After
Allowed pseudo selectors no longer show up as errors, but disallowed ones still do: