The theme.json File

The theme.json lets us configure how the editor works. It can control many different things. For example, define a color palette, provide default styles for WordPress core blocks, disable certain features, etc.

Content width

If a theme doesn’t have a theme.json file, then WordPress uses its default or fallback values for the way that the editor handles the width of our content.

Both the full site editor as well as the post or page editor show content that is centered in the middle portion of the screen.

Now create the theme.json file in the root of the theme folder. We can leave it empty for the time being. When a theme contains this file, WordPress does not use the default settings anymore and now both the full site editor and the post editor screens take up the full available width.

We can program the theme.json file to let the full site editor use the full available width so that if a user inserts a banner or a header, they can get the WYSIWYG (what you see is what you get) effect. However, for the post editor, we can set the content to only take up the middle 800 pixels or so.

In the theme.json file, first include the version number. This is important because the block editor is evolving at a fast pace and WordPress needs a version system in order for everything to not just break. The current version as of writing this lesson is 2.