通过图标块 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 图标.不过，他还计划允许第三方开发人员使用自定义的"图标包"对其进行扩展.