Insert Font Awesome Icons Into the Block Editor via the JVM Gutenberg Rich Text Icons Plugin – WordPress Tavern

Joris van Montfort, a contract WordPress developer, launched the JVM Gutenberg Rich Text Icons plugin over the weekend. The objective was easy: enable customers to insert icons almost anyplace within the block editor on the click on of a button.

The plugin makes use of model 4.7 of the Font Superior library out of the field. Nevertheless, builders can modify this to incorporate customized icon units.

Like most of the most helpful plugins, it stays in its lane, performing a easy job and doing it properly. The plugin presents customers with a “flag” button within the editor toolbar at any time when they edit a Wealthy Textual content discipline.

Wealthy Textual content is a block editor element for getting into textual content. Wherever customers can kind within the editor canvas is truthful recreation for inserting an icon. This consists of paragraphs, headings, picture captions, and extra. It additionally extends to blocks from different plugin builders. In the event that they make use of a Wealthy Textual content discipline anyplace, the “flag” button will seem, and customers can plop an icon in it.

Icons inserted by way of the plugin mechanically inherit the encircling textual content measurement. In the event you stick it in a Heading block, it’ll develop bigger. In the event you stick it in a Button block, it’ll match up with the Button textual content. The identical is true for the colours too.

As a result of it’s inconceivable to match every theme’s design completely, some minor spacing or alignment changes could also be wanted. For essentially the most half, the icons regarded good after I examined them with varied themes. Nevertheless, there have been a few one-pixel-off points and minor alignment miscues with some blocks. On the entire, I didn’t run into any design-breaking points. The plugin displayed its icons because it ought to.

One usability subject I encountered was being unable to delete an icon by way of the Backspace or Delete keys on my keyboard in use with the Buttons block. It labored properly with different blocks. The answer for this was to click on on the inserted icon. Then, choose the “flag” icon within the toolbar to reopen the inserter. After selecting no alternative, the outdated one disappeared.

The plugin developer supplied filter hooks for third-party builders to implement icon units apart from Font Superior by way of a customized JSON file. Directions are outlined within the plugin’s readme. There are additionally hooks for importing or overwriting the stylesheet and lessons.

Whereas I just like the plugin’s execution, I dislike that it hundreds its personal Font Superior stylesheet. If utilizing one other plugin or theme that does the identical, its inclusion will increase the web page load measurement for end-users by loading a number of copies of the identical code. This isn’t the fault of the plugin developer. It’s a limitation created by WordPress’s lack of a dependency system. Nevertheless, customers who give the plugin a strive needs to be conscious of this potential subject.