Gutenberg 11.7 迭代全局样式，改进添加导航链接，并添加列间距

技术教程 2021年11月6日

1212 0 5

昨天发布，Gutenberg 11.7 是我们一段时间以来最激动人心的版本之一.全局样式系统迭代继续给人留下深刻印象.轻量级的导航体验让添加链接变得更容易，并且 Columns 块的间距控制提供了我最古老的愿望清单项目之一.

站点徽标块支持双色调过滤器，使其与其他图像相关块相媲美.另外，主题作者可以通过他们的 theme.json 文件设置默认过滤器.

love 还有其他一些变化，例如更新的渐变选择器设计和帖子导航块的排版控件.工具栏中的块对齐控件现在也显示"无".选项.这应该会让用户更容易从之前的选择中恢复.

更轻的导航体验

构建导航菜单一直是块系统中令人沮丧的体验之一.迭代改进使它变得更好，但添加链接的实际过程一直是痛苦的，至少在昨天推出 Gutenberg 11.7 之前是这样.

在该块的先前迭代中，用户必须经过两步过程才能添加任何菜单项.这是我在 FSE 外展计划第 9 轮中提到的一个问题:

此测试阶段要求添加多个页面链接作为顶级和子菜单项.当单击 + 按钮添加链接时，我的第一反应是搜索页面本身.但是，可用字段是块搜索而不是页面搜索.

在最新版本的插件中，点击+图标允许用户直接搜索或输入网址.无需弄清楚要先插入哪个块(例如，Page、Post、Custom 等).这一变化是为了打造更轻松的导航体验而不断努力的一部分.

虽然添加链接的体验要好得多，但我最初无法弄清楚如何在不输入完整 URL 的情况下添加简单的主页链接.打字"家"， "索引"，或简单的"/"字符全部失败.

在意识到之前的搜索无效后，我尝试了其他已知的网站页面.帖子、页面、类别和标签都可以正常工作.但是，我无法通过搜索字段提取作者/用户存档 URL.

有一个地方可以添加主页链接，那就是通过单击工具栏中的图标将菜单项转换为主页链接块.其他块也可用于此转换过程，例如社交图标、站点徽标等.

总的来说，这是对导航块用户体验的急需改进.在决定如何实现某个功能时，它可能更接近于达到 80/20 规则.

从链接插入器创建新页面

添加链接的用户体验一直是今年区块编辑器的亮点之一.6 月，Gutenberg 10.9 引入了丰富的 URL 预览，并登陆 WordPress 5.8.在最新版本的插件中，开发人员将其提升了一个档次.

用户现在可以在添加链接时直接创建新页面.以前，用户只能在导航块内添加项目时才能实现这一壮举.现在，它可用于添加到任何地方的链接.

注意差距

用户现在可以通过新的块间距选项完全控制列之间的间隙.我知道它要来了—最终.自块编辑器发布以来，它花了三年时间才真正发生，这让我很痛苦.当我将它添加到我的愿望清单时，我仍然是一名全职主题和插件开发人员.诚然，CSS flexbox 对 gap 的支持在当时并不普遍，但在此期间我们仍然可以使用老式的边距进行管理.

我很高兴期待已久的功能终于登陆.现在，我可以开始逐步淘汰我用来复制它的自定义块样式.

该功能在 Gutenberg 11.4 首次附带的块间隙功能之上运行.如果主题作者编写了用于控制列间距的自定义代码，则可能需要进行调整.