Paragraph Archives

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.

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.

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.

Gutenberg 3.7 is available for download and contains a number of changes. The Fixed Toolbar has been renamed Unified Toolbar. This is an optional mode that fixes all of the toolbar icons to the top of the editor, similar to the Classic editor.

The team discovered that experienced users who don’t mind the disconnect between blocks and the toolbar preferred this layout.

Unified Toolbar in Gutenberg — Unified Toolbar

There’s now an animation and icon specifically tailored for the Block Converter action. Hovering the cursor over a block’s icon will display two arrows that represent the ability to change block types.

Change Bock Types Icon in Gutenberg — Change Bock Types Icon

For those who want to focus on one block of content at a time, there’s a new mode called Spotlight. When enabled, the blocks that are not being edited partially fade away and the block outlines disappear. This is an experimental attempt at introducing a Distraction Free Writing mode.

The icons have been updated for Paragraph, Heading, and Subheading blocks to add clarity. Previous to 3.7, the Paragraph block icon looked like an alignment option causing confusion.

Updated Icons for Paragraph, Heading, and Subheading blocks

You can find a complete list of changes and links to corresponding issues on GitHub by visiting the Gutenberg 3.7 release post.