Nick Diego上周发布了Icon Block插件。与可用的类似区块不同，它不依赖于第三方库。相反，它迎合了开发人员和DIY人群，允许他们将任何SVG直接添加到编辑器。
Diego是Block Visibility插件的作者，该插件刚推出一年多，正在成为该领域最好的项目。整个夏天，他扩展了一个专业版，增加了更多利基选择的价值。到目前为止，在块编辑器方面，他表现出愿意为问题找到创造性的解决方案，并专注于全面的用户体验。他的最新插件似乎没有什么不同。
拼凑Block Visibility的定价页面是促使他创建Icon Block的原因。他有一个庞大的功能列表，并通过HTML区块对图标进行手工编码。
Block Visibility定价表
“在对使用HTML区块作为SVG图标（并且不想使用块库）感到非常恼火之后，我本周将这个小区块放在一起，”Diego 说。“我的目标是使用基本上所有原生WP组件构建一个简单的SVG图标区块。随着更多功能被添加到核心（边距、响应控件等），我会将它们添加到区块中。”
结果是成功的。它为这样一个倾向于WordPress区块系统的图标解决方案检查了很多框。
从本质上讲，它允许最终用户将任何SVG代码复制并粘贴到文本字段中，并使其在编辑器和前端呈现。
添加基本图标
然而，它并不止于此。它使用一系列核心组件和区块支持的功能来完善解决方案。它支持颜色和对齐等必备功能。用户可以在链接到任何URL时调整图标大小、填充和边框半径。
我想添加的一个功能是一组边框样式、宽度和颜色控件。这与其说是优先事项，不如说是一个很好的选择。
调整图标的颜色、大小、间距和边框半径
支持核心组件对于发布来说很好，但Diego采取了额外的步骤并添加了自定义功能。图标区块有一个“旋转”按钮，允许用户以90°的增量旋转图标。它还具有用于水平和垂直翻转图标的按钮。
WordPress编辑器中有大量此类图标插件的用例。一个更常见的场景是一组顶部带有图形的简单框。
带有图标的框
使用图标区块，这很简单，可以通过使用栏目区块、放入自定义图标并对其进行自定义来实现。然而，还有更多的可能性。
缺失的部分在WordPress的末尾。目前，用于构建水平布局的稳健解决方案并不多。很难在文本旁边对齐图标。
在最近添加的行变化对本集团块节目承诺。体验有点麻烦，但可以将图标块放在段落旁边，如下面的屏幕截图所示。我建立了一个带有检查图标的快速定价表。
带有图标列表的定价列
目前还没有办法从界面控制每行项目之间的间距。我希望我的图标更接近文本。
另一个问题是这应该是一个列表。没有理由重新利用其他块来构建布局。但是，列表区块不允许用户嵌套块。
这些不是Icon Block插件的问题。它只是展示了WordPress应该实现的一个相当常见的用例。这将使这些类型的插件更加强大。
支持图标区块登陆Gutenberg插件，并最终进入WordPress。古腾堡项目负责人Matías Ventura在2019年发表过言论，探索允许用户直接将SVG插入编辑器的想法。如果这样做的话，它更可能是一个不允许最终用户添加自定义代码的可视化选择器。在这种情况下，Diego的区块可能仍然存在，作为具有更大灵活性的替代解决方案。
虽然该插件以其当前形式可以作为WordPress社区很大一部分的完美解决方案，但Diego计划对其进行改进。他正在考虑为不想添加SVG代码的用户添加一个图标选择器。默认情况下，这将显示内置的WordPress图标。但是，他还计划允许第三方开发人员使用自定义“图标包”对其进行扩展。
原文地址：https://www.wbolt.com/icon-block-wordpress-plugin.html
