Gutenberg 9.8 为组块带来圆角边框并将站点编辑器画布移动到内联框架中

Gutenberg 9.8 于昨天发布,其中对 UI 进行了一些小的改进.开发团队为主题作者可以选择的 Group 块添加了边界半径支持的初始实现.他们还将站点编辑器移到 iframe 元素中,以消除全局管理样式中的 CSS 冲突.

那些一直在测试 Full Site Editing 的人应该很高兴,他们将不再需要为模板和模板部件创建看似永无止境的自动草稿.摆脱困境.从长远来看,它们不可避免地会导致用户混淆.这一变化花费了大约一个月的讨论和工作,但从长远来看,它使一个复杂而脆弱的过程变成了一个更稳定的系统.

虽然之前的插件版本只修复了几个错误,但 9.8 版本又跳回到了两打以上.至少没有那么多的古腾堡更新让人感觉不对.

小的用户界面改进

插件的最新版本改进了使用 Spacer 块时的 UI.当用户过去选择该块时,它显示为一个浅灰色矩形.现在,它是半透明的.这允许显示背景中的任何内容,例如带有背景图像的 Cover 块.此更改应可帮助用户在需要查看背景时更轻松地调整大小.

选择时的半透明间隔块.

虽然我希望 Spacer 块最终会缓慢而痛苦地死去,因为它被更合适的边距和填充块选项所取代,但此更改在此期间确实有所帮助.

在 Gutenberg 9.7 中 UI 改进的后续行动中,块变化的工作仍在继续.变体是指使用一个块作为基础来创建同一块的多个变体.最常见的例子是嵌入块,它有 YouTube、Vimeo 和其他变体.在 9.7 之前,这些变体在块检查器和导航中共享相同的通用图标、名称和描述,而不是特定于变体的信息.

Gutenberg 9.8 基于在有意义的地方使用变异数据的趋势.编辑器工具栏中的块切换器(变换)按钮现在显示变体的图标.

块切换器中使用的变化图标.

这是一个很小的变化,但它表明开发团队继续致力于完善编辑器界面.

在 iframe 中加载站点编辑器画布

Gutenberg 9.8 将站点编辑器的画布区域分成 iframe.这种分离意味着全局管理样式不会渗入或覆盖编辑器本身的样式.好消息是,这也是在帖子编辑器中实现相同功能的第一步.

这是自区块编辑器诞生以来我一直在等待的变化.从主题开发和设计的角度来看,编辑器样式与前端相匹配的问题已经成熟.这意味着在不需要时嵌套 CSS 选择器.这意味着添加一些 !important 规则来覆盖核心 CSS 中看起来很奇怪的东西.尽管在过去几年中,块编辑器的样式有了突飞猛进的改进,但它仍然常常令人痛苦.

WordPress 核心提交者 Ella van Durpe 列出了将画布移入 iframe 的好处:

  • 根本不会有管理员 CSS 流血.这是我们从一开始就一直在努力解决的问题.
  • 不需要模拟媒体查询,这在技术上可以说比使用 iframe 更困难.
  • 相对单位像 (r)emvw/vh 就可以了.
  • 对于一个完整的站点,主题样式表可以直接放在编辑器中,无需任何调整.我认为这很重要,因为它使主题作者的生活变得更加轻松.
  • 每个窗口可以有一个选择,因此一个在管理中,一个在内容中.这对于例如很有用链接 UI,其中可以保留内容中的选择,同时选择也位于输入元素中(对于 URL).也许在其他情况下有用.

虽然我很难相信主题样式表会毫无障碍地工作 — 这样的世界存在吗? –,他们应该比过去工作得更好.主题作者可能需要处理一些项目,但它们应该是最少的.开发者应该密切关注这个未来的发展.

组块的边界半径支持

作为 Gutenberg 实验性功能集的一部分,Group 块现在支持边界半径选项.但是,最终用户不会在块检查器中自动看到它.这是目前主题的可选功能.据推测,它将成为未来几个区块的默认选项集的一部分.

为 Group 块设置边界半径值.

对于想要添加支持的主题作者,他们需要将以下代码片段放入他们的 experimental-theme.json 文件中并编辑 radius 值:

"core/group" : {
        "styles" : {
                "border" : {
                        "radius" : "50px"
                }
        }
}

这将允许主题作者为组块设置默认的边界半径.但是,它不会将控制权移交给用户.为此,主题需要在其 experimental-theme.json 文件的 settings 部分下添加以下代码段:

"border" : {
        "customRadius" : true
}

我使用 TT1 Blocks 主题的修改版本对此进行了测试,没有问题.大多数情况下,我期待在插件的未来迭代中出现更多这样的样式选项.

6
订阅评论
提醒
0 评论
内联反馈
查看所有评论