古腾堡14.9 于2023年1月4日启动，该版本具有长期以来的设计工具，主题作者缺少了： 阴影。该功能的第一次迭代最终应降落在WordPress 6.2中，使设计人员可以创建一组自定义阴影，以应用于块和支持的元素。
这 盒子阴影组件 和 UI工具 目前仍在开发中，因此用户还不能通过WordPress管理员选择或自定义阴影。因此，这是一个仅代码的功能，直到其他作品降落为止。但是，主题作者可以开始测试阴影并通过theme.json。
阴影功能与主题作者可以定义的其他预设相似。注册时，它们成为自定义CSS属性，并在网站的<head>。阴影的属性名称也遵循与其他预设相同的方案：--wp--preset--shadow--{$slug}。
注册自定义阴影
您可以通过settings.shadow.presets阵列进theme.json（注意presets被命名palette在Gutenberg插件版本中，早于15.1）。数组中的每个项目必须是具有以下属性的对象：
- 姓名： 阴影的人类可读名称
- slug： 一个独特的sl，将用于引用阴影
- 阴影： 有效的CSS值
box-shadow财产
现在，尝试在您的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 )"
}
]
}
}
}
以前的代码添加了三个不同的阴影：
- 小的
- 中等的
- 大的
以下屏幕截图显示了如何将这些阴影应用于图像块：
现在，选择要应用默认阴影的块或元素。然后，选择要使用的自定义阴影之一。
以下代码示例，将“大”阴影大小添加到图像块：
{
"version": 2,
"styles": {
"blocks": {
"core/image": {
"shadow": "var( --wp--preset--shadow--lg )"
}
}
}
}保存后，网站上的所有图像块都应在此阴影中出现，如以下屏幕截图所示：
请记住，用户尚无能力在块或全球级别上覆盖这些功能，至少没有通过UI覆盖。但是，他们应该能够在将来这样做。
使用核心阴影
默认情况下，Gutenberg插件当前添加两个带有slugs的自定义阴影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}多变的。
为此，请定义自定义的“主要”颜色（或选择您喜欢的名称）。然后，通过自定义阴影在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中的内置设计工具进一步降低其样式表尺寸。
道具 @Mburridge 和 @WebCommsat 用于反馈和审查。