投影是用于各种内容及内容组合的优秀设计元素。自 WordPress 6.2 起，主题开发者已能使用此功能，并且开发者博客上有一篇关于为主题添加阴影支持的教程。

随着 WordPress 6.5 的发布，内容创作者和无代码网站构建者也可以欢欣鼓舞，因为他们现在也能为区块应用阴影了。目前，此功能已在四个区块中启用：按钮、图像、栏目和栏。

此第一个版本为投影提供了五个选项。没有颜色、角度、扩展或更多模糊设置可用。

如何使用阴影控件

你可以在区块侧边栏“样式”选项卡的底部找到边框与阴影控件。

带投影的按钮

下面，你看到一个图像和一个引用，采用两栏布局，两者都应用了投影。

theme.json 中的阴影

主题开发者可以通过 theme.json 为阴影设置添加自定义预设，并且不受核心提供的五种样式的限制。

"settings": {
        "shadow": { 
            "presets": [ 
                { 
                    "name": "Red Shadow", 
                    "shadow": "0px 5px 5px 0px red", 
                    "slug": "red-shadow" 
                },
                {
                    "name": "Purple Shadow",
                    "shadow": "0px 5px 5px 0px purple",
                    "slug": "purple-shadow"
                }
            ]
        },

阴影预设将与核心预设一起显示在投影用户界面中。请看我上面添加的红色和紫色变体 🙂

关于如何为主题添加盒阴影支持的更多细节，请参阅开发者博客文章：为主题使用盒阴影功能。

移除核心预设

与 WordPress 中的其他一切一样，有些人想知道如何移除核心预设，无论是单独移除还是整体移除。你只需要在 theme.json 文件中添加一行。

"shadow": {
      "defaultPresets": false,
        }

当然，也可以通过代码片段过滤默认的 theme.json，你可以将其放在主题的 functions.php 中：

add_filter( 'wp_theme_json_data_default', 'themeslug_theme_json_data_default' );

function themeslug_theme_json_data_default( $theme_json ) {
       $data = [
               'version'  => 2,
               'settings' => [
                      'shadow' => [
                              'presets' => []
                      ]
               ]
      ];
      return $theme_json->update_with( $data );
}

自定义区块的阴影

区块开发者可以通过在其区块的 block.json 中添加 “shadow”: true 来为其区块启用阴影支持。

{
 "supports": {
       "shadow": true,
        }
}

这一行代码即可在边框与阴影部分下启用盒阴影的用户控件。

特色图像的投影

随着计划于 2024 年 3 月 27 日发布的 Gutenberg 插件 18.0 版本，你也将能够为模板中的特色图像应用盒阴影，并启用一些出色的类似 3D 的效果。

在归档模板上

在单篇文章或页面模板上

阴影支持的下一步是什么？

当前的实现是第一个迭代。贡献者正在努力将此功能扩展到封面和群组区块。设计团队也探索了编辑器中更扩展的功能集可能是什么样子。

截图显示了颜色、x 和 y 轴偏移、扩展和模糊控件。

阴影：添加为区块设置自定义阴影的用户界面工具是草案 PR。

这就是区块编辑器投影支持的当前阶段。