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

WPTavern: Gutenberg 3.1 Introduces Tips Interface to Guide New Users

WPTavern: Gutenberg 3.1 Introduces Tips Interface to Guide New Users

Gutenberg 3.1 added a tips interface that supports and guides new users who are learning to navigate the editor’s blocks and settings. The tips appear when a new user opens Gutenberg, highlighting useful items on the page.

Although the tips may seem cluttered and intrusive to users who already know what they are doing, they are a necessary evil for introducing the UI to new users. Gutenberg is not yet intuitive enough to be able to stand on its own without explanation inside the interface.

10up recently conducted Gutenberg usability tests that unearthed some startling realities about how new users interact with the new editor. The tests were done on previous versions of the plugin (2.9.2) with users who frequently create content using the classic WordPress editor. 10up asked testers, who have had no training on Gutenberg, to write a news-style blog post.

One of the most surprising results was that participants struggled with the simple task of adding an image to a post.

“Although the interface is clean, a lack of focused attention or hierarchy on the page became apparent,” 10up Experience Designer Sarah James said. “Participants struggled to complete tasks like adding an image that did not have a clearly exposed and labeled element like the title and paragraph fields. Heatmap tracking of the backend captured 734 unique clicks in the new post interface and only 40 of these clicks were on actual clickable elements. This suggests a struggle to find basic interactive elements, such as image blocks.”

Participants also had a difficult time finding and inserting additional block types – several testers overlooked the “+” symbol that triggers interface for adding a new block.

Gutenberg 3.0 and 3.1 have already improved on these pain points with changes that highlight common tasks. The 3.0 release redesigned the inserter, ditching tabs for collapsible panels. This makes it more friendly for hunting among blocks. Version 3.1 includes a new design of the sibling inserter (the “+” symbol that appears to allow user to insert blocks between other blocks).

In addition to improving usability issues with the inserter, Gutenberg 3.1 fixes some of the mechanics of previewing and saving posts. Users can now preview changes to a published post without updating the post. The editor was also updated to trigger autosave as a standard save for a draft by the user currently authoring the post.

HTML blocks that have been converted into shared blocks now show in preview mode, which makes it easier for users to see what they do and insert them visually. The code will only show if the user wants to edit the block.

For a full list of the changes in 3.1, check out the release post on make.wordpress.org.


Gutenberg 3.1 added a tips interface that supports and guides new users who are learning to navigate the editor’s blocks and settings. The tips appear when a new user opens Gutenberg, highlighting useful items on the page. Although the tips may seem cluttered and intrusive to users who already know what they are doing, they are a necessary evil for introducing the UI to new users. Gutenberg is not yet intuitive enough to be able to stand on its own without explanation inside the interface. 10up recently conducted Gutenberg usability tests that unearthed some startling realities about how new users…

Source: WordPress

Related Post
WPTavern: AMP Plugin for WordPress Version 1.0 Introduces Gutenberg-Integrated AMP Validation

WPTavern: AMP Plugin for WordPress Version 1.0 Introduces Gutenberg-Integrated AMP Validation Version 1.0 of the official AMP plugin for WordPress was released on the eve of WordCamp US, after two years in development by contributors from Automattic, XWP, and Google. This first stable version has a massive changelog with 30 people credited for their contributions. […]

Read more
WPTavern: WordPress 5.0 “Bebo” Released, Lays A Foundation for the Platform’s Future

WPTavern: WordPress 5.0 “Bebo” Released, Lays A Foundation for the Platform’s Future In 2016 at WordCamp US in Philadelphia, PA, Matt Mullenweg announced to the world that a new post and page editor would be coming to WordPress. “The editor does not represent the core of WordPress publishing,” Mullenweg said. His vision of the editor […]

Read more
Dev Blog: WordPress 5.0 “Bebo”

Dev Blog: WordPress 5.0 “Bebo” Say Hello to the New Editor We’ve made some big upgrades to the editor. Our new block-based editor is the first step toward an exciting new future with a streamlined editing experience across your site. You’ll have more flexibility with how content is displayed, whether you are building your first […]

Read more