通过图标块 WordPress 插件添加自定义 SVG

Nick Diego 上周发布了 Icon Block 插件.与可用的类似块不同,它不依赖于第三方库.相反,它迎合了开发人员和 DIY 人群,允许他们将任何 SVG 直接添加到编辑器中.

Diego 是 Block Visibility 插件的作者,该插件推出仅一年多,正在成为该领域的最佳项目.整个夏天,他扩展了一个专业版,增加了更多利基选择的价值.到目前为止,在块编辑器方面,他表现出愿意为问题找到创造性的解决方案,并专注于全面的用户体验.他的最新插件似乎没有什么不同.

拼凑 Block Visibility 的定价页面是促使他创建 Icon Block 的原因.他有一个庞大的功能列表,并且正在通过 HTML 块对图标进行手工编码.

块可见性定价表.

“在对使用 HTML 块作为 SVG 图标(并且不想使用块库)感到非常恼火之后,我本周将这个小块放在一起,”迭戈说.“我的目标是使用基本上所有原生 WP 组件构建一个简单的 SVG 图标块.随着更多功能被添加到核心(边距、响应式控件等),我会将它们添加到块中.”

结果是成功的.它为这样一个倾向于 WordPress 块系统的图标解决方案检查了很多框.

从本质上讲,它允许最终用户将任何 SVG 代码复制并粘贴到文本字段中,并使其在编辑器和前端呈现.

添加一个基本图标.

然而,它并不止于此.它使用一系列核心组件和块支持的功能来完善解决方案.它支持颜色和对齐等必备功能.用户可以在链接到任何 URL 时调整图标大小、填充和边框半径.

我希望添加的一个功能是一组边框样式、宽度和颜色控件.这与其说是优先事项,不如说是一个不错的选择.

调整图标的颜色、大小、间距和边框半径.

支持核心组件对于发布来说已经很好了,但 Diego 采取了额外的步骤并添加了自定义功能.图标块有一个"旋转"允许用户将图标旋转 90°的按钮;增量.它还具有用于水平和垂直翻转图标的按钮.

WordPress 编辑器中有大量此类图标插件的用例.一个更常见的场景是一组顶部带有图形的简单框.

带有图标的框.

使用图标块,这很简单,只需使用列块、放入自定义图标并对其进行自定义即可.然而,还有更多可能.

缺失的部分在 WordPress 的尽头.目前,用于构建水平布局的稳健解决方案并不多.很难在文本旁边对齐图标.

最近在 Group 块上添加的 Row 变体显示出前景.体验有点麻烦,但可以将图标块放在段落旁边,如下面的屏幕截图所示.我建立了一个带有复选图标的快速定价表.

带有图标列表的定价列.

目前还无法通过界面控制每行项目之间的间距.我希望我的图标更接近文本.

另一个问题是这应该是一个列表.没有理由重新利用其他块来构建布局.但是,List 块不允许用户嵌套块.

这些不是图标块插件的问题.它只是展示了 WordPress 应该实现的一个相当常见的用例.这将使这些类型的插件更加强大.

支持在 Gutenberg 插件中放置一个图标块,并最终使其成为 WordPress.Gutenberg 项目负责人 Matías Ventura 在 2019 年开了一张票,探索允许用户直接将 SVG 插入编辑器的想法.如果这样做的话,它更可能是一个不允许最终用户添加自定义代码的可视化选择器.在这种情况下,Diego 的块可能仍然存在,作为具有更大灵活性的替代解决方案.

虽然该插件以其当前形式可以作为 WordPress 社区很大一部分的完美解决方案,但 Diego 已计划对其进行改进.他正在考虑为不想添加 SVG 代码的用户添加一个图标选择器.默认情况下,这将显示内置的 WordPress 图标.不过,他还计划允许第三方开发人员使用自定义的"图标包"对其进行扩展.

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