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

昨天发布的Gutenberg 11.7是我们最近一段时间以来比较激动人心的版本之一。全局样式系统的迭代继续令人印象深刻。更轻的导航体验使添加链接变得更容易,列块的间距控制实现了我最古老的愿望清单项目之一。网站标志块支持双色调过滤器,使其与其他图像相关的块相媲美。另外,主题作者可以通过他们的theme.json文件设置默认的过滤器。

还有一些其他的变化,如刷新的梯度选取器设计和文章导航块的排版控制,都值得喜欢。工具栏中的块对齐控制现在也显示一个 “无 “选项。这应该使用户更容易从以前的选择中恢复过来。

更轻便的导航体验

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

建立导航菜单一直是区块系统中令人沮丧的体验之一。迭代改进使它变得更好,但添加链接的实际过程一直是一个痛苦的过程,至少在昨天推出的Gutenberg 11.7之前是这样。在以前的区块迭代中,用户必须通过两个步骤来添加任何菜单项。这是我在FSE推广计划第九轮中提出的问题。

这个阶段的测试要求添加多个页面链接,作为顶层和子菜单项目。当点击 “+”按钮来添加链接时,我的第一直觉是搜索页面本身。然而,可用的字段是块状搜索,而不是页面搜索。

在最新版本的插件中,点击 “+”图标,用户可以直接搜索或输入一个URL。不需要弄清楚先插入哪个块(例如,页面、文章、自定义等)。这一变化是正在进行的努力的一部分,以创造一个更轻的导航体验。虽然添加链接的体验要好得多,但我最初无法弄清如何在不输入完整URL的情况下添加一个简单的主页链接。输入 “home”、”index “或一个简单的”/”字符都失败了。

在意识到之前的搜索不起作用后,我尝试了其他已知的网站页面。文章、页面、类别和标签都没有问题。然而,我无法通过搜索字段调出作者/用户档案的URL。有一个地方可以添加主页链接,那就是通过点击工具栏上的图标,将菜单项转换为主页链接块。其他块也可用于这一转换过程,如社会图标、网站标志等。

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

总的来说,这对导航块的用户体验是一个非常需要的改进。在决定如何实现一项功能时,它可能更接近于达到80/20规则。

从链接插入器创建新页面

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

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

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

关注间隔

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

用户现在可以通过新的块间距选项完全控制列之间的间隙。我知道这将会最终发生。自块状编辑器发布以来,花了三年时间才真正实现,这是很痛苦的。当我把这个问题加入我的愿望清单时,我仍然是一个全职的主题和插件开发人员。诚然,当时CSS Flexbox对间隙的支持并不普遍,但在此期间,我们仍然可以用老式的边距来管理。

我只是很高兴这个期待已久的功能终于落地了。现在,我可以开始逐步淘汰我用来复制它的自定义块样式了。该功能是在Gutenberg 11.4首次推出的区块间隙功能的基础上进行的。如果主题作者编写了控制列间间距的自定义代码,他们可能需要进行调整。

全局风格和调色板

目前正在推动改进即将到来的全局样式功能,该功能可能在今年晚些时候登陆WordPress 5.9。Gutenberg的贡献者们在改善体验方面取得了巨大的进步,在插件的11.6版本中对其导航进行了大修。

这个版本中最引人注目的界面变化是新的调色板部分。

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

调色板不再被放在颜色选项的下面,而是放在了前面和中心。这是一个最终将使用户能够定制他们的网站的功能。将重点放在用户界面的这一部分的决定是值得欢迎的。

打开调色板部分后,用户可以编辑主题定义的颜色,或点击 “+”图标来创建新的颜色。这些颜色都将作为选项显示在块和网站编辑器中。

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

用户还应该在全局样式侧边栏的根层看到布局部分。他们现在可以调整整个网站的padding。在试图调整根层的排版时,我仍然遇到了一个错误。这是我在Gutenberg 11.6中首次注意到的问题。

我希望全局样式面板中的块部分能显示单个块的图标。有了几十个块,就很难扫过列表。

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

另一项改进,特别是如果我们放弃图标,将是按字母顺序排列列表。

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容