Gutenberg 9.9: New JSON structure for theme.json files

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 9.9 changes the structure of theme.json files for experimental Full Site Editing (FSEFSE Short for Full Site Editing, a project for the Gutenberg plugin and the editor where a full page layout is created using only blocks.) themes.

The changes made are a first step to allowing theme metadata and more granular control for FSE in the future. More details on that process and what to expect in the future can be found in the Overview GitHub ticket.

The Documentation for theme.json has been updated and is properly maintained so theme developers experimenting with FSE can follow that and update their files accordingly.

The structural changes that went in Gutenberg 9.9 can be found in Pull Request #28110 in the Gutenberg project and can be summed-up in the following:

• settings and styles and now on the root level of the JSONJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. file
• global was renamed to root

With settings and styles in the root level it is now easier to group all blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. settings in one place and all block styles in a separate area, therefore making it easier to navigate the file and get an overview, while at the same time making it easier to extend the file’s functionality in the future.

Before:

{
  "global": {
    "settings": { ... },
    "styles": { ... }
  },
  "core/paragraph": {
    "settings": { ... },
    "styles": { ... }
  }
}

After:

{
  "settings": {
    "defaults": { ... },
    "root": { ... },
    "core/paragraph": { ... }
  },
  "styles": {
    "root": { ... },
    "core/paragraph": { ... }
  }
}