记录生活
简单不先于复杂

使用Icon Block插件添加自定义SVG

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

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

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

327cf7bf4eb59e9

Block Visibility定价表

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

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

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

6f28ee8026cc639

添加基本​​图标

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

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

1c4f135e4190cab

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

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

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

7f4bd0604c940d6

带有图标的框

使用图标区块,这很简单,可以通过使用栏目区块、放入自定义图标并对其进行自定义来实现。然而,还有更多的可能性。

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

在最近添加的行变化对本集团块节目承诺。体验有点麻烦,但可以将图标块放在段落旁边,如下面的屏幕截图所示。我建立了一个带有检查图标的快速定价表。

fd1935bdb0f50dc-1

带有图标列表的定价列

目前还没有办法从界面控制每行项目之间的间距。我希望我的图标更接近文本。

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

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

支持图标区块登陆Gutenberg插件,并最终进入WordPress。古腾堡项目负责人Matías Ventura在2019年发表过言论,探索允许用户直接将SVG插入编辑器的想法。如果这样做的话,它更可能是一个不允许最终用户添加自定义代码的可视化选择器。在这种情况下,Diego的区块可能仍然存在,作为具有更大灵活性的替代解决方案。

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

赞(0)
未经允许不得转载:爱安普 » 使用Icon Block插件添加自定义SVG