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 account for pseudo selector support #41936

Merged
merged 2 commits into from
Jun 24, 2022

Conversation

getdave
Copy link
Contributor

@getdave getdave commented Jun 24, 2022

What?

In #41786 we added pseudo selector support to Theme JSON. We now need to update the schema for Theme JSON so we get accurate feedback in code editors such as Visual Studio Code.

When working on this PR you might like to reference: https://json-schema.org/understanding-json-schema/

Why?

We need good develop experience

How?

Update the schema for elements both at the top level and inside blocks to know about the valid pseudo selectors - :hover, :focus, and :active on the link element only.

Note that this introduces some duplication in under the stylesElementsPropertiesComplete.properties.link.allOf[1].properties object where

"border": {},
"color": {},
"spacing": {},
"typography": {},

is effectively duplicating stylesPropertiesComplete.

@adamziel and I spent some time trying to work out a way to DRY this up, but the way additionalProperties locks things down for extension seems to preclude the possibility of achieving this.

In the future as more elements start to allow pseudo elements we may need to DRY the schema up more but for now this is good enough.

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 some pseudo selector rules under elements.link and {{BLOCK_NAME}}.elements.link and check your IDE doesn't complain to you.
  4. Add some invalid pseudo selectors and check it does complain.
  5. Add some pseudo rules under an element which is not link and check it complains.

Screenshots or screencast

@getdave getdave changed the title [WIP] Doesn’t work [WIP] Update Theme JSON $schema to account for pseudo selector support Jun 24, 2022
@getdave getdave requested review from mikachan and adamziel June 24, 2022 09:03
@getdave getdave self-assigned this Jun 24, 2022
@getdave getdave added the Developer Experience Ideas about improving block and theme developer experience label Jun 24, 2022
@getdave getdave marked this pull request as ready for review June 24, 2022 11:17
@getdave getdave requested a review from ajlende as a code owner June 24, 2022 11:17
Copy link
Member

@mikachan mikachan left a comment

Choose a reason for hiding this comment

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

Ran through the testing instructions and this works well for me 👍

@getdave getdave changed the title [WIP] Update Theme JSON $schema to account for pseudo selector support Update Theme JSON $schema to account for pseudo selector support Jun 24, 2022
@getdave getdave merged commit 2121638 into trunk Jun 24, 2022
@getdave getdave deleted the update/theme-json-schema-include-pseudo-selectors branch June 24, 2022 13:49
@github-actions github-actions bot added this to the Gutenberg 13.6 milestone Jun 24, 2022
@bph bph added the Needs Dev Note Requires a developer note for a major WordPress release cycle label Aug 4, 2022
@bph bph mentioned this pull request Oct 3, 2022
89 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Developer Experience Ideas about improving block and theme developer experience Needs Dev Note Requires a developer note for a major WordPress release cycle
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants