Phi Phan 使用图标选项启动分隔块

不到一周后 启动块增强,Phi Phan 发布了另一个项目: 图标分隔符. 它是一个块插件,用于创建带有 SVG 图标的自定义分隔线。

“我尝试在核心/分隔符中支持图标,”当我们上次谈到向核心块添加图标时,Phan 说道。 “但这需要更改标记。 所以我可能会专门为它创建一个新的小块。” 现在,他至少检查了他在待办事项清单上提到的许多想法中的一个。

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

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

phi-phan-launches-a-separator-block-with-an-icon-option Phi Phan 使用图标选项启动分隔块图标分隔符块的默认输出。

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

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

很快就选择了一个图标并开始在编辑器中自定义分隔符输出:

phi-phan-launches-a-separator-block-with-an-icon-option-1 Phi Phan 使用图标选项启动分隔块自定义图标分隔符块。

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

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

phi-phan-launches-a-separator-block-with-an-icon-option-2 Phi Phan 使用图标选项启动分隔块各种图标和分隔符修改。

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

我对插件不使用


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


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

Phan 采用了使用包装器

并将图标 代码放入其中的不那么令人头疼的路线。 这开辟了更多的可能性,并且该块可能对它更好。

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


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

在分隔线是设计元素而不是内容中断的情况下,请疯狂。 图标分隔符块有很多选项。

来源

相关文章