随着 WordPress 6.9 即将发布，是时候来看看我最喜欢的新主题开发者工具之一：边框圆角尺寸预设。

在 Gutenberg 21.5 中添加的这些尺寸预设允许你定义一组尺寸，用户可以将其应用到支持边框圆角的区块上。你也可以在自己的主题样式表和 theme.json 文件中重用它们。

让我们深入了解这个新的设计工具。

定义圆角尺寸预设

与其他预设类似，你可以通过主题中的标准 theme.json 文件来定义边框圆角尺寸。新的属性可以通过 settings.border.radiusSizes 属性来定义。

radiusSizes 是一个尺寸对象数组，每个对象接受三个属性：

• name: 尺寸的人类可读标签。
• slug: 尺寸的机器可读名称，用于为预设生成 CSS 自定义属性（例如，--wp--preset--border-radius--{slug}）。
• size: 尺寸的 CSS 值。

以下是在 theme.json 中定义名为 xs 的尺寸的简单示例：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"border": {
			"radiusSizes": [
				{
					"name": "XS",
					"slug": "xs",
					"size": "0.125rem"
				}
			]
		}
	}
}

了解了定义边框圆角尺寸预设的基础知识后，让我们看看这个新功能有哪些可能性。

定义多个预设

在构建主题时，你很可能希望提供一系列与主题设计相匹配的标准尺寸预设。在本教程中，假设你需要七个尺寸，从 0.125rem 到 1.5rem。

在你的 theme.json 中使用以下代码：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"border": {
			"radius": true,
			"radiusSizes": [
				{
					"name": "XS",
					"slug": "xs",
					"size": "0.125rem"
				},
				{
					"name": "Small",
					"slug": "sm",
					"size": "0.25rem"
				},
				{
					"name": "Medium",
					"slug": "md",
					"size": "0.375rem"
				},
				{
					"name": "Large",
					"slug": "lg",
					"size": "0.5rem"
				},
				{
					"name": "XL",
					"slug": "xl",
					"size": "0.75rem"
				},
				{
					"name": "2XL",
					"slug": "2-xl",
					"size": "1rem"
				},
				{
					"name": "3XL",
					"slug": "3-xl",
					"size": "1.5rem"
				}
			]
		}
	}
}

请注意，代码还将 radius 设置为 true，这会在支持边框圆角的区块的 UI 中启用圆角选择器。

要测试你的新尺寸，请在编辑器中添加一个 Group、Cover 或其他区块，并在侧边栏中查找 样式 → 圆角 面板。尝试移动滑块，看看区块如何响应所选尺寸。

你还可以取消链接每个角，并为每个角定义单独的圆角。例如，以下截图显示为右上角和左下角选择了 3-xl 圆角，但左上角和右下角没有圆角：

定义多个预设时的 UI 差异

需要注意的是，如果你添加超过七个预设，范围滑块将在 UI 中变为选择下拉菜单。

如果你想尝试，请将以下 full 尺寸添加到现有的 radiusSizes 数组中：

{
	"name": "Full",
	"slug": "full",
	"size": "9999em"
}

然后刷新你的编辑器并查看变化：

使用预设为区块设置样式

与所有其他可以通过 theme.json 定义的预设一样，WordPress 会自动将它们作为 CSS 自定义属性输出到 :root 元素上。以下是为之前定义的自定义尺寸生成的 CSS：

:root {
	--wp--preset--border-radius--xs: 0.125rem;
	--wp--preset--border-radius--sm: 0.25rem;
	--wp--preset--border-radius--md: 0.375rem;
	--wp--preset--border-radius--lg: 0.5rem;
	--wp--preset--border-radius--xl: 0.75rem;
	--wp--preset--border-radius--2-xl: 1rem;
	--wp--preset--border-radius--3-xl: 1.5rem;
}

这意味着你可以像使用任何其他 CSS 自定义属性一样使用这些预设，通过 var(--wp--preset--border-radius--{slug}) 访问它们。

假设你希望主题中的 Image 区块默认具有以下设计：

为此，你需要在 theme.json 文件的 styles 属性下将圆角应用到 Image 区块：

{
	"styles": {
		"blocks": {
			"core/image": {
				"border": {
					"radius": {
						"topLeft": "0px",
						"topRight": "var(--wp--preset--border-radius--3-xl)",
						"bottomLeft": "var(--wp--preset--border-radius--3-xl)",
						"bottomRight": "0px"
					}
				}
			}
		}
	}
}

当然，你不仅限于在 theme.json 中使用预设。你可以将它们应用到全局样式变体、区块样式变体，甚至直接在自定义样式表中使用它们。

手绘及其他独特样式

如前所述，尺寸预设应用于区块或元素的各个角。例如，以下是将 3xl 尺寸应用到 Group 区块时的 HTML 输出：

<div class="wp-block-group" style="border-top-left-radius:var(--wp--preset--border-radius--3-xl);border-top-right-radius:var(--wp--preset--border-radius--3-xl);border-bottom-left-radius:var(--wp--preset--border-radius--3-xl);border-bottom-right-radius:var(--wp--preset--border-radius--3-xl)">
...
</div>

这意味着当你注册尺寸预设时，你实际上定义的是可以应用到以下属性的值：

• border-top-left-radius
• border-top-right-radius
• border-bottom-left-radius
• border-bottom-right-radius

例如，我非常想定义一个像这样的“手绘”尺寸：

{
	"name": "Hand Drawn",
	"slug": "hand-drawn",
	"size": "255px 15px 225px 15px/15px 225px 15px 255px"
}

我希望能允许用户选择一个边框圆角并快速获得这个结果：

这样的预设不起作用，因为该值仅对 border-radius 简写有效。请记住，尺寸必须对各个角有效。

相反，我必须定义两个独立的预设，以便在各个角上单独使用。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"border": {
			"radius": true,
			"radiusSizes": [
				{
					"name": "Drawn 1",
					"slug": "drawn-1",
					"size": "15px 255px"
				},
				{
					"name": "Drawn 2",
					"slug": "drawn-2",
					"size": "255px 15px"
				}
			]
		}
	}
}

双值语法（水平轴和垂直轴）是一个有效的值，因此你绝对可以使用它来实现一些令人印象深刻的设计。

缺点是用户必须取消链接边框圆角控件，并为区块的每个角定义圆角才能获得该精确设计：

好处是他们可以尝试你注册的圆角尺寸预设的各种巧妙组合。

当然，你也可以通过添加一个“手绘”区块样式变体来自动应用这些圆角，从而让他们更容易操作。

值得注意的限制

在为本文测试此功能时，我遇到了两个值得注意的限制。对于大多数用例来说，它们不是障碍，但在定义你自己的边框圆角尺寸时，值得了解它们。

并非所有有效的 CSS 值都被允许

我尝试为 full 尺寸使用 calc(infinity * 1px)，但它在 UI 中不起作用。每当选择它时，它会应用正确的预设，但 UI 中显示选择的是 默认 选项。

经过进一步测试，我尝试使用 var() 和 clamp() 值，它们也失效了。据我所知，此功能仅限于不包含 ( 或 ) 字符的值，但这需要进一步调查。

无法禁用自定义圆角尺寸

边框圆角预设是一个很好的开始，但目前还没有方法可以禁用自定义尺寸的 UI。通常，其他设计工具会允许你通过 customSettingName 属性来禁用自定义值。

你可以在 theme.json 中将 settings.border.radius 设置为 false。这将禁用预设和自定义尺寸出现在 UI 中。

Gutenberg 仓库中有一个开放工单讨论了这个问题以及之前的限制。