通过 Wayfinder WordPress 插件识别和选择块

Christopher John 是西雅图的设计师和 UX 工程师，他昨天在插件目录中发布了他的第一个项目.通过 Twitter 宣布获得高度评价，Wayfinder 是 WordPress 编辑器的块大纲解决方案.

与类似的插件一样，目标是让最终用户更容易选择嵌套块，这有时很难确定.Wayfinder 会在鼠标悬停时勾勒出编辑器中的每个块.然后在框的左上角显示块名称.

您在其他地方找不到的我最喜欢的功能是在框的右下角添加每个块的类.这对于想要快速找到样式类的设计师或用户来说很容易.

用户还可以通过插件的设置屏幕启用或禁用他们想要显示的 UI 部分.但是，任何更改都会影响网站的所有用户体验.目前，没有针对每个用户的设置.

乍一看，该插件似乎运行良好.悬停轮廓体验感觉流畅，我不需要更改默认选项.Wayfinder 几乎似乎是人们在块轮廓解决方案中可能寻找的一切.它几乎在所有方面都优于现有插件.

然而，当写一篇典型的博客文章时，事情很快就开始走下坡路，除了标题、段落和图像块之外什么都没有.我首先注意到我无法在一行中输入与往常一样数量的单词.我的完美调校的排版是打破早于它应该有.段落之间的间距似乎有点过大.我的宽对齐图像比平时小一点.

到目前为止，用户体验仍然感觉良好，但小怪现象越来越多.有些不对劲.该插件在 Twitter 上受到了好评，并在最初的 24 小时内获得了三项五星级评价.也许我的自定义主题是问题所在.然而，在测试其他几个时出现了类似的问题，例如二十二十一、肉豆蔻和 Eksell —每个都是适合块编辑器的全面主题.

与插件的 UI 一样干净，它经常破坏主题的默认块间距.随着用户开始添加嵌套的块层，这一点变得更加明显.

问题是插件通过其样式表在每个块周围添加了 18 像素的填充.

.wp-block:not(.block-list-appender) {
    position: relative;
    outline: 1px dashed transparent;
    padding: 18px;
    overflow: visible !important;
}

对于未经训练的人来说，在许多情况下这可能不是一个明显的问题.它会对每个站点产生不同的影响，但每个块上 18 像素的额外填充无疑会在某种程度上使事情变得混乱，除非主题本身在其设计中使用完全相同的间距.

使用社交图标等块可以看到更明显的问题:

但是，即使是像 List 块这样基本的东西也可能会错位:

主题作者可以编写自定义 CSS 来否决插件的填充.然而，WordPress 社区最不需要的就是主题和插件之间的特殊性战争.Themers 现在已经必须做到这一点才能解决块.

从插件的 editor-style.css 中删除一个 padding 规则可以解决 99% 的问题.之后，一切都像一台运转良好的机器一样运转.

作为开发人员，我会探索 outline-offset 块与其轮廓之间的间距，也许会减少 18px 一点.因为轮廓不是 CSS 盒模型的一部分，所以它不会影响间距.在每个块的基础上可能需要进行调整，尤其是当这些块是嵌套的或很小的时候(例如，社交图标、导航).它会带来自己的挑战，但应该是一个破坏性较小的过程.

在较小程度上，插件的overflow规则不时破坏主题设计.它的 position 和 outline 规则也可以否决一些边缘情况块样式，但它们对于插件实际完成其工作是必要的.特别是，当我们进入网站编辑时，我可以看到定位会出现粘性标题的问题.

唯一的其他问题可能是在块上使用 ::before 和 ::after 伪元素的主题，但插件还需要覆盖这些以显示块名称和类列表.这可能是另一个边缘情况.

尽管存在问题，但插件在这一点上处于领先地位.

Gutenberg Editor Full Width Blocks Border(有点麻烦)，另一个最近提供类似功能的插件，全面打破了自定义主题设计.它确实完成了使块更容易选择的工作，但所见即所得的牺牲是不值得的.

编辑器块大纲插件一直是我的首选推荐.它有一些自己的设计问题，但其中一些可以根据每个用户进行调整.然而，最近，它让编辑感到呆滞.此外，它对 Twitter 关注者的 WordPress 管理通知系统的滥用使其成为我更愿意避开的事情.

EditorsKit 有一个类似的"块指南"；使用框阴影代替填充和轮廓的功能.它不会使用该技术破坏大多数主题布局.但是，我遇到了与插件的其他样式冲突.另外，EditorsKit 对于只需要一个功能的用户来说太过分了.

这就让我们有了 Wayfinder.疣等等，它是目前最好的独立选项.也许这不是说太多，但它在说些什么.这是一个很难确定的功能.我不羡慕那些努力创造奇迹的开发者.

它肯定会取悦许多一直在寻找块轮廓解决方案的人.凭借相对稳固的首场比赛，它能够在竞争中走得更远.通过更彻底的主题测试和对其方法的一些调整，它可能会更好.我渴望测试未来的迭代.