如果您自 WordPress 5.9 引入区块主题概念以来，看过任何一个区块主题，您可能已经注意到，这些新主题的样式几乎都不在 CSS 文件中定义。相反，区块主题使用机器可读的 theme.json 格式。

并且 theme.json 也在不断发展。每个 WordPress 版本（撰写本文时，6.3 版即将在几周内进入测试阶段）都支持更多样式，并且与编辑器界面的集成也更加紧密。

您可以在站点编辑器的全局样式界面的演变中，最清晰地看到无数的改进，该界面在 WordPress 6.2 中获得了一个一站式样式商店。

欢迎使用 Style Book

作为 6.2 版本的一个关键特性，Style Book 是一个您可以设置网站所有样式的地方，至少可以设置全局样式，如果您愿意，还可以构建整个主题，并添加一组用户可以通过单击更改的样式变体。

快速了解区块样式

正如您可能从上面了解到的，在区块主题中，您在 theme.json 中定义设置和样式。因为 json 文件是机器可读的，当您设置区块主题的设置和样式时，它们会显示在站点编辑器界面中。然后，您的用户可以更改网站的外观和感觉，而无需编写任何 CSS。

您可以在这篇核心博客文章中找到更多详细信息。

使用 theme.json 定义样式

您可以在 theme.json 中做很多事情。除了配置样式和设置之外，您还可以启用、禁用或定义从调色板、排版到网站上每个容器的完全自定义宽度等功能。

