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

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

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

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

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

新块类别

新的"设计"块插入器中的类别.

古腾堡团队重新命名并重组了方块类别.新列表似乎更有意义,并且可以更好地合并到适当的组中:

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

虽然我很喜欢新的类别名称,但我发现目前这些类别对于任何实际目的都毫无用处.自从古腾堡在块插入器中丢弃选项卡式界面以来,感觉就像一堵大块墙.当我滚动和滚动可用块列表以找到我需要的特定块时,我的眼睛自然会跳过类别名称.我几乎总是使用键盘斜线命令来插入块.在我不知道的情况下,这不是理想的用户体验,新类别也没有多大帮助.

选择父区块

将鼠标悬停在工具栏上以查找父块选择器.

Gutenberg 中更令人沮丧的经历之一是尝试在嵌套块场景中选择父块.很多时候,用户觉得他们是在随意点击,希望他们能够找到他们可以真正导航到他们需要编辑的块的最佳位置.这是在最好的时刻挫败感的练习.

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

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

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

实验性间距/填充控制

向 Cover 块添加自定义填充.

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

据推测,Gutenberg 团队将扩展此间距功能以包含边距控制.这将是自然而然的举动,我希望这会导致过去几年用户不得不忍受的 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.

7

发表回复