Skip to content

Instantly share code, notes, and snippets.

@ajlende

ajlende/README.md

Last active November 14, 2021 16:28
Show Gist options
  • Save ajlende/77e59525980bcf2d5cd02a4ac0dcaab9 to your computer and use it in GitHub Desktop.
Save ajlende/77e59525980bcf2d5cd02a4ac0dcaab9 to your computer and use it in GitHub Desktop.
Download ZIP
Using WordPress theme.json Schema
Raw
README.md

A schema for theme.json is now available. The schema can be used by supported code editors to provide things like tooltips, autocomplete, and schema validation while editing a file.

SchemaStore.org lists the following editors as supported, and JSON Schema lists a few more.

  • IntelliJ IDEA
  • PhpStorm
  • PyCharm
  • Rider
  • RubyMine
  • Visual Studio 2013+
  • Visual Studio Code
  • Visual Studio for Mac
  • WebStorm
  • JSONBuddy

For Visual Studio Code, all you need to do is add "$schema": "https://schemas.wp.org/trunk/theme.json" to the beginning of your theme.json file. Check the documentation for your favorite editor to see how to enable JSON schemas there.

Animation of the $schema property being added to theme.json in Visual Studio Code

Validation

Properties that are not a part of the schema will show up with undercurls to help catch typos and improperly nested properties.

Invalid settings.border.custom property with a yellow underline and a tooltip reading, "Property custom is not allowed."

Tooltips

Tooltips describe properties and include the version of WordPress that they were introduced.

Animation of the cursor hovering over theme.json properties in Visual Studio Code and showing descriptions of each property as a tooltip

Autocomplete

Autocomplete can make editing theme.json faster and lead to fewer errors.

Animation of autocomplete being used in Visual Studio Code to add properties to the theme.json

Versioning

Older versions of the schema can be accessed by replacing trunk with the version of Gutenberg that you'd like to use the schema for. For example https://schemas.wp.org/v11.9.0/theme.json for Gutenberg 11.9.0.

Contributing

The source for the theme.json schema can be found on GitHub at WordPress/gutenberg. Issues an pull requests to the contents of the schema can be made there.

Additionally, the schemas have been added to the SchemaStore catalog. SchemaStore is not a part of WordPress.org, but issues and pull requests to update the catalog are welcome on GitHub at SchemaStore/schemastore.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment