Nick Diego launched the Icon Block plugin final week. Not like comparable blocks which might be obtainable, it doesn’t depend on a third-party library. As a substitute, 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 one of the best challenge within the house. Over the summer time, he expanded it with a pro version that provides worth with extra area of interest choices. In the case of the block editor, he has so far proven a willingness to seek out inventive 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 page for Block Visibility is what pushed him to create Icon Block. He had an enormous characteristic record and was hand-coding the icons by way of the HTML block.
“I threw this little block collectively this week after changing into very irritated at utilizing HTML blocks for SVG icons (and never wanting to make use of a block library),” mentioned Diego. “My objective was to construct a easy SVG icon block utilizing principally all native WP parts. And as extra performance is added to core (margin, responsive controls, and so forth.), I’ll add them to the block.”
The outcome was successful. It checks quite a lot of bins for such an icon answer 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 discipline and have it render within the editor and on the entrance finish.
Nonetheless, it doesn’t cease there. It makes use of a variety of core parts and block-supported options to spherical out the answer. It helps must-have options like colours and alignment. Customers can regulate the icon dimension, padding, and the border-radius whereas linking it to any URL.
One characteristic I need to see tacked on is a set of border type, width, and coloration controls. That’s extra of a nice-to-have additional than a precedence.
Supporting core parts would have been high-quality for a launch, however Diego took that additional step and added customized performance. The Icon block has a “rotate” button that permits 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 frequent eventualities is an easy set of bins with a graphic on the high.
With Icon Block, that is easy sufficient to do through the use of the Columns block, dropping in customized icons, and customizing them. Nonetheless, there’s a lot extra that’s attainable.
The lacking items are on WordPress’s finish. Presently, there are usually not many sturdy options for constructing horizontal layouts. It makes it robust to align icons subsequent to textual content.
The recently-added Row variation on the Group block exhibits promise. The expertise is a bit fussy, however it’s attainable to put the Icon block subsequent to a Paragraph, as proven within the following screenshot. I constructed a fast pricing desk with test icons.
There isn’t any solution to management the spacing between gadgets in every row from the interface but. I needed my icons a bit nearer to the textual content.
The opposite challenge is that this ought to be a listing. There isn’t any purpose to repurpose different blocks to construct the structure. Nonetheless, the Record block doesn’t enable customers to nest blocks.
These are usually not problems with the Icon Block plugin. It simply exhibits a fairly frequent use case that WordPress ought to make attainable. This is able to make some of these plugins way more highly effective.
There’s assist for an icon block to land within the Gutenberg plugin and, finally, make it to WordPress. Gutenberg Challenge Lead Matías Ventura opened a ticket in 2019 to discover the concept of permitting customers to insert SVGs immediately into the editor. If this ever made it in, it will extra probably be a visible selector that doesn’t enable end-users so as to add customized code. Diego’s block would possibly nonetheless exist in its place answer with extra flexibility in that case.
Whereas the plugin may function an ideal answer in its present kind 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 could present the built-in WordPress icons. Nonetheless, he additionally has plans to permit third-party builders to increase it with customized “icon packs.”