Adding Icons to the WordPress Core Button Block with Enable Button Icons Plugin
Nick Diego, a developer advocate at Automattic and core contributor, has developed a popular plugin called Icon Block that allows users to add custom SVG icons and graphics to the WordPress block editor. However, many users have asked if the plugin can add icons to the core Button block. Unfortunately, the answer is no. But Diego has come up with a solution.
Last week, while traveling, Diego built a demo plugin called Enable Button Icons that fulfills this feature request without the need for a custom block. The plugin works seamlessly and eliminates the need for additional development work.
The Enable Button Icons plugin is available on GitHub as an example for developers to lightly extend core blocks for similar features. Diego was inspired by WordPress developer Aki Hamano’s Enable Responsive Image plugin, which adds settings to the Image block to display different images based on screen width.
Hamano explained that he wanted to use the WordPress image block to switch images on mobile devices without creating a custom block. He created the Enable Responsive Image plugin, which allows users to add one image and switch it based on breakpoints and resolutions.
Diego doesn’t plan to add his Enable Button Icons plugin to the official WordPress directory. He believes that while it works great, it is not designed to support an entire library of icons. However, he encourages users to take the plugin and modify it according to their needs.
I tested the Enable Button Icons plugin and found it to be highly functional. However, it could benefit from further development to support a wider selection of icons. Alternatively, it could be useful for brands that have a specific set of custom-designed icons they want to easily access for use in Button blocks.
Diego will be hosting an event at the end of the month on how to extend core WordPress blocks, and the Enable Button Icons plugin will be featured. The event is part of the “Developer Hours” series organized by the Learn WordPress Online Workshops group on Meetup. The previous event showcased a demo and walkthrough of the upcoming Twenty Twenty-Four default theme. Keep an eye out for the next event, which will be added to the schedule soon.
Developers have been requesting more extensibility, hooks, and filters for the block editor. To address these concerns, an upcoming Hallway Hangout event will focus on triaging issues related to extending Gutenberg. Contributors will discuss the 110 outstanding issues labeled “Extensibility” and 20 issues labeled “Blocks Adoption,” which directly impact the ability to adopt Gutenberg’s features. Anyone interested in sharing their opinions on block editor extensibility issues is invited to join the event.
In conclusion, Nick Diego’s Enable Button Icons plugin provides a simple solution for adding icons to the WordPress core Button block. While it may not support a vast library of icons, it serves as an excellent example for developers to extend core blocks for similar features. With events and discussions focused on block editor extensibility, the WordPress community is actively working towards providing more flexibility and customization options for users and developers alike.
