在 WordPress 6.6 中使用区块样式变体为区块、嵌套元素等添加样式

查看官方原文 ↗ 发布于 2024年6月21日

WordPress 6.6 预计于 2024 年 7 月 16 日发布，这将是长期以来对区块样式变体（简称区块样式）最大的一次革新。这些变化将使区块样式成为主题开发者工具箱中最强大的工具之一。

随着 6.6 开发周期在未来几周内结束，你可能会经常看到这些变化被称为“区块样式”。虽然这是更新后功能集的一部分（我将在本文后面深入探讨），但这并不能准确反映此版本对主题作者的重要性。

我已经从我的主题中删除了数百行自定义 CSS 代码，将其转移到了标准的 theme.json 文件中。能够将大部分与样式相关的代码置于一个标准化的系统之下，其重要性不言而喻。

除此之外，新的嵌套功能解决了我自己在主题工作中不得不采用的几种变通方案（我也会谈到这些）。

让我们直接深入了解区块样式变体系统的更新。

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

2023 年，WordPress 6.3 引入了通过 theme.json 编辑核心注册的区块样式变体的能力。这是一个很好的第一步，但对于主题体验来说，这并不是一个特别令人兴奋的升级，因为区块样式变体的力量在于你自己创建的那些。实际上，这意味着大多数用例都需要自定义 CSS。

WordPress 6.6 将允许你在 theme.json 中为任何已注册的区块样式变体设置样式。就像处理核心变体一样，你可以通过 styles.blocks.blockName.variations 属性来定位你的自定义变体。

我不想过分贬低其他更新，但仅此一项改变就能让你最大程度地减少自定义 CSS 的使用。

让我们试一试。在下面的截图中，你会看到我为 Pullquote 块设计了一个 Boxed 样式变体：

WordPress 文章编辑器，显示演示文本和一个带有宽黑色边框的 Pullquote。

正如你一直所做的那样，你需要通过PHP 或 JavaScript 注册自定义区块样式变体。在本例中，你将使用 PHP 方法，因此首先在你的主题的 functions.php 文件中添加一个挂接到 init 的注册回调函数：

add_action( 'init', 'themeslug_register_block_styles' );

function themeslug_register_block_styles() {
	// 在此处添加对 register_block_style() 的调用。
}

在本教程的其余部分，你将使用此函数来注册自定义变体。

现在，在你的 themeslug_register_block_styles() 函数中添加以下代码以注册 Boxed 区块样式变体：

register_block_style( 'core/pullquote', [
	'name'  => 'boxed',
	'label' => __( 'Boxed', 'themeslug' )
] );

过去，你可能使用过 register_block_style() 的 inline_style 属性，或者以其他方式（例如区块样式表）输出一些自定义 CSS。但现在你可以注册样式变体，并将实际的样式代码移到你的 theme.json 文件中。

对于 Boxed 变体，我们只使用边框和间距样式（请随意进一步自定义以匹配你的主题）。将以下代码集成到你的 theme.json 文件中：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"styles": {
		"blocks": {
		"core/pullquote": {
				"variations": {
					"boxed": {
						"border": {
							"color": "currentColor",
							"style": "solid",
							"width": "6px"
						},
						"spacing": {
							"padding": {
								"top": "var:preset|spacing|60",
								"bottom": "var:preset|spacing|60",
								"left": "var:preset|spacing|60",
								"right": "var:preset|spacing|60"
							}
						}
					}
				}
			}
		}
	}
}

请注意，变体的代码直接放在 styles.blocks.core/pullquote.variations.boxed 下。你可以在每个区块的 variations 属性下包含多个变体。

本教程中及以上的 JSON 使用了新的版本 3 theme.json 模式，该模式仅支持 WordPress 6.6+ 或在旧版 WordPress 中使用 Gutenberg 插件时。

为嵌套元素和区块添加样式

能够将区块样式变体添加到 theme.json 本身就解决了很多问题，主要是围绕标准化。但 WordPress 6.6 还将此提升了一个档次，允许你为自定义变体内部的嵌套元素和区块设置样式。这将打开一个近乎无限的画布，让你可以通过 theme.json 进行绘制。

让我们通过 Post Terms（Categories）区块上的一个区块样式变体来看看这是如何工作的。如下面的截图所示，你会看到该区块具有 Buttons 区块样式，并且各个分类链接看起来像按钮：

