Nick Diego launched the Icon Block plugin final week. In contrast to related blocks which are out there, it doesn’t depend on a third-party library. As an alternative, it caters to the developer and DIY crowd, permitting them so as to add any SVG on to the editor.
Diego is the creator of the Block Visibility plugin, which is just a bit over a 12 months outdated and shaping as much as be the very best undertaking within the house. Over the summer time, he expanded it with a professional model that provides worth with extra area of interest choices. With regards to the block editor, he has up to now proven a willingness to search out artistic options to issues with a deal with a well-rounded consumer expertise. His newest plugin appears to be no completely different.
Piecing collectively the pricing web page for Block Visibility is what pushed him to create Icon Block. He had a large function record and was hand-coding the icons by way of the HTML block.
“I threw this little block collectively this week after turning into very irritated at utilizing HTML blocks for SVG icons (and never wanting to make use of a block library),” mentioned Diego. “My purpose was to construct a easy SVG icon block utilizing principally all native WP elements. And as extra performance is added to core (margin, responsive controls, and many others.), I’ll add them to the block.”
The end result was a hit. It checks a variety of packing containers for such an icon resolution that leans into the WordPress block system.
At its core, it permits end-users to repeat and paste any SVG code right into a textual content subject and have it render within the editor and on the entrance finish.
Nevertheless, it doesn’t cease there. It makes use of a spread of core elements and block-supported options to spherical out the answer. It helps must-have options like colours and alignment. Customers can alter the icon measurement, padding, and the border-radius whereas linking it to any URL.
One function I need to see tacked on is a set of border model, width, and coloration controls. That’s extra of a nice-to-have additional than a precedence.
Supporting core elements would have been nice for a launch, however Diego took that additional step and added customized performance. The Icon block has a “rotate” button that enables customers to show the icon in 90° increments. It additionally has buttons for flipping the icon horizontally and vertically.
There are tons of use circumstances for such icon plugins within the WordPress editor. One of many extra widespread eventualities is a straightforward set of packing containers with a graphic on the prime.
With Icon Block, that is easy sufficient to do by utilizing the Columns block, dropping in customized icons, and customizing them. Nevertheless, there’s a lot extra that’s potential.
The lacking items are on WordPress’s finish. At the moment, there usually are not many sturdy options for constructing horizontal layouts. It makes it powerful to align icons subsequent to textual content.
The recently-added Row variation on the Group block reveals promise. The expertise is a bit fussy, however it’s potential to position the Icon block subsequent to a Paragraph, as proven within the following screenshot. I constructed a fast pricing desk with verify icons.
There isn’t a strategy to management the spacing between objects in every row from the interface but. I wished my icons a bit nearer to the textual content.
The opposite subject is that this must be an inventory. There isn’t a cause to repurpose different blocks to construct the format. Nevertheless, the Checklist block doesn’t permit customers to nest blocks.
These usually are not problems with the Icon Block plugin. It simply reveals a fairly widespread use case that WordPress ought to make potential. This might make a lot of these plugins much more highly effective.
There’s assist for an icon block to land within the Gutenberg plugin and, ultimately, make it to WordPress. Gutenberg Challenge Lead Matías Ventura opened a ticket in 2019 to discover the thought of permitting customers to insert SVGs straight into the editor. If this ever made it in, it might extra seemingly be a visible selector that doesn’t permit end-users so as to add customized code. Diego’s block may nonetheless exist instead resolution with extra flexibility in that case.
Whereas the plugin might function an ideal resolution in its present type to a big share of the WordPress neighborhood, Diego has plans for enhancing it. He’s contemplating including an icon selector for customers who don’t need to add SVG code. By default, this might present the built-in WordPress icons. Nevertheless, he additionally has plans to permit third-party builders to increase it with customized “icon packs.”