theme.json 中的大多数设置允许您在全局级别配置属性。这意味着它们适用于支持这些属性的所有块。但 WordPress 也允许您在块级别控制这一点。

settings.block 属性就是为此设计的——您可以为单个块配置从排版、颜色到间距等所有内容。

在继续本手册的这一页之前,重要的是至少要熟悉现有的 theme.json 设置。这样您就可以按每个块应用它们。

块设置如何工作

在 theme.json 设置文档的前几页中,您学习了如何在全局级别配置特定属性。本质上,这意味着它们应用于支持特定属性/功能的所有块。

您应该在 theme.json(为示例而缩短——您可以通过主 设置文档 查看所有可用属性)中配置许多这些属性:

{
	"version": 2,
	"settings": {
		"border": {},
		"color": {},
		"custom": {},
		"spacing": {},
		"typography": {}
	}
}

但有时您需要为单个块添加设置,并且为块设置的任何内容都会覆盖其全局设置。因此,让我们探索一个显示块特定设置覆盖全局设置的示例。

对于此示例,您将创建一个自定义颜色调色板,您可以在 颜色设置文档 中了解有关它的信息。这将在全局应用并用于每个块的颜色选择器。然后,您将仅为 Cover 块创建一个自定义颜色调色板,该调色板仅显示给 Cover 块。

首先,在 theme.json 中添加您的全局颜色调色板,包含两个名为 base 和 contrast 的颜色:

{
	"version": 2,
	"settings": {
		"color": {
			"palette": [
				{
					"color": "#0284c7",
					"name": "Base",
					"slug": "base"
				},
				{
					"color": "#ffffff",
					"name": "Contrast",
					"slug": "contrast"
				}
			]
		}
	}
}

现在在 WordPress 编辑器中添加一个 Cover 块和一些嵌套文本,将块的Text和Overlay颜色保存为您的两个自定义颜色:

WordPress 帖子编辑器显示具有蓝色背景和白色文本的 Cover 块。

如您所见,Cover 块当前使用您在 theme.json 文件中配置的全局颜色调色板。

假设您希望 Cover 块使用橙色颜色调色板。您可以通过在 theme.json 文件中针对 settings.blocks[core/cover].color.palette 并传递自定义颜色的数组来配置这一点。

将此新部分添加到您的现有 theme.json,使其看起来如下:

{
	"version": 2,
	"settings": {
		"color": {
			"palette": [
				{
					"color": "#0284c7",
					"name": "Base",
					"slug": "base"
				},
				{
					"color": "#ffffff",
					"name": "Contrast",
					"slug": "contrast"
				}
			]
		}
		"blocks": {
			"core/cover": {
				"color": {
					"palette": [
						{
							"color": "#ea580c",
							"name": "Base",
							"slug": "base"
						},
						{
							"color": "#fff7ed",
							"name": "Contrast",
							"slug": "contrast"
						}
					]
				}
			}
		}
	}
}

如 theme.json 示例所示,您为块设置使用的组织结构与全局设置相同(即,全局级别的 settings.color,但块级别的 settings.blocks[core/cover].color)。

如果您刷新浏览器窗口,您的 Cover 块现在应显示新颜色:

WordPress 帖子编辑器显示具有橙色背景和白色文本的 Cover 块。

如果您检查其他块,它们仍将使用全局颜色调色板。只有 Cover 块将使用此自定义橙色调色板。

按块的调色板只是冰山一角。您可以为任何块配置任何 theme.json(假设该块支持它)。这使您能够以难以置信的方式控制主题的工作方式。

当针对块的设置时,您必须知道其命名空间和 slug。上面,您了解到 Cover 块具有命名空间 (core) 和 slug (cover),创建了 core/cover 的命名空间/slug 组合。所有核心 WordPress 块都具有 core 命名空间,您可以在其 block.json 文件中找到有关任何块(包括来自第三方插件的块)的此信息。

默认块设置

信不信由你,WordPress 实际上在 theme.json 中配置了几个默认块设置。通常,这留给主题处理,但这些设置主要是为了向后兼容旧版 WordPress 的功能而启用。

WordPress 默认启用 Button 和 Pullquote 块的几个设置。这是在默认 theme.json 中的外观:

{
	"version": 2,
	"settings": {
		"blocks": {
			"core/button": {
				"border": {
					"radius": true
				}
			},
			"core/pullquote": {
				"border": {
					"color": true,
					"radius": true,
					"style": true,
					"width": true
				}
			}
		}
	}
}

您可以像在文档的前一节中学到的那样,在您的 theme.json 文件中覆盖这些块特定设置。

如果您想知道为什么某些全局设置似乎不适用于某些块(特别是 Button 和 Pullquote),这可能是因为它们在块级别被设置。如果您想要不同的行为,则需要在 theme.json 中的 settings.blocks 中覆盖这些设置。