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

WPTavern: A Proposal for Improving the Change Block Type User Interface in Gutenberg

WPTavern: A Proposal for Improving the Change Block Type User Interface in Gutenberg

In Gutenberg 3.6.2, the development team moved the Convert Block option to the left most icon in the toolbar. As long as the toolbar is visible, so is the option to change block types. However, there are a few user experience issues with this approach.

Convert Block Option

The first is obvious. The paragraph block icon looks like an alignment option. The second issue is that the icon represents the current block being edited, sort of like a block label. Unless a user hovers their cursor over the icon, it’s difficult to realize that it’s for changing block types.

Kevin Hoffman, a WordPress developer and core contributor, has proposed a new user interface suggestion that aims to solve the issues mentioned above.

Suggested Changes by Kevin Hoffman

Hoffman suggests changing the icon to a drop-down menu, similar to the one in the Classic Editor. The menu would make the ability to change block types more discoverable. It removes confusion associated with icons and is a workflow that’s already established.

Gutenberg developer Joen Asmussen thanked Hoffman for the feedback and listed a number of things to consider with his approach. These include the editor’s need to be responsive, scale to editors with thin columns, accessibility, and accommodating long block names.

Gutenberg technical lead Matías Ventura also commented on the proposal.

Just wanted to say thanks for all the constructive voices here and willingness to find better solutions. If there’s anything that is fairly clear is that the current ‘block switching’ interaction is not as obvious as it could be.

I think using the paragraph icon instead of the one that is easily confused as alignment, @jasmussen‘s update in #9310, plus the addition of the drop-down arrow are a good baseline to check on the next release and see if we need something more involved. @kevinwhoffman it’d be great to expand on your proposal and see how it might look across more blocks and nested contexts.

Matías Ventura

Depending on your workflow, changing block types will be a common action. For example, I often press enter at the end of a paragraph block which creates a new paragraph block automatically. Being able to easily identify and use the change block type option will improve my writing experience.

Those with feedback on Hoffman’s proposal are encouraged to respond to the issue on GitHub. It’s also worth noting that the team is experimenting with using an icon that’s designated specifically for changing block types.


In Gutenberg 3.6.2, the development team moved the Convert Block option to the left most icon in the toolbar. As long as the toolbar is visible, so is the option to change block types. However, there are a few user experience issues with this approach. Convert Block Option The first is obvious. The paragraph block icon looks like an alignment option. The second issue is that the icon represents the current block being edited, sort of like a block label. Unless a user hovers their cursor over the icon, it’s difficult to realize that it’s for changing block types. Kevin…

Source: WordPress

Related Post
WPTavern: Clean Blocks: A Free Multipurpose WordPress Theme Compatible with Gutenberg

WPTavern: Clean Blocks: A Free Multipurpose WordPress Theme Compatible with Gutenberg Clean Blocks is a new free theme from Catch Themes that was released last week on WordPress.org. The design is suitable for businesses, agencies, freelancers, and other service professionals who require featured content, a portfolio, testimonials, a blog, and a services section. Clean Blocks […]

Read more
WPTavern: Laraberg, a Gutenberg Implementation for Laravel, is Now in Beta

WPTavern: Laraberg, a Gutenberg Implementation for Laravel, is Now in Beta The family of Gutenberg derivatives is expanding with the beta release of Laraberg, an implementation for Laravel. Maurice Wijnia, a developer at Van Ons, an agency based in Amsterdam, created Laraberg as an easy way for developers building applications with Laravel to integrate the […]

Read more
HeroPress: How the WordPress community helped me find my way

HeroPress: How the WordPress community helped me find my way Este ensaio também está disponível em português. As I make a checklist of all the things I’ll have to pack to travel from São Paulo to Berlin, to attend WordCamp Europe 2019, I can’t stop thinking how hard the path to this point has been. […]

Read more