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颜色保存为您的两个自定义颜色:

如您所见,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 块现在应显示新颜色:

如果您检查其他块,它们仍将使用全局颜色调色板。只有 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 中覆盖这些设置。