为主题使用盒阴影功能
Gutenberg 14.9 于 2023 年 1 月 4 日发布，此版本包含了一个主题作者期待已久的设计工具：阴影。该功能的第一个迭代版本最终将随 WordPress 6.2 发布，允许设计者创建一组自定义阴影以应用于区块和支持的元素。
目前，盒阴影组件和UI 工具仍在开发中，因此用户尚无法通过 WordPress 管理后台选择或自定义阴影。这意味着在相关功能完善之前，这暂时是一个仅限代码的功能。不过，主题作者可以开始通过 theme.json 测试和应用阴影。
阴影功能的工作方式类似于主题作者可以定义的其他预设。注册后，它们会成为自定义 CSS 属性并内联到网站的 <head> 中。阴影的属性命名也遵循与其他预设相同的方案：--wp--preset--shadow--{$slug}。
注册自定义阴影
你可以通过 theme.json 中的 settings.shadow.presets 数组添加自定义阴影（注意：在早于 15.1 版本的 Gutenberg 插件中，presets 曾命名为 palette）。数组中的每个项目必须是一个包含以下属性的对象：
- name: 阴影的可读名称
- slug: 用于引用阴影的唯一别名
- shadow:
box-shadow属性的有效 CSS 值
现在，尝试在你的 theme.json 文件中添加一些自定义阴影，如下面的代码片段所示：
{
"version": 2,
"settings": {
"shadow": {
"presets": [
{
"name": "Small",
"slug": "sm",
"shadow": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
},
{
"name": "Medium",
"slug": "md",
"shadow": "0 4px 10px 0 rgba( 0, 0, 0, 0.3 )"
},
{
"name": "Large",
"slug": "lg",
"shadow": "0 8px 15px 0 rgba( 0, 0, 0, 0.3 )"
}
]
}
}
}
上面的代码添加了三种不同的阴影：
- Small
- Medium
- Large
下面的截图展示了如何将这些阴影应用到图像区块：
现在，选择你想要应用默认阴影的区块或元素。然后，选择你要使用的自定义阴影之一。
下面的代码示例，将“Large”阴影大小添加到图像区块：
{
"version": 2,
"styles": {
"blocks": {
"core/image": {
"shadow": "var( --wp--preset--shadow--lg )"
}
}
}
}保存后，网站上的所有图像区块都应显示此阴影，如下图所示：
请记住，用户目前还不能在区块或全局级别覆盖这些设置，至少不能通过 UI 界面。不过，他们将来应该能够做到这一点。
使用核心阴影
默认情况下，Gutenberg 插件目前添加了两个自定义阴影，其别名分别为 natural 和 sharp。主题作者也可以通过 theme.json 使用这些阴影来设置区块样式，即使他们没有注册自己的阴影。
以下代码示例展示了如何在图像区块上使用 natural 阴影：
{
"version": 2,
"styles": {
"blocks": {
"core/image": {
"shadow": "var( --wp--preset--shadow--natural )"
}
}
}
}注意： 核心阴影在正式添加到 WordPress 6.2 之前可能会发生变化。
将调色板与阴影集成
随着 theme.json 功能日益强大，主题作者也更容易将一组设计工具与另一组结合使用。通常，使用通过 settings.color.presets 定义的颜色作为阴影颜色是合理的。主题作者可以通过 --wp--preset--color--{$slug} 变量引用这些颜色。
为此，定义一个自定义的“primary”颜色（或选择你喜欢的名称）。然后，在 theme.json 中通过自定义阴影引用它。
以下代码示例创建了一个纯色阴影并将其添加到图像区块：
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#0693e3"
}
]
},
"shadow": {
"presets": [
{
"name": "Primary",
"slug": "primary",
"shadow": "16px 16px var( --wp--preset--color--primary )"
}
]
}
},
"styles": {
"blocks": {
"core/image": {
"shadow": "var( --wp--preset--shadow--primary )"
}
}
}
}图像区块及其阴影应如下图所示：
总的来说，阴影预设应该能让主题作者通过使用 WordPress 内置的设计工具，进一步减少其样式表的大小。