WordPress 6.2 在 theme.json 中增加了对区块级 CSS 的支持。这意味着，当内置的设计工具无法完全满足你的用例时，你现在可以添加自定义代码片段。

theme.json 支持的 CSS 功能足以覆盖大多数常见样式。但它不可能覆盖所有场景，同时在编辑器 UI 中提供匹配的设计工具，这是一个重要的考量。如果界面覆盖了所有可能性，用户体验将会受到影响。

有时，你仍然需要为区块主题使用传统的 CSS。

为什么不直接把 CSS 放在 style.css 里就完事了呢？为什么要费心把 CSS 混进 theme.json 里？

这些问题的答案取决于你——你是主题设计师。但使用 theme.json 而非样式表的主要优势在于，.json 文件将 CSS 重新接入 UI。用户可以直接在区块的自定义 CSS 面板中定制代码。

现代 WordPress 允许主题和用户进行沟通。主题通过 theme.json 提供配置，用户可以在界面中自定义它。在底层，所有内容（甚至包括用户自定义项）都被格式化为 JSON，并在一套标准规则下工作。作为设计师，你越深入使用这个系统，你的用户将拥有越多的灵活性。

也存在一些陷阱，你将会了解到这些。该系统并不完美，但这些工具足够可靠，你可以开始深入研究这个功能，并决定何时何地使用它。

添加区块级 CSS

你应该已经熟悉如何在 theme.json 中自定义区块样式。如果不熟悉，请先阅读全局设置和样式文档。

你可以通过在 theme.json 中的 styles.blocks.[block-name] 对象添加一个新的 css 属性来添加自定义样式。这里有一个很酷的地方：当你以这种方式添加 CSS 时，你不需要知道选择器。WordPress 会自动为区块生成它。

注意这个 JSON 代码如何格式化 css 属性：

{
	"css": "color: red;"
}

该值是一个 CSS 声明，看起来可能很熟悉。唯一的区别是 JSON 将声明用引号包裹起来，并将其赋值给 css 属性。

现在，尝试添加一个 CSS 声明。这个 theme.json 代码示例为文章标题区块添加了一个自定义的 letter-spacing 值：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"styles": {
		"blocks": {
			"core/post-title": {
				"css": "letter-spacing: 1px;"
			}
		}
	}
}

将这些更改保存到你的 theme.json。WordPress 将在前端和编辑器中为此生成 CSS：

.wp-block-post-title {
	letter-spacing: 1px;
}

现在，在 WordPress 管理后台打开外观 > 编辑器屏幕。然后，打开样式面板，选择区块 > 文章标题 > 附加区块 CSS。你的自定义 CSS 应该会出现，如下所示：

因为你在 theme.json 中注册了 CSS，你的用户可以直接在界面中对其进行更改。他们可以跳过 CSS 特异性的复杂性，并且在这个例子中，他们永远不会知道尝试寻找正确选择器的麻烦。

这是你与用户之间一个非常强大的桥梁。

技巧、窍门与陷阱

你已经学会了如何添加基本的 CSS 声明，但也有一些技巧可以用来处理更复杂的场景。

使用 & 选择器和花括号

WordPress 支持 & 选择器，就像你在 Sass 这样的语言中看到的那样。但它并不完全相同。例如，它不支持嵌套的 CSS 块。

但它确实适用于将选择器附加到 WordPress 生成的区块类上。

一分钟前，你定位了文章标题区块，它的类是 .wp-block-post-title。如果你只想在它附加了自定义类时定位它呢？比如，当你注册一个自定义的区块样式变体时？

假设你注册了一个名为 letter-spacing-sm 的区块样式，它将生成一个类 .is-style-letter-spacing-sm。你可以用 &.is-style-letter-spacing-sm 附加该类，并用花括号包裹你的 CSS 声明：

{
	"core/post-title": {
		"css": "&.is-style-letter-spacing-sm { letter-spacing: 1px; }"
	}
}

WordPress 将生成这个 CSS：

.wp-block-post-title.is-style-letter-spacing-sm {
	letter-spacing: 1px;
}

从技术上讲，你可以不使用 & 符号来编写自定义代码，WordPress 会正确地附加它。但 & 给你一个视觉提示，表明 .is-style-letter-spacing-sm 正在被附加到另一个类上。

定位嵌套元素

& 符号真正发挥作用的地方是定位嵌套元素。例如，假设你想旋转图片区块说明文字，如下所示：

如果你写了下面的代码，你会得到一个错误的选择器：

{
	"core/image": {
		"css": "figcaption { transform: rotate( 1deg ); }"
	}
}

WordPress 会将 figcaption 附加到区块类名上：

.wp-block-imagefigcaption {
	transform: rotate( 1deg );
}

你必须在代码开头加一个空格，或者使用 &。记住添加空格并不理想，而且当用户进行编辑时更容易出错。

像这样写会更容易且更不容易出错：

{
	"core/image": {
		"css": "& figcaption { transform: rotate( 1deg ); }"
	}
}

这将触发 WordPress 生成预期的 CSS 代码块：

.wp-block-image figcaption {
	transform: rotate( 1deg );
}

大型 CSS 代码块

如果你过去使用过足够多的 JSON，你可能已经注意到将 CSS 保存为 JSON 字符串值有几个主要缺点：

• CSS 没有内置的语法高亮。
• JSON 不支持换行，所以别想使用多行 CSS 块。

可能有一些工具可以帮助你绕过这些限制，但当你使用默认系统时，你很快就会遇到问题。

例如，你可能想为图片区块输出的 <img> 元素添加一个看起来像手绘的边框，如下所示：

这个设计需要几个 CSS 声明来实现：

{
	"core/image": {
		"css": "& img { border: 2px solid currentColor; overflow: hidden; box-shadow: 0 4px 10px 0 rgba( 0, 0, 0, 0.3 ); border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important; }"
	}
}

这时你可能会开始质疑使用这个功能是否值得，因为 JSON 并不是编写大块 CSS 代码的理想方法。添加超过几个 CSS 声明，事情很快就会变得非常混乱。

代码在编辑器里看起来也很乱——对你的用户来说难以阅读，对一些人来说编辑起来有点吓人。解决这个问题的一种方法是：在最终字符串中使用 n 表示换行，使用 t 表示制表符。下面是一个例子：

{
	"core/image": {
		"css": "& img {ntborder: 2px solid currentColor;ntoverflow: hidden;ntbox-shadow: 0 4px 10px 0 rgba( 0, 0, 0, 0.3 );ntborder-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important;n}"
	}
}

这将为用户在界面中提供一个格式良好的 CSS 块：

& img {
	border: 2px solid currentColor;
	overflow: hidden;
	box-shadow: 0 4px 10px 0 rgba( 0, 0, 0, 0.3 );
	border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important;
}

JSON 对你来说可能看起来不太好，但你的用户可能会欣赏 CSS 的格式。

何时在 theme.json 中使用 CSS

theme.json 中的 CSS 支持既可能是一个强大的功能，也可能是一个令人头疼的根源。在目前的状态下，当你需要对特定区块进行小的设计更改时，它工作得很好，特别是如果你的主题没有加载任何样式表。

与站点编辑器中样式界面的集成对于想要自定义主题添加的这些 CSS 片段的用户来说也很棒。

如果你想充分利用它，同时还想使用更大的 CSS 块，你需要能够缓解痛点的工具。例如，一个从样式表文件中提取 CSS、将代码格式化为有效的 JSON 字符串并保存到 theme.json 的脚本可能是答案。这超出了本文的范围，但也许它会激励你构建解决方案，突破主题定制的界限。

最终，这只是工具箱中的另一个工具。在你的项目有意义时使用它。