传统上，主题作者会通过样式表来设置所有元素的样式——有时现在依然需要这样做。在现代WordPress中，即便无法设置所有样式，也几乎可以对主题中的大部分元素直接在theme.json文件中进行样式设置。

当使用这一标准系统时，其效果也会体现在外观 > 编辑器 > 样式界面中。这意味着拥有该管理界面访问权限的主题用户也可以进行设置，而这些设置会与主题原有的样式顺畅共存。同时这也意味着，如果你愿意，可以直接通过这个可视化界面来设计主题样式。

theme.json支持在三个不同层级上设置样式：

  • 根层级（全局）
  • 元素层级
  • 块层级

在本文档中，你将学习通过JSON为这些不同层级设置样式所需的语法。

设置根元素的样式

在WordPress主题中提到“根”元素时，具体指的是HTML的<body>标签。它是页面视觉输出的根基。

从技术层面来讲，为根元素设置样式时，实际上是在添加全局样式，这些样式会贯穿整个设计，除非有更具体的元素或块样式将其覆盖。例如，你很可能希望为整个设计设置一个默认的字体系列或字体大小。当然，在特定情况下你也需要对这些设置进行修改。

由于这些都是全局样式，因此它们直接归属于styles属性之下。

下面我们就通过设置默认的文本颜色和背景颜色来演示这一原理：

{
	"version": 2,
	"styles": {
		"color": {
			"text": "#000000",
			"background": "#f5f1ea"
		}
	}
}

如你所见，color属性直接嵌套在styles属性之下。这意味着WordPress会直接将text和background颜色应用到<body>元素上，从而在编辑器和前端生成如下CSS代码：

body {
	background: #f5f1ea;
	color: #000000;
}

由于CSS的级联机制，除非有更具体的样式规则将其覆盖，否则这些颜色将会应用于所有元素。

如果你在网站前端或通过WordPress管理后台的外观 > 编辑器查看页面，应该能看到这些颜色已经应用到了页面上：

打开样式界面的WordPress文章编辑器，展示了主题的配色。

你不仅能够设置颜色，还可以在这里添加排版、间距等其他样式设置。根元素几乎支持所有可用的样式属性，相关说明可在支持的样式文档中查看。

当styles.spacing.padding属性与settings.useRootPaddingAwareAlignments一起使用时，有独特的应用场景。如需了解这两者如何协同工作，可阅读使用基于根内边距的对齐方式文档。

设置元素的样式

WordPress提供了通过theme.json为元素设置样式的标准系统。这里的“元素”通常对应实际的HTML元素，但在某些情况下也可能指代并非直接对应单个HTML元素的元素，不过这类情况通常都相对简单。

与设置根元素和块的样式类似——你稍后会学到相关内容——你也可以为元素应用大量支持的样式。

目前支持的元素包括：

  • button：应用于<button>元素以及类似按钮的链接，比如按钮块中使用的那种链接。
  • caption：应用于媒体标题，这些标题被包裹在<figcaption>元素中。
  • cite：应用于用于引用内容的<cite>元素，比如引文块和引用块中使用的那种元素。
  • heading：应用于从<h1>到<h6>的所有标题元素，不过单个标题也可以被覆盖这些默认样式。
  • h1 - h6：每个从<h1>到<h6>的元素都可以单独设置样式。
  • link：应用于用于创建链接的<a>标签。

现在我们来看一个实际示例。假设你想让网站上的所有按钮都拥有白色文字颜色，背景为红色。你需要针对styles.elements.button.color中的text和background属性进行设置。

在你的theme.json文件中添加以下代码：

{
	"version": 2,
	"styles": {
		"elements": {
			"button": {
				"color": {
					"text": "#ffffff",
					"background": "#aa3f33"
				}
			}
		}
	}
}

如果你在文章编辑器或网站前端查看按钮，应该能看到这些颜色已经应用：

WordPress样式手册，突出显示了按钮块，并展开了文本颜色选项。

有些元素既可作为元素样式，也可作为更具体块的基础。对于那些同时与块相关的元素，块样式会优先于元素样式。例如，按钮块和标题块可以拥有自己的样式，但它们会回退到button和heading元素样式。

WordPress会在编辑器和前端为你的button元素样式生成如下CSS代码：

.wp-element-button, 
.wp-block-button__link {
	background-color: #aa3f33;
	color: #ffffff;
}

WordPress有时——但并非总是——会为元素赋予一个遵循.wp-element-{$element}命名规则的特定CSS类。例如，按钮元素就拥有.wp-element-button类。你通过theme.json提供的样式就会应用到这个CSS类上。

从生成的CSS中可以看出，WordPress在为button元素设置样式时针对的是.wp-element-button类，同时为了与按钮块保持向后兼容，也会专门针对.wp-block-button__link类进行样式设置。

设置伪类的样式

你还可以为某些元素的常用CSS伪类添加样式属性。这类样式通常用于实现链接悬停、焦点等效果。

button和link元素支持以下伪类：

  • :hover
  • :focus
  • :active
  • :visited

每个伪类都必须作为属性嵌套在你要设置样式的元素之下。例如，如果你想自定义链接的悬停样式，就必须设置styles.elements.link.:hover。

我们还是以之前设置button元素的示例来说明这一点。假设你想在用户鼠标悬停在按钮上时改变背景颜色，可以使用以下theme.json代码来实现：

{
	"version": 2,
	"styles": {
		"elements": {
			"button": {
				"color": {
					"text": "#ffffff",
					"background": "#aa3f33"
				},
				":hover": {
					"color": {
						"background": "#822f27"
					}
				}
			}
		}
	}
}

设置块的样式

块系统的一大优点在于它为为任何块设置样式提供了标准化方案。这意味着你可以直接在theme.json中为WordPress核心块以及第三方插件提供的块添加样式。

要为某个特定块设置样式，你需要在theme.json文件中设置styles.blocks.blockname。之后，你就可以为该块添加任何支持的样式。

我们来看一个简单示例。假设你想让所有的图片块都带有略微圆角的边框，为此你需要设置border.radius属性。

在你的theme.json文件中添加以下代码：

{
	"version": 2,
	"styles": {
		"blocks": {
			"core/image": {
				"border": {
					"radius": "6px"
				}
			}
		}
	}
}

这样，你网站上的所有图片块都会显示出圆角边框：

WordPress样式手册，突出显示了图片块。

WordPress还会为图片块内的嵌套<img>元素在编辑器和前端生成如下CSS代码：

.wp-block-image img {
	border-radius: 6px;
}

你可以根据需要为任意数量或数量的块添加样式，完全由你决定，也取决于你的设计目标。尽情发挥创意吧！

如需查看所有可以设置样式的WordPress核心块列表，请访问核心块参考页面。请注意，此列表不包含来自插件和其他第三方来源的块。

在为块的样式设置值时，你必须知道该块的命名空间和标识符。上文已经提到，图片块的命名空间是core，标识符是image，因此它们的命名空间/标识符组合就是core/image。所有WordPress核心块都拥有core命名空间，你可以在任何块（包括来自第三方插件的块）的block.json文件中找到相关信息。

为嵌套在块中的元素设置样式

你还可以为嵌套在块中的元素添加自定义样式。这一功能让你能够在theme.json中直接为元素设置符合上下文的样式，具备很高的灵活性。

为块中的嵌套元素设置样式时，你需要在块属性之下直接添加一个elements对象：styles.blocks.blockname.elements。

假设你想让引用块使用较大的字体大小，但希望其嵌套的<cite>元素的字体大小有一个上限，即不能超过父块字体大小的50%或1.5rem，以两者中较大的那个值为限。

为此，你需要在theme.json中同时为core/pullquote块及其嵌套的cite元素定义typography.fontSize属性：

{
	"version": 2,
	"styles": {
		"elements": {
			"core/pullquote": {
				"typography": {
					"fontSize": "2.25rem"
				},
				"elements": {
					"cite": {
						"typography": {
							"fontSize": "max( 50%, 1.5rem )"
						}
					}
				}
			}
		}
	}
}

在编辑器中，这些元素的字体大小将会呈现为如下样子：

WordPress文章编辑器，其中包含一个引用块以及嵌套的引用元素。

WordPress会为引用块及其嵌套的<cite>元素生成如下CSS代码用于设置样式：

.wp-block-pullquote {
	font-size: 2.25rem;
}

.wp-block-pullquote cite {
	font-size: max( 50%, 1.5rem );
}

设置块样式变体（块风格）的样式

从WordPress 6.2版本开始，你可以通过theme.json自定义核心块的各种样式变体（即块风格）。这一功能让你无需在单独的样式表中编写自定义CSS，即可使用支持的样式。

要自定义块样式变体，你需要在theme.json中为想要设置样式的块添加一个嵌套的variations属性。之后，每个样式变体都可以使用该块支持的任意样式。

我们以修改按钮块的轮廓风格变体为例。假设你想为这种风格变体定义特定的边框颜色、样式和宽度。

在你的theme.json中添加以下代码：

{
	"version": 2,
	"styles": {
		"blocks": {
			"core/button": {
				"variations": {
					"outline": {
						"border": {
							"color": "currentColor",
							"style": "solid",
							"width": "2px"
						}
					}
				}
			}
		}
	}
}

当为按钮块选择轮廓风格变体时，你应该能在编辑器中看到这些更改已经生效：

WordPress文章编辑器，其中包含4个以2x2网格排列的按钮块。其中两个按钮有实心背景，另外两个为轮廓样式。

目前可用的块及其对应的WordPress核心块样式变体包括：

  • core/button： outline、fill
  • core/image： rounded
  • core/quote： plain
  • core/site-logo： rounded
  • core/separator： wide、dots
  • core/social-links： logos-only、pill-shape
  • core/table： stripes
  • core/tag-cloud： outline

如需更深入地了解如何自定义块样式变体，可阅读WordPress开发者博客上的文章通过theme.json自定义核心块样式变体。

目前theme.json还不支持自定义的块样式变体。该功能目前有一个开放的问题请求。目前你只能使用核心块的样式变体。