{
  "version": 2,
  "settings": {
	// 预设定义
	{"appearanceTools": true,
    "color": {
   	 "palette": [
   		 {
   		 "color": "#ffffff",
   		 "name": "Base",
   		 "slug": "base"
   	     	},
   		 {
   		 "color": "#000000",
   		 "name": "Contrast",
   		 "slug": "contrast"
   		 },
        	{ ... },
        	{ ... }
        	}
  },
  "styles":{
	// 样式定义
    	"color":{
        	"background":"var(--wp--preset--color--contrast)",
        	"text":"var(--wp--preset--color--base)"
     	},
   	"typography": { ... },
   	"layout": {... },
   	{ ... },
   	{ ... }
  	// 区块级样式定义
    	"blocks": {
   	   . "core/group": {
   	    	"color": { ... },
        	},
        	{ ... },
        	{ ... }
    	}
	},
  // 元素定义
  "elements": {
    	"button": { ... },
    	"h1": { ...},
    	"heading": {
           	"color": "var(--wp--preset--color--base)"
    	},
    	{ ... },
    	{ ... }
	}
}

您使用设置部分的值来配置站点编辑器的全局/区块级样式，并定义样式预设。在样式部分，您使用设置预设作为CSS 自定义属性来为特定元素和块设置样式，特别是在您想要覆盖全局样式的情况下。

冲突时，谁胜出？

如果您记住接下来的两句话，可以节省大量时间和重复劳动。

theme.json 会覆盖默认的 WordPress 样式。

用户值——他们在设置字段中输入的值——会覆盖两者，占据最高优先级。

WordPress 样式引擎 API 整合了来自多个来源（核心、主题和用户）的样式定义，并生成主题的 CSS 类和自定义属性。

这份 theme.json 文档提供了关于设置、样式和全局样式的更多信息。

走向全局：使用全局样式界面创建模板等

通过模板和模板部件，您可以为自己和用户节省更多时间，并最终得到一个各部分协调一致的设计。您可以为文章和页面构建模板，并为归档页面甚至自定义文章类型设计不同的样式。模板部件允许您设计页眉、页脚和区块，然后在模板中使用它们，这样您就不必再次重建它们。您可以在新的库部分找到模板部件和可重用区块。

这是最新的编辑器 > 设计导航面板的截图。请注意，您可以在左侧看到项目，然后在主窗口中选择并处理它们。

在下面的截图中，我使用全局样式更改了页面模板的背景和文本颜色。您可以通过页面 > 示例页面进入该界面。

在 Style Book 中整合一切

Style Book 是您设计工具箱中的一个工具，它可以让您看到所有设置组合在一起时的效果。这个 GitHub 工单解释了该功能的诞生过程：

在全局样式中为一个不在画布上的区块设置样式并不少见。因此，您无法确定是否达到了预期的效果。解决这个问题的一个方案可能是提供一个包含所有区块的专用文档，用户可以按需查看。

这就是“故事书”的起源。它在 Gutenberg 14.8 中引入，并合并到 WordPress 6.2 中。它让您可以在单个页面上查看网站上的所有区块。更重要的是，您可以在那里即时更改任何元素，并实时预览效果。

现在，站点编辑器浏览模式的左侧样式导航面板中有一个 stylebook 导航按钮，因此您可以快速将不同样式与 Style Book 进行比较。

在现实世界中使用 Style Book

您可以从管理仪表板下的外观 → 编辑器进入 Style Book。然后打开（全局）样式面板，这将调出名为Style Book的新样式面板（共济会之眼图标）。如果您单击 Style Book 按钮，您将看到一个区块预览窗口。

Style Book 预览窗口包含六个选项卡：文本、媒体、设计、小工具和主题。在每个选项卡下，您都可以找到可以在全局和每个区块级别设置样式的区块。以下是一些示例：

• 文本：标题、段落、列表、引用、代码、引文、表格等。
• 媒体：图像、画廊、音频、封面、文件、媒体和文本、视频。
• 设计：按钮、列、组、更多、分页符、分隔符等。
• 小工具：归档、日历、分类列表、自定义 HTML、评论、最新文章、页面列表、RSS、搜索、社交图标、标签云。
• 主题：导航、站点徽标、站点标题、站点标语。

同样，您可以更改全站范围（左侧面板）或区块级别（右侧面板）的样式，实时预览会准确显示所有内容的外观。

更改全局样式以改变整个网站

您可以更改整个网站的样式，例如排版（字体类型、大小等）、配色方案和页面布局，并实时查看更改生效。

在下方，网站的背景颜色从白色更改为鲜艳的琥珀色（左侧面板）。您将在预览窗口中实时看到更改，然后可以全局进行其他更改，例如更改其他颜色或排版，以配合新的背景。

在上图中，您可以看到右侧面板中的文本字体已从默认字体更改为Open Sans（右侧面板）。

全局自定义 CSS

尽管编辑器在每个版本中都变得更加全面，但有些事情您仍然无法在 theme.json 和站点编辑器样式界面中完成，即使在区块主题中也是如此。

对于这些情况，WordPress 6.2 为区块样式添加了自定义 CSS 功能。

它被称为“附加 CSS”，位于“样式操作”（三个点）菜单下，紧邻样式书眼睛图标（左侧面板）。

在右侧面板中，使用自定义 CSS 添加的米色 (#FFE4C4) 覆盖了整个网站的默认白色背景。

区块级样式设置，关注细节

您将主要使用每个区块的样式来使某些区块样式在网站的其余部分中脱颖而出。

在下方，一个引用区块获得了更大的字体大小和斜体字体样式，以区别于网站的其他文本。此更改仅影响每个引用区块实例，而不影响任何其他区块。

如果您想更深入地探索这些样式规则，一个好方法是下载一些使用区块级样式的区块主题，并在本地环境中尝试更改样式。Twenty Twenty-Three 是一个很好的选择，您可以在 theme.json 和设置之间来回切换，看看哪些内容保存在哪里。

我还建议查看自定义核心区块变体以及关于每个区块多种样式的持续讨论。

每个区块的自定义 CSS

除了全局自定义 CSS 功能外，您还可以在 Style Book 中添加每个区块的自定义 CSS。每个区块在样式书面板底部都有一个“附加 CSS”框。（您可能需要滚动才能看到它。）

在下方，一个引文区块获得了自定义 CSS，更改了边框颜色和字体外观（大小、粗细、样式）。

现在，尽管自定义一切很有趣，但更好的做法是在 theme.json 中定义区块样式。

然后，仅在真正需要的地方使用自定义 CSS。

一些零散的说明：

对我来说，Style Book 的感觉很像在 VSC 编辑器中使用实时预览扩展或您最喜欢的浏览器开发者工具进行设计。

就像在开发者工具中进行更改一样，您对样式的更改是临时的，直到您使用“全局应用”功能 (#46965) 保存它们以使更改永久生效。然后，您可以选择使用导出功能或创建区块主题插件导出您的主题及其更改。

想将某些区块隐藏在插入器和预览中吗？这篇核心博客文章告诉您如何操作。