In-house usability testing in the new WordPress editor, Gutenberg

how-to-use-wordpress-gutenberg-editor-2

9 November, 2018

By Brendyn

The new editor (Gutenberg) is about to be rolled out to all WordPress users and there are still serious rough edges.

We have been doing some internal testing before we have to support our hundred odd clients with their questions about it. Here’s some things we noticed that need still improvement. 

  1. “Save Draft” link is too hard to spot – The save draft is not a button, it is just a link. In the default admin theme (set in your user profile) the link is blue and not too hard to spot but is very subserv. However using other admin themes such as “midnight” the link is plain grey and our tester couldn’t find the link at all after 5 minutes of looking. We had to tell them where it was. Worse still once you click publish there is no option to save as a draft anywhere to be seen. There should be some text here that indicates the ability to save a draft instead. We suspect that there will be many unfinished posts published by clients who expect to have to push a button to save their changes (not realising that it was auto saved for them).
  2. You can only select multiple whole paragraphs – If you want to select the current paragraph and say half of the text of the paragraph above it (a very common use case when editing blog style text) you can’t do it without selecting the whole of the paragraph above. This adds extra editing steps and breaks the editing model that people are used to from all major text editors including Microsoft Word and the exisitng WordPress text editor. 
  3. You can’t drag and drop blocks – this is a huge usability drawback combined with the point mentioned above. Every little thing (each paragraph, bulleted list, heading, blockquote etc) is broken into its own block. We understand why this is being done but the fact that you can’t easily just drag them to where they need to go when editing makes the whole editing process much more tedious. 
  4. Removing a block is hard – The option to delete the current block is hidden right at the bottom of the dropdown in the block settings. Again we feel that there are many clients who won’t even find it. Let alone the frustration of having to delete many blocks at once. 
  5. Converting block types isn’t obvious –  Our tester wasn’t clear on how to change a paragraph into a heading even after hovering over the content and seeing the editing icons. The “paragraph” icon is vague and all that is there to indicate a drop down list of other content types is a small grey triangle that is easily missed. Once you have the concept it’s easy, but that first use experience is not discoverable at all. 
  6. Putting content in Columns is a disaster – Our tester is experienced with multiple page builders and couldn’t work out how to get columns working in Gutenberg. 
  7. Editing content on mobile is a confusing mess of overlays that make it hard to work out where to click or navigate

We’d advise using the default WordPress admin theme due to the compatibility issues mentioned above. 

Avoca’s plan for Gutenberg for our hosted clients

Overall we’re fairly unhappy with the current state of the new editor. 

We’ll turn Gutenberg off by default, it’s just not ready for primetime use. Then we will only enable it on posts for clients that opt in. We will be using the Gutenberg ramp plugin to selectively turn it on as it improves. 

We’ll also be running training webinars to try and mitigate the support workload that we know we’re going to get from clients.

We’re not the only ones with issues…

Let's create something awesome online. Together

We love working with passionate businesses, creating websites that reach the right audience and drive online growth. Share your vision with us.