The Icon Block plugin was made available last week by Nick Diego. It does not rely on a third-party library like other comparable blocks. Developers and do-it-yourselfers will like the fact that any SVG file may be simply added to the editor.
With just over a year under his belt, Diego has created the Block Visibility plugin, which is quickly becoming one of the most popular in its field. During the summer, he added a pro version with more specialized features. When it comes to the block editor, he's demonstrated a willingness to come up with innovative ideas while keeping an eye on the end user's overall satisfaction thus far. It appears that his most recent plugin is no different.
He was inspired to create Icon Block after putting together the pricing page for Block Visibility. He had a long list of features and was manually coding the icons in the HTML block to go along with them.
A screenshot of the Block Visibility price page's pricing table. A list of features can be found on the left side of the screen. Checkmarks and "x" icons can be found on the right side of the screen.
Create Amazing Websites
With the best free page builder Elementor
Start Now
Using HTML blocks for SVG icons (and not wishing to utilize a block library) had become a source of irritation for Diego, so he put up this quick fix. "My goal was to use only native WordPress components to create a simple SVG icon block. And as new features are added to the core (such as margins and responsive controls), I'll update this block accordingly.
The outcome was positive. For an icon solution that relies on the WordPress block system, this one checks all the right criteria.
SVG code in a text field will be rendered in the editor as well as on the front end as a result of this feature.
It doesn't end there, though. To round out the solution, it makes use of both core components and block-supported features. It has features that are a must-have, such as support for colors and alignment. To link to any URL, users can change the icon's size, padding, and border-radius.
One thing I'd like to see included is the ability to customize the border style, width, and color. A nice-to-have extra, but not a top priority for most people.
With a blue background and a white symbol, the WordPress logo can be seen as an icon.
Changing the colors, size, spacing, and border radius of the icon is a simple process.
It would have been sufficient for a launch to include support for key components, but Diego went the extra mile by including bespoke functionality. The "rotate" button on the Icon block enables users to rotate the icon by 90 degrees. The icon can be flipped horizontally or vertically using the buttons on the toolbar.
Icon plugins like this have a wide range of applications in the WordPress editor. A simple grid of boxes with a graphic at the top is a typical design.
Using the Columns block in Icon Block, custom icons may be dropped in and customized. However, the possibilities are virtually endless.
WordPress is where the components are lacking. There aren't many good options out there for creating horizontal layouts right now. It's difficult to align icons with text when this is the case.
The Group block's Row variation, which was newly added, has great potential. Icons can be placed adjacent to Paragraphs in the editor, as demonstrated in the accompanying screenshot. The pricing table I created was simple and included check icons.
Using the Icon Block as checkmarks in a list is demonstrated in this two-column pricing table.
At this time, there is no interface control for adjusting the distance between objects. Ideally, the icons should be as close to the text as possible.
In addition, this should be a list instead of a statement. Building the arrangement doesn't necessitate using other blocks. Users cannot nest blocks in the List block, though.
There's nothing wrong with the Icon Block plugin; everything is as it should be. It merely illustrates a scenario in which WordPress would be useful. This would greatly enhance the functionality of plugins of this type.
The Gutenberg plugin, which will be integrated into WordPress in the near future, has support for an icon block. There has been some discussion about allowing users to insert SVG files directly into the editor since Gutenberg Project Lead Matas Ventura created a ticket about it in 2019. It's more likely that this will be a visual choice that prevents end-users from adding custom code. As an alternative method with greater flexibility, Diego's block might still exist.
While the plugin's current form may be wonderful for many in the WordPress community, Diego has ambitions to make it even better. Users who don't want to add SVG code can utilize an icon selector, he says. The built-in WordPress icons would be displayed by default. However, he intends to allow third-party developers to create custom "icon packs" to extend the app's functionality.