WordPress 编辑器显示网格中的 Query Loop 区块。单个文章具有特色背景图像。覆盖其上的是文章分类列表，其中的链接看起来像按钮。

现在可以使用 theme.json 实现此设计，因为你可以定位 Post Terms 块内嵌套的链接元素。

要测试此变体，请在 functions.php 中的 themeslug_register_block_styles() 函数内添加以下代码：

register_block_style( 'core/post-terms', [
	'name'  => 'buttons',
	'label' => __( 'Buttons', 'themeslug' )
] );

就像上一节一样，你将在 theme.json 中定位要添加变体的区块的 variations.variationName 属性。但是，要为嵌套元素设置样式，你需要深入几层并定位 elements.elementName。

将以下代码集成到你的主题的 theme.json 文件中：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"styles": {
		"blocks": {
			"core/post-terms": {
				"variations": {
					"buttons": {
						"elements": {
							"link": {
								"color": {
									"background": "var:preset|color|contrast",
									"text": "var:preset|color|base"
								},
								"spacing": {
									"padding": {
										"top": "var:preset|spacing|20",
										"bottom": "var:preset|spacing|20",
										"left": "var:preset|spacing|40",
										"right": "var:preset|spacing|40"
									}
								},
								"typography": {
									"textDecoration": "none"
								}
							}
						},
						"css": "& .wp-block-post-terms__separator { display: none; }"
					}
				}
			}
		}
	}
}

如上所示，代码专门针对 buttons 变体的 elements.link。你还可以通过此变体的 blocks.blockName 属性自定义嵌套区块（假设它支持嵌套区块）。

你可能已经注意到代码中包含了变体的 css 属性。是的，你可以在 theme.json 中为区块样式变体添加自定义 CSS！ 在本例中，它用于隐藏文章分类之间的分隔符，针对此特定变体。

区块样式与新的注册方法

“区块样式”指的是 WordPress 6.6 中引入的一个概念。本质上，一个区块就是一个区块样式变体，以及你可以通过 theme.json 系统自定义的任何嵌套元素和区块。

等等……这不就是上面刚刚讲过的内容吗？ 大部分是的。

但是，导致区块样式出现的基础概念在区块样式变体系统中开启了一些新功能：

你可以通过以下方式为这些变体注册新的 theme.json 对象：
- 自定义的 /styles/*.json 文件。
- register_block_style() PHP 函数。
你可以一次为多个区块注册它们（例如，Group、Columns 等）。

虽然新的术语听起来像是旧功能的新营销说辞，但它确实有非常实际的好处。但归根结底，它只是对当前区块样式变体可能性的扩展。

区块样式的主要目标是将其用于实际需要与主要 theme.json 样式不同设计的区块。想象一下，如果你想为不同的区块快速切换颜色集，如本截图所示：

WordPress 页面显示两个内容区块。第一个有深绿色背景、白色文本和图像。第二个显示浅灰色背景、深色文本和一个 pullquote。

使用区块检查器（侧边栏）中的设计工具很容易做到这一点，但当设计发生变化时，很难在整个站点上进行更新。这就是区块样式变体的优势所在。

当你将此与嵌套元素和区块设计相结合时，你基本上可以为特定区块创建完整的 theme.json 样式集。例如，你甚至可以为这些区块中使用的 Heading、Paragraph、Image 和 Blockquote 块创建区块特定的（嵌套）样式，使它们更加独特。

例如，在为客户端站点创建标准化、可更新的设计系统时，这可能会派上用场。

注册区块/区块样式变体

如前所述，有两种注册区块样式的方法。主要方法是在主题的 /styles 文件夹下创建一个新的 JSON 文件。这样，你可以将它们作为单独的实体进行管理。但请继续阅读以了解每种方法的工作原理。

通过 JSON 文件注册

过去，你只能将全局样式变体 JSON 文件添加到主题的 /styles 文件夹中，但这在 WordPress 6.6 中正在改变。你现在可以将全局、区块、颜色和排版变体添加到此文件夹中。

为了不混淆不同类型的样式变体，我建议使用类似以下的结构来组织你的 /styles 文件夹（WordPress 会自动在子文件夹中查找）：

/styles
- /block 或 /section
- /color
- /global
- /typography

颜色和排版样式变体是 WordPress 6.6 即将推出的新功能。它们将在开发者博客上介绍，但不在本文讨论范围之内。

考虑到这个组织系统，创建一个新的 /styles/block/section-1.json 文件，并将以下代码放入该文件：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"slug": "section-1",
	"title": "Section 1",
	"blockTypes": [ "core/group", "core/columns" ],
	"styles": {
		"color": {
			"background": "var:preset|color|contrast",
			"text": "var:preset|color|base"
		}
	}
}

这将创建上面截图中的“Section 1”区块样式变体（颜色可能因你的主题而异）。

你还应注意 JSON 中定义的几个关键属性：

slug： 你的区块的唯一标识符，可以包含字母数字字符、连字符或下划线。
title： 你的区块的标题，将显示给屏幕阅读器。如果未提供 slug，则用于自动注册你的变体（例如，Section 1 变为 section-1）。
blockTypes： 此样式变体应应用到的区块类型数组（你不再局限于单一区块类型）。

这个区块样式是一个过于简单的演示示例。可以将其扩展为包含 WordPress 支持的每个元素和区块的样式，当它们在此区块内使用时为其设置样式。因此，这类变体可能最适合用于容器类型的区块，例如 Group、Columns 和 Cover。

现在在你的主题中添加一个 /styles/block/section-2.json 文件来制作 Section 2 区块样式变体。你可以使用以下代码，但可以根据你的喜好调整颜色：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"slug": "section-2",
	"title": "Section 2",
	"blockTypes": [ "core/group", "core/columns" ],
	"styles": {
		"color": {
			"background": "#cbd5e1",
			"text": "var:preset|color|contrast"
		}
	}
}

通过 PHP 注册

注册区块样式（或任何区块样式变体）的第三种选择是使用 PHP。register_block_style() 函数有两个主要变化使之成为可能：

第一个参数 $block_name 现在接受区块类型数组（你仍然可以传递字符串表示单个区块类型）。
第二个参数 $style_properties 有一个新的 style_data 键，它接受一个数据数组，其格式应与其 JSON 对应物类似。

要通过 PHP 而不是 JSON 注册 Section 1 区块样式变体，请在 functions.php 中的 themeslug_register_block_styles() 函数内添加以下代码：

register_block_style(
	[ 'core/group', 'core/columns' ],
	[
		'name'       => 'section-1',
		'label'      => __( 'Section 1', 'themeslug' ),
		'style_data' => [
			'color' => [
				'background' => 'var:preset|color|contrast',
				'text'       => 'var:preset|color|base'
			]
		]
	]
);

当然，你可以为 Section 2 和你构建的其他自定义变体重复此过程。

通过全局样式变体重写

最初，可以通过 theme.json 或自定义全局样式变体 JSON 文件注册区块样式变体。然而，根据正在进行的讨论，使用此方法注册在 Gutenberg 18.7 中被移除，并且在 WordPress trunk 中也被移除。

此方法仍可通过全局样式变体 JSON 文件重写区块样式。但是，根据讨论结果，这在 WordPress 6.7 及以后版本中可能会发生变化。请关注该工单以保持更新。

WordPress 6.6 还添加了一个新的 styles.variations 属性（此属性以前是 styles.blocks.variations），用于在全局样式变体中重写区块样式。

这里的区别主要在于与区块样式变体 JSON 文件相比的格式。你必须将变体标识符（例如 section-1）作为键传递，并将变体的样式作为 variations 属性下的值。看看你之前注册的同一个 Section 1 变体，当通过全局样式变体 JSON 文件重写它时：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"styles": {
		"variations": {
			"section-1": {
				"color": {
					"background": "#22737c",
					"text": "#ffffff"
				}
			}
		}
	}
}

具有嵌套区块自定义功能的区块样式

现在，让我们看一个我在主题中使用的更实际的区块样式示例。它自定义了嵌套区块。

云策 WordPress 开发者社区

社区新闻

在 WordPress 6.6 中使用区块样式变体为区块、嵌套元素等添加样式

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

为嵌套元素和区块添加样式

区块样式与新的注册方法

注册区块/区块样式变体

通过 JSON 文件注册

通过 PHP 注册

通过全局样式变体重写

具有嵌套区块自定义功能的区块样式