Nick Diego released the Icon Block plugin last week. Unlike similar blocks that are available, it does not rely on a third-party library. Instead, it caters to the developer and DIY crowd, allowing them to add any SVG directly to the editor.
Diego is the author of the Block Visibility plugin, which is just a little over a year old and shaping up to be the best project in the space. Over the summer, he expanded it with a pro version that adds value with more niche options. When it comes to the block editor, he has thus far shown a willingness to find creative solutions to problems with a focus on a well-rounded user experience. His latest plugin seems to be no different.
Piecing together the pricing page for Block Visibility is what pushed him to create Icon Block. He had a massive feature list and was hand-coding the icons via the HTML block.
“I threw this little block together this week after becoming very annoyed at using HTML blocks for SVG icons (and not wanting to use a block library),” said Diego. “My goal was to build a simple SVG icon block using basically all native WP components. And as more functionality is added to core (margin, responsive controls, etc.), I will add them to the block.”
The result was a success. It checks a lot of boxes for such an icon solution that leans into the WordPress block system.
At its core, it allows end-users to copy and paste any SVG code into a text field and have it render in the editor and on the front end.
However, it does not stop there. It uses a range of core components and block-supported features to round out the solution. It supports must-have features like colors and alignment. Users can adjust the icon size, padding, and the border-radius while linking it to any URL.
One feature I want to see tacked on is a set of border style, width, and color controls. That is more of a nice-to-have extra than a priority.
Supporting core components would have been fine for a launch, but Diego took that extra step and added custom functionality. The Icon block has a “rotate” button that allows users to turn the icon in 90° increments. It also has buttons for flipping the icon horizontally and vertically.
There are tons of use cases for such icon plugins in the WordPress editor. One of the more common scenarios is a simple set of boxes with a graphic at the top.
With Icon Block, this is simple enough to do by using the Columns block, dropping in custom icons, and customizing them. However, there is so much more that is possible.
The missing pieces are on WordPress’s end. Currently, there are not many robust solutions for building horizontal layouts. It makes it tough to align icons next to text.
The recently-added Row variation on the Group block shows promise. The experience is a bit fussy, but it is possible to place the Icon block next to a Paragraph, as shown in the following screenshot. I built a quick pricing table with check icons.
There is no way to control the spacing between items in each row from the interface yet. I wanted my icons a bit closer to the text.
The other issue is that this should be a list. There is no reason to repurpose other blocks to build the layout. However, the List block does not allow users to nest blocks.
These are not issues of the Icon Block plugin. It just shows a reasonably common use case that WordPress should make possible. This would make these types of plugins far more powerful.
There is support for an icon block to land in the Gutenberg plugin and, eventually, make it to WordPress. Gutenberg Project Lead Matías Ventura opened a ticket in 2019 to explore the idea of allowing users to insert SVGs directly into the editor. If this ever made it in, it would more likely be a visual selector that does not allow end-users to add custom code. Diego’s block might still exist as an alternative solution with more flexibility in that case.
While the plugin could serve as a perfect solution in its current form to a large share of the WordPress community, Diego has plans for improving it. He is considering adding an icon selector for users who do not want to add SVG code. By default, this would show the built-in WordPress icons. However, he also has plans to allow third-party developers to extend it with custom “icon packs.”