theme.json

Rural Blog ships a theme.json. It is short on purpose:

{
  "$schema": "https://schemas.wp.org/wp/6.0/theme.json",
  "version": 2,
  "settings": {
    "layout": {
      "contentSize": "620px",
      "wideSize": "900px"
    },
    "spacing": {
      "blockGap": true
    }
  }
}

What it does

contentSize: 620px — the width of the editor canvas, and the width a constrained block layout uses. It matches the theme’s narrow (reading) width, so what you see in the editor is what the post renders at.

wideSize: 900px — how far a block set to Wide width escapes the reading column. See Wide and full width.

blockGap: true — puts the vertical space between blocks under the theme’s control rather than the editor’s default. That is what stops a paragraph followed by an image opening a gap the rest of the theme knows nothing about.

Why it is not bigger

A classic theme has two places a style can come from: theme.json and the stylesheet. Duplicating the palette and typography into theme.json would mean every colour and font existed twice, in two systems with different rules about which wins — and the Customizer, which is where you actually set them, would be one of three sources of truth rather than the one.

So the theme declares only what the editor genuinely needs to know and keeps everything else in one place. The editor is kept in step through editor.css instead — see Block editor support.

Changing the widths

The two numbers are not Customizer settings. To change them, override the file from a child theme: put your own theme.json in the child theme folder and WordPress merges it over the parent’s.

{
  "$schema": "https://schemas.wp.org/wp/6.0/theme.json",
  "version": 2,
  "settings": {
    "layout": {
      "contentSize": "760px",
      "wideSize": "1100px"
    }
  }
}

If you do that, change the narrow width in the Customizer to match, or the editor and the front end will disagree about how wide a post is.

Related

• Wide and full width
• Create a child theme