块主题的核心是 theme.json 文件,它定义了整个网站的设计系统。在块主题中,functions.php 应该几乎是空的,菜单注册、侧边栏、编辑器样式、颜色调色板、内容宽度这些传统主题在 functions.php 中完成的工作,现在都由 theme.json 接管了。

theme.json 的核心结构

theme.json 分为几个主要部分:settings 定义可用的设计选项,styles 定义默认的样式值,customTemplates 和 templateParts 声明模板和模板部件。在 settings 中,你可以配置颜色调色板、字体大小预设、间距预设、布局宽度等。

颜色系统的配置

在 settings.color.palette 中定义主题的颜色方案。每个颜色有一个 slug 和一个 color 值。定义后,这些颜色会出现在块编辑器的颜色选择器中,用户可以直接选用。在 styles 中,使用 CSS 变量引用这些颜色,比如 var(--wp--preset--color--primary)。

字体系统的配置

在 settings.typography.fontSizes 中定义字号预设,在 settings.typography.fontFamilies 中定义字体族。块编辑器会根据这些配置生成对应的排版控件。

布局宽度的控制

通过 settings.layout.contentSize 和 settings.layout.wideSize 定义内容的默认宽度和宽幅宽度。声明 wideSize 后,主题自动获得对齐宽幅的能力,不需要额外声明 add_theme_support('align-wide')。

避免双重配置

如果一个主题同时在 add_theme_support('editor-color-palette') 和 theme.json 中声明颜色调色板,会导致两个调色板冲突,theme.json 胜出,PHP 代码成为死代码。块主题应该统一使用 theme.json。