Place Typeface Awesome Icons Into the Block Editor by means of the JVM Gutenberg Rich Text Icons Plugin

Joris van Montfort, a freelance WordPress designer, launched the JVM Gutenberg Rich Text Icons plugin over the weekend. The objective was easy: permit users to place icons almost throughout the block editor at the click of a button.

The plugin utilizes variation 4.7 of the Font style Awesome library out of package. Designers can customize this to consist of custom-made icon sets.

Like much of the most beneficial plugins, it remains in its lane, carrying out a basic job and doing it well. The plugin provides users with a “flag” button in the editor toolbar whenever they modify an Abundant Text field.

Inserting an icon into a Rich Text field in the WordPress editor.
Placing an icon into a Heading block. Rich Text is a block editor

Testing icons in different blocks in the WordPress editor.
element for going into text. Anywhere users can enter the editor canvas is level playing field for placing an icon. This consists of paragraphs, headings, image captions, and more.

It likewise reaches blocks from other plugin designers. If they utilize an Abundant Text field anywhere, the” flag” button will appear, and users can plop an icon in it. Icons placed through the plugin immediately acquire the surrounding text size. It will grow bigger if you stick it in a Heading block. It will match up with the Button text if you stick it in a Button block. The very same holds true for the colors too. Placing icons in numerous blocks at various sizes and colors. Some small spacing or positioning changes might be required due to the fact that it is difficult to match each style’s style completely. For the a lot of part, the icons looked great when I evaluated them with different styles. There were a couple of one-pixel-off concerns and small positioning miscues with some blocks. On the whole, I did not face any design-breaking problems. The plugin showed its icons as it should. One functionality concern I came across was being not able to erase an icon by means of the Backspace or Erase secrets on my keyboard in usage with the Buttons block.

It worked well with other blocks. The service for this was to click the placed icon. Choose the” flag “icon in the toolbar to resume the inserter. After picking no replacement, the old one vanished. The plugin designer offered filter hooks for third-party designers to carry out icon sets aside from Font style Awesome by means of a customized JSON file. Directions are detailed in the plugin’s readme. There are likewise hooks for overwriting the stylesheet or submitting and classes.

While I like the plugin’s execution, I do not like that it loads its own Typeface Remarkable stylesheet. Its addition increases the page load size for end-users by packing several copies of the exact same code if utilizing another plugin or style that does the exact same. This is not the fault of the plugin designer. It is a constraint developed by WordPress’s absence of a dependence system. Users who provide the plugin a shot ought to be conscious of this prospective problem.

Leave a Reply

Your email address will not be published. Required fields are marked *