通过 theme.json 自定义核心区块样式变体

查看官方原文 ↗ 发布于 2023年5月26日

随着每个版本的发布，WordPress 中的全局样式功能让你能够越来越快速、轻松地完成更多工作。自 WordPress 6.2 起，你可以在 theme.json 中——或直接在站点编辑器的样式界面中——设置、更改和调整核心区块样式变体。

这意味着你可以用比以往更少的 CSS 来构建主题。

甚至在站点编辑器的样式界面中创建和编辑自定义区块样式也可能在 WordPress 6.3 的计划中。但让我们先专注于当前可以实现的功能。

本文中展示的 theme.json 代码将区块样式称为“变体”（“区块样式变体”的简称），但不应将此功能与区块变体或全局样式变体混淆。这是 WordPress 中一个不幸的命名约定。为避免混淆，本文将称其为“区块样式”。

自定义核心区块样式

让我们以内置的按钮区块样式 Outline 为例。假设你正要为主题设计按钮，它看起来会是这样：

WordPress 文章编辑器，显示三个具有较大内边距和圆角的按钮。

核心的 Outline 样式有其独特的设计，拥有 2px 的实线边框、圆角和大量的内边距。但这并不是你现在想要的外观。

假设你想要更粗的边框、方角和更紧凑的间距。也许你一时兴起，决定加入一个有趣的盒阴影，如下所示：

WordPress 文章编辑器，显示三个带有实心黑色边框和实心黑色投影的矩形按钮。

在 WordPress 6.2 之前，你需要编写一些 CSS（可能是在区块特定的样式表中）来实现你想要的更改。

但从 6.2 开始，你可以在 theme.json 中编辑其样式属性——这与更改按钮区块默认样式的位置相同。

以下 theme.json 代码示例专门针对 Outline 样式，应用了自定义的边框、阴影和间距样式：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"styles": {
		"blocks": {
			"core/button": {
				"variations": {
					"outline": {
						"border": {
							"color": "var( --wp--preset--color--black )",
							"radius": "0",
							"style": "solid",
							"width": "3px"
						},
						"shadow": "var( --wp--preset--shadow--outlined )",
						"spacing": {
							"padding": {
								"top": "0.5rem",
								"bottom": "0.5rem",
								"left": "1.5rem",
								"right": "1.5rem"
							}
						}
					}
				}
			}
		}
	}
}

outlined 阴影预设由 WordPress 注册，任何主题都可以使用。你也可以使用 natural、deep、sharp、crisp 或自定义阴影预设。

在很大程度上，区块样式支持应该能让你将更多自定义代码保留在 theme.json 文件中。虽然关于样式应该放在哪里存在不同的观点，但将它们放在标准的 theme.json 文件中的一个引人注目的好处是用户自定义。

下面的截图确认了对 Outline 区块样式所做的自定义也会出现在样式界面中：

WordPress 样式书，高亮了按钮区块。侧边栏中显示了一个带有其自定义设计工具的按钮轮廓版本。

你的主题用户可以查看样式的来源并根据需要进行调整。当你将样式规则放在自定义 CSS 文件中时，这个好处就丧失了。

可用的核心区块样式

由于此功能在 WordPress 6.2 中仅适用于核心区块样式，你仅限于自定义以下区块及其样式：

core/button : outline
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 自定义核心区块样式变体

自定义核心区块样式

可用的核心区块样式

更多功能即将到来

自定义 CSS 和元素样式支持

自定义区块样式支持