Gutenberg 8.3 更新块类别,包括父块选择器,并添加新的设计控件

已发表: 2020-06-13

昨天,古腾堡团队发布了块编辑器背后正在进行的插件的 8.3 版。 虽然团队的大部分重点是即将到来的全站点编辑,但此更新包括几个面向用户的功能,例如重新组织的一组块类别、父块选择器、间距控件和链接颜色选项。

一项较小的增强功能包括按作者过滤最新帖子块的能力。 标题块的级别控制也发生了变化。 级别选择器现在位于编辑器工具栏中,而不是在块选项侧栏中选择级别。

在 Gutenberg 8.2 中,在图像块的标题字段中按Enter键会创建一个新段落。 在 8.3 中,该功能已扩展到所有带字幕的块。

该团队在最新版本中纠正了 20 多个错误修复。 总体而言,使用一天后,新插件更新似乎很稳定。 但是,一些实验性添加,例如新的填充控制,可能值得关注。 主题作者需要开始对此进行测试,提供反馈,并确保开发朝着正确的方向发展。

新块类别

Gutenberg 块插入器的屏幕截图。
块插入器中的新“设计”类别。

Gutenberg 团队已重命名并重新组织了区块类别。 新列表似乎更有意义,并且可以更好地合并到适当的组中:

  • 文本
  • 媒体
  • 设计
  • 小部件
  • 嵌入

虽然我是新类别名称的粉丝,但我发现这些类别在这一点上对于任何实际目的都毫无用处。 自从 Gutenberg 在块插入器中放弃选项卡式界面以来,它就感觉就像一堵巨大的块墙。 当我滚动并滚动并滚动可用块列表以找到我需要的特定块时,我的眼睛自然会跳过类别名称。 我几乎总是使用键盘斜线命令来插入块。 在我不这样做的情况下,这不是理想的用户体验,而且新类别也没有多大帮助。

选择父块

将鼠标悬停在编辑器工具栏上以找到父块选择器。
将鼠标悬停在工具栏上以查找父块选择器。

Gutenberg 中更令人沮丧的经历之一是尝试在嵌套块场景中选择父块。 很多时候,用户感觉他们在随意点击,希望他们能到达最佳位置,在那里他们可以实际导航到他们需要编辑的块。 这是在最好的时刻进行挫折的练习。

古腾堡团队朝着减轻这种痛苦迈出了一步——一小步。 将鼠标悬停在编辑器工具栏中的“更改块类型或样式”按钮上时,会出现一个新按钮以选择父块。

我不确定这是否是处理问题的正确方法。 我想看看一些没有悬停的箭头按钮的实验。 目前,我对团队正在尝试解决该问题感到满意,并希望未来的迭代改进嵌套块内的导航。

启用顶部工具栏模式后,此功能似乎不起作用。 对于使用此模式的用户,选择父块的最佳方式是通过编辑器底部的面包屑导航。

实验间距/填充控制

对 Cover 块使用新的填充控件。
向 Cover 块添加自定义填充。

主题作者现在可以通过add_theme_support( 'experimental-custom-spacing' )添加对实验性填充控件的支持。 如果支持,最终用户将在 Cover 块的块选项侧边栏下看到一个新的 Spacing 选项卡,将来应该可用于其他块。 默认情况下,用户可以使用单个值控制块的所有四个边的填充。 他们还可以“取消链接”填充并分别控制顶部、底部、左侧和右侧的值。

据推测,古腾堡团队将扩展此间距功能以包括边距控制。 这将是一个自然的举动,我希望这会导致用户在过去几年中不得不忍受的 Spacer 块的消亡。

但是,我不赞成允许最终用户使用显式值控制填充。 随意更改填充值会破坏许多主题作者花时间精心计算的垂直节奏。 使用像素值(默认值)时,用户肯定会遇到平板电脑和手机屏幕尺寸的问题。 从本质上讲,它会造成完全混乱的间距。

我不反对这个想法。 我希望它在它登陆 WordPress 之前完成。 主题作者应该能够注册通过样式表处理的命名类。 这可以追溯到 WordPress 具有设计框架的想法。 为间距创建一组实用程序类(哦,你好,Tailwind)。 让主题作者根据他们的设计定义间距。 让用户从中选择。 然后,为用户想要自己处理问题的时间提供自定义选项。 那时,他们已经明确决定脱离主题作者选择的设计流程。

链接颜色

在块编辑器中选择链接颜色。
选择自定义链接颜色。

在为块编辑器设计样式时,主题作者必须面对的更难的障碍之一是弄清楚当用户更改块的背景颜色时如何处理链接颜色。 在这种情况下,用户长期以来一直可以控制文本颜色。 但是,链接颜色可能很快变得无法访问或简直丑陋。 有远见的主题作者会设置这些链接颜色的样式,以便它们继承文本颜色,但这并不总是理想的解决方案。

这就是用户控制的链接颜色的用武之地。要添加对自定义链接颜色的支持,主题作者必须通过add_theme_support( 'experimental-link-color' )选择加入该功能。 这将为段落、标题、组、列以及媒体和文本块添加新的颜色选择器。

无法使此功能与主题支持函数调用一起使用,我不得不深入研究代码以找到问题。 为了让主题作者添加对链接颜色的支持,他们还应该定义其默认链接,如以下 CSS 代码片段所示:

 a { color: var( --wp--style--color--link, #000 ); }

WordPress 会自动设置--wp--style--color--link变量。 为了进一步明确,主题作者还可以针对.has-link-color a