Icon Block 1.4.0 Adds Height Control, Improves Color Handling to Better Support Global Styles – WP Tavern

Nick Diego, developer advocate at WP Engine, has launched version 1.4.0 of his Icon Block plugin. Diego launched it in October 2021, after struggling to search out an environment friendly method so as to add SVG icons to the block editor. He’s aiming for this small however helpful plugin to grow to be “the definitive SVG icon and graphic block.” Up to now 12 months, it has grown 1300%  to greater than 7,000 energetic installs, whereas staying centered on a good set of options.

WordPress contributors have been discussing adding SVG support to core for greater than a decade, however haven’t but discovered a transparent path ahead that correctly addresses safety issues. In July 2022, the Efficiency group started working on a module for SVG uploads but it surely’s nonetheless in progress. Within the meantime, because the SVG format has nearly universal support across the web, customers have relied on plugins like SVG Support (1M+ installs) or Safe SVG (700k+ installs) to add SVG information to the media library and use them like some other picture file.

Diego’s plugin is totally different in that it was made to be used with the block and website editors. The Icon Block registers a single block that permits customers so as to add customized SVG icons and graphics. It additionally permits entry to the WordPress icon library, which comprises 270+ SVG icons.

One benefit of the plugin is that customers don’t want to put in a complete block library if they simply want SVG icons. In model 1.2.0, Icon Block added the power for builders to register their own custom icon libraries.

The most recent launch expands width management past what is obtainable within the core Picture block to assist %, px, em, rem, vh, vw, or no matter models are outlined in theme.json. These models are additionally obtainable in World Types, so customers can management width primarily based on how the theme creator meant. Diego, who mentioned he prefers to make use of native WordPress parts wherever attainable, up to date width controls utilizing Gutenberg’s HeightControl, which isn’t but obtainable in core.

“Fortunately, it’s constructed out of parts which were in WordPress since 6.0. I ported the code from the HeightControl over to a customized DimensionControl within the Icon Block and made just a few modifications to fulfill my particular wants,” Diego mentioned.

Icon peak assist is a brand new function within the newest 1.4.0 launch, one other function request from the plugin’s group of customers.

“One factor to notice is that I select to exclude % from the peak unit choices,” Diego mentioned within the launch put up. “Utilizing % can have surprising outcomes primarily based on the icon’s container peak and is kind of unintuitive.”

Model 1.4.0 additionally improves coloration assist to raised assist World Types. When themes outline a main and secondary colours in theme.json, icons set to make use of these will work seamlessly with fashion variation switching. This can be a stunning demonstration of how block builders could make their plugins work harmoniously with World Types to enhance the expertise of full-site modifying.

In future releases, Diego mentioned he plans to work on a solution to enable customers to insert customized SVG icons from an “uploaded” SVG file, in addition to discover methods to combine with third-party icon libraries. Entry to Font Superior, Boostrap icons, Ionicons, and different SVG libraries would give customers a a lot wider choice past the WordPress icon library when designing their websites.

Customers can submit function requests by way of the issues queue within the plugin’s GitHub repository. Since Diego is growing the plugin utilizing native WordPress parts as a lot as attainable, customers may also anticipate extra performance to grow to be obtainable as it’s added to WordPress core.

“There are tons of nice icon plugins within the WordPress ecosystem, free and premium,” Diego mentioned. “Most have extra options and performance than the Icon Block. Nevertheless, what makes this block totally different is its robust dedication to WordPress’ core design rules.

“The objective was all the time to make the block really feel prefer it belonged in WordPress itself. I’ve strived to make use of as many core block supports and parts as attainable. Model 1.4.0 stays true to this effort with much-needed enhancements.”