在启动块增强功能后不到一周,Phi Phan 发布了另一个项目:Icon Dividers。它是一个块插件,用于使用 SVG 图标创建自定义分隔线。

“我正在努力支持核心/分隔符中的图标,”Phan 在我们上次讨论将图标添加到核心块时说道。 “但这需要更改标记。所以我可能会为此创建一个新的小块。”现在,他正在核对他在待办事项清单上提到的众多想法中的至少一个。

只做一件事并且做得很好的插件通常是我最喜欢的扩展类型,Icon Separator 也不例外。这也是区块系统本身的妙处。它旨在允许用户将小部件粘贴到任何地方。

当第一次插入图标分隔块时,它看起来很像任何其他普通分隔符。它在屏幕上输出一条简单的水平线:

图标分隔符字符块的默认输出。

欢迎用户在默认状态下使用它,但不会很有趣。这个块是关于图标的。

该插件捆绑了来自 WordPress、Bootstrap 和 Ionicons 库的 3,500 多个图标,为用户提供了大量选择。它似乎是 Phan 的 Block Enhancements 插件的遗留物——重用相同的代码是有意义的。此块还允许用户为自定义图标输入 SVG 代码。

快速选择一个图标,开始在编辑器中自定义分隔符输出:

自定义图标分隔块。

该插件有很多选项可以让用户自己制作。除了选择图标外,他们还可以自定义其填充和描边颜色、大小、间距、位置和对齐方式。

该块还具有自定义分隔线本身的选项,包括实线、虚线和点线样式。用户可以更改其对齐方式、宽度、颜色等。

各种图标和分隔符修改。

这个块是 WordPress 中可重用块系统的理想用例。假设用户想在他们的网站上使用相同的分隔符设计,设计一次并保存一份副本以在需要的地方使用是有意义的。

插件没有使用


HTML 元素让我有点失望。上次与 Phan 交谈时,我很兴奋。我想看看有人会如何解决这个插件问题,但我希望它可以用语义来解决


。部分原因只是作为开发人员和设计师的好奇心,知道将其用作任何主题设计的通用块的局限性。

Phan 采取了使用包装器

并将图标 代码放在那里的不那么令人头疼的方法。这开辟了更多的可能性,并且街区可能会更好。

但是,我想指出的是,对于那些需要在内容中使用适当的水平线的人来说,这个块并不理想。


元素用于标记主题中断。在这些情况下,最好坚持使用核心分离块。

如果分隔线是设计元素而不是内容中断,那就疯狂吧。图标分隔块有很多选项。

出处