+44 0330 223 3428
Call Us
+44 0330 223 3428

WPTavern: Gutenberg 3.6 Adds New Icons for All Core Blocks

WPTavern: Gutenberg 3.6 Adds New Icons for All Core Blocks

Gutenberg 3.6 was released today, featuring a design overhaul for the core icons in the block inserter. The blocks now use Material icons, which offer more options than the Dashicons. This update also improves the icons for the core embeds, which now display the corresponding icon for each embed service.

Gutenberg testers logged an issue regarding the limitations of Dashicons last year, citing the small number available, the inadequacy of their size, and the generic substitutions for embed service icons. The Gutenberg team closed the ticket, saying there was no sign in testing that showed the icons to be a problem and that potential contributors would need to “revisit with evidence” if they wanted to re-open the issue.

It’s not clear whether the team received the evidence or testing required to make this change but the icons become problematic in other ways. As the community started extending Gutenberg, block icon duplication became a problem, due to the limited number of Dashicons available.

“We really need block icons to move away from using dashicons as soon as possible,” Gutenberg technical lead Matías Ventura said in another discussion on a proposed solution. “We are already seeing plugins adding blocks where the icon overlap is very high just because of the limited icons set, which reduces clarity for users very drastically.”

Switching to Material icons solves this problem, ensuring there are unique icons for each block. The inserter design has also been updated as part of this overhaul. Previously, icons appeared with a grey background, as seen below:

The old design suddenly looks rather dated in comparison to Gutenberg’s 3.6 update, which allows for more whitespace around the icons:

The new embed icons are also greatly improved from previous versions of the plugin:

“The new icons aim to encourage people creating their own blocks to supply their own SVG,” Ventura said. “The hope is to make sure we can avoid multiple cases of duplicated icons diminishing the overall ability to quickly scan blocks.”

Ventura said Gutenberg will retain the ability to specify a Dashicon slug in the Block API but he encourages developers to “supply custom SVGs (or draw from the material icon pool) as much as possible.”

Gutenberg 3.6 also adds several new keyboard shortcuts, including inserting a new block before/after the current block, toggling the inspector settings, removing a block, and displaying a new modal help menu. The modal can be launched from the Settings button at the top of the editor and users can scroll through all available shortcuts.

This release also fixes many bugs that users have reported. Gutenberg will now open a new preview window if the prior window has been closed. It will also bring the preview tab to the front when clicking the preview button. Version 3.6 fixes several usability issues that testers found with the permalink UI. Check out the release post for the full list of all the fixes and changes included in 3.6.


Gutenberg 3.6 was released today, featuring a design overhaul for the core icons in the block inserter. The blocks now use Material icons, which offer more options than the Dashicons. This update also improves the icons for the core embeds, which now display the corresponding icon for each embed service. Gutenberg testers logged an issue regarding the limitations of Dashicons last year, citing the small number available, the inadequacy of their size, and the generic substitutions for embed service icons. The Gutenberg team closed the ticket, saying there was no sign in testing that showed the icons to be a…

Source: WordPress

Related Post
WPTavern: WPTracSearch: An Elasticsearch-Powered Search Interface for WordPress Trac Tickets

WPTavern: WPTracSearch: An Elasticsearch-Powered Search Interface for WordPress Trac Tickets WordPress Trac is one of the more utilitarian and uninspiring interfaces that many contributors have to contend with in the process of giving back to the project. After growing tired of Trac’s mediocre search functionality, William Earnhardt set out to improve it with a new […]

Read more
WPTavern: Tips for Replying to A Call for Papers or A Call for Speakers

WPTavern: Tips for Replying to A Call for Papers or A Call for Speakers The following is a guest post written by Jennifer Bourn. With 21 years experience as a graphic designer, 15 years experience as a web designer, 14 years as a creative agency owner, and 11 years as a blogger, Jennifer Bourn has […]

Read more
WPTavern: Storefront 2.5.0 Introduces a Custom, Block-Based Homepage

WPTavern: Storefront 2.5.0 Introduces a Custom, Block-Based Homepage Storefront, WooCommerce’s free flagship theme, has just released version 2.5.0 with updates that make it easier to setup and customize the homepage. In 2017, WooCommerce 2.2 introduced starter content to help users set up the homepage template, menus, widgets, and add some demo products. This content has […]

Read more