通过 JVM Gutenberg 富文本图标插件将 Font Awesome 图标插入块编辑器

自由 WordPress 开发人员 Joris van Montfort 在周末发布了 JVM Gutenberg Rich Text Icons 插件.目标很简单:允许用户通过单击按钮在块编辑器中的几乎任何位置插入图标.

该插件开箱即用地使用 Font Awesome 库的 4.7 版.但是,开发人员可以修改它以包含自定义图标集.

像许多最有用的插件一样,它保持在自己的位置,执行简单的任务并做得很好.该插件为用户提供了一个"标志".编辑富文本字段时编辑器工具栏中的按钮.

在标题块中插入一个图标.

富文本是用于输入文本的块编辑器组件.用户可以在编辑器画布中输入的任何地方都是插入图标的公平游戏.这包括段落、标题、图像标题等.它还扩展到来自其他插件开发人员的块.如果他们在任何地方使用富文本字段,"标志"按钮将出现,用户可以在其中插入一个图标.

通过插件插入的图标会自动继承周围的文字大小.如果你把它放在一个标题块中,它会变大.如果您将其粘贴在 Button 块中,它将与 Button 文本匹配.颜色也是如此.

在不同大小和颜色的不同块中插入图标​​.

因为不可能完美匹配每个主题的设计,所以可能需要进行一些小的间距或对齐调整.在大多数情况下,当我使用各种主题对其进行测试时,这些图标看起来不错.但是,存在一些单像素关闭问题和一些块的轻微对齐错误.总的来说,我没有遇到任何破坏设计的问题.该插件按其应有的方式显示其图标.

我遇到的一个可用性问题是无法通过键盘上的 BackspaceDelete 键删除图标,该键与 Buttons 块一起使用.它适用于其他块.对此的解决方案是单击插入的图标.然后,选择"标志"图标以重新打开插入器.选择不替换后,旧的消失了.

插件开发人员为第三方开发人员提供了过滤器钩子,以通过自定义 JSON 文件实现 Font Awesome 以外的图标集.插件的自述文件中概述了说明.还有用于上传或覆盖样式表和类的钩子.

虽然我喜欢插件的执行,但我不喜欢它加载自己的 Font Awesome 样式表.如果使用其他具有相同功能的插件或主题,它的包含会通过加载相同代码的多个副本来增加最终用户的页面加载大小.这不是插件开发者的错.这是 WordPress 缺乏依赖系统造成的限制.但是,尝试使用该插件的用户应该注意这个潜在问题.

6

发表回复