A Bright Clear Web

A Bright Clear Web - Simple, effective, accessible websites

You are here: Home / WordPress / The User Experience and Accessibility of Gutenberg (The WordPress 5.0 Block Editor)

The User Experience and Accessibility of Gutenberg (The WordPress 5.0 Block Editor)

Posted: Updated: by Claire Brotherton
12 Comments

A heading, paragraph and image block (highlighted)

As WordPress 5.0 launches today, with a new block editor, it seems timely to revisit this presentation I gave at WordCamp Edinburgh 2018 on 17 November.

This was the talk description:

The new Gutenberg editor is a key part of WordPress 5.0 which is going to change the user experience of WordPress, for better or for worse. I will take a look at how Gutenberg has developed over its iterations as a plugin, examining how it works in terms of usefulness, desirability, usability, and findability, with a special focus on how accessible Gutenberg is for disabled users.

It seemed to go down pretty well with attendees. Here’s a couple of tweets:

What I talked about

This is a “remixed” version of my presentation. I’ve expanded upon some things and condensed others.

For the full presentation, feel free to download the slides.

Jump to a section:

What is Gutenberg?

Gutenberg is the development name for the new WordPress block editor. It’s a new way of creating and editing content within WordPress.

Instead of one large content box, the content is split into lots of little blocks.

A heading, paragraph and image block (highlighted)
A heading, paragraph and image block (highlighted)

The new editor is an integral part of WordPress 5.0 and replaces the existing post editor.

WordPress 5.0’s release date has been delayed from the original date a few times. Launch date is now December 6, 2018.

The old post editor now becomes a plugin, Classic Editor.

The editor is not coming into WordPress.com sites yet, but will be in the future.

What makes a great editor?

In considering a new editor, the WordPress Design Team asked users in January 2017 what they liked and didn’t like in the then-current editor and what they wanted in a new editor.

Here are a couple of the views that I thought were significant:

#1: A good editor produces simple markup that’s accessible and portable from theme to theme.

#2: A good editor helps users focus on communicating, not designing.

– Mark Root-Wiley (@mrwweb)

This UI needs to be complex, because it is used for so many different types of input. Most people don’t use all of the possibilities within one post or page — that’s a good thing. But don’t make it difficult to get to any of them, because you don’t know what they might want (and it can change right in the middle of creating).

– Joy Reynolds (@joy)

What problems does the existing editor have?

Some of the themes that came out in the feedback were:

  • Useful tools can be hidden away e.g. in the Screen Options section at the top of the editor. Not everyone is aware that these options are there, and knows what each of them does.Classic Editor Screen Options
  • Shortcodes are ugly to use.
  • Not obvious what content you can embed and how it works. Examples of embeds are YouTube videos or tweets.
  • Difficult to build complex layouts.
  • Not a true WYSIWYG experience. What you see in the editor is not the same as it appears on a web page.
  • Mobile experience is poor.

The idea of having content blocks came out in the discussions, and was expanded upon.

What’s the aim of the block editor?

The stated aim of the block editor as given on Gutenberg’s GitHub repository is:

The editor will create a new page- and post-building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

— Matt Mullenweg (WordPress co-founder)

The editor is also intended to appeal to users of Squarespace, Wix and Medium.

What have users thought of Gutenberg as a plugin?

The WordPress 5.0 editor was first released as the Gutenberg plugin in June 2017.

It’s gone through a lot of changes since that time in terms of user interface design and functionality.

Usability tests

Here are some reviews of more recent versions:

These studies found no major problems with the new editor.

In fact the continual iterations improved the System Usability Scale of the editor from 69.5 (marginal) to 83.5 (acceptable) in 10up’s tests.

However, these are small scale studies, so not necessarily representative of all WordPress users.

User reviews from WordPress.org

The largest pool of user testing has been done by people who have downloaded, tried and reviewed the Gutenberg plugin on WordPress.org.

This was the state of play on 14th November 2018:

Gutenberg user reviews on 14 November 2018: average rating 2.3, 369 gave 5 stars and 867 gave one star.

There were over 1,500 user reviews.

About 57% of them gave one star.

But these reviews were for all versions of the plugin, including less developed, buggier versions.

However, on 14 November 2018, Erick Danzer of Imagely (makers of the NextGEN Gallery plugin) noted that:

I just calculated the average for the last 90 reviews and it is exactly 2.31 (including 47 one star reviews out of the most recent 90 total)…. it is clear the plugin is not ‘wowing’ potential users.

This quote comes from Erick’s post called A Plea to Defer the Release of Gutenberg.

He’s not been the only high-profile voice in the WordPress community to have worries over the release of the new editor.

Others include:

Joost de Valk of Yoast: WordPress 5.0 needs a different timeline

Mark Root-Wiley: WordPress 5.0 is Not Ready

Elliot Condon, creator of the Advanced Custom Fields plugin (with over 1 million installs): The Night Before Gutenberg

https://twitter.com/carlhancock/status/1069930129340669952

https://twitter.com/JJJ/status/1070034288559775744

What are some of the criticisms and concerns with the new WordPress 5.0 editor?

Some of the concerns highlighted have been:

  • Retraining users familiar with the Classic Editor.
  • Compatibility with existing plugins/themes.

  • The new editor adds extra markup to posts, possibly slowing sites down.
  • It takes longer to achieve things compared to the Classic Editor.
  • Content pasted from other sources breaks.
  • The barrier to entry is high for those wanting to code Gutenberg blocks. (Agency owner Steve Truman estimates that it takes 450+ hours of study per developer.)

How has accessibility been handled with Gutenberg?

WordPress made a commitment to accessibility in February 2016:

All new or updated code released into WordPress core and bundled themes must conform with the WCAG 2.0 guidelines at level AA.

This means WordPress accessibility is a requirement, not a “nice to have”, and it must meet a certain standard.

I’ve reviewed three different versions of Gutenberg along its development path.

In the earlier versions, accessibility was poor, but it has improved along the way, thanks largely to work of the WordPress Accessibility Team.

What has improved in the Gutenberg editor’s accessibility?

  • Block selector – was inaccessible. In the screenshot below, from an early version, you couldn’t reach all the blocks with the keyboard. In the newer versions you can.
    A keyboard trap: stuck on Cover Image
    A keyboard trap: stuck on Cover Image
  • Searching for blocks – improved.
  • Date picker – was inaccessible to keyboard users, now accessible.
    Accessible date picker for the block editor
  • Focus indicators – improved.
  • Keyboard shortcuts – there are now a large selection, though it’s still not possible for assistive technology users to choose their own preferred shortcuts.
  • Navigation between regions – now possible. There are four regions in the block editor: the editor bar, the content area, the publish panel and the settings sidebar.
  • Publishing a post – now doable (it wasn’t in the earliest iteration I tried).

What are some things that are still causing friction in the new block editor?

What do the WordPress Accessibility team think of the WordPress 5.0 editor?

Early testing with assistive technologies

The WordPress Accessibility Team did some testing of Gutenberg 2.4 for users of assistive technologies. Assistive technologies are things that help disabled people use the Web e.g. screen readers which can read out web pages to blind users.

The main findings were:

  1. Keyboard accessibility and semantics were sub-optimal.
  2. At that time the team view was “Gutenberg is a dramatic step back in usability”.
  3. A need was highlighted for Gutenberg documentation for assistive technology users. Creating this has been my focus in recent weeks.

Rian Rietveld leaves the team

In October 2018, the team lost one of its key members when Rian Rietveld left.

Her reasons for leaving were born of various frustrations:

  1. No-one in the WordPress Accessibility team had experience with React, limiting the team’s effectiveness in shaping the new editor. (React is a JavaScript code library which has been used to build the editor.) That meant the team could identify and report accessibility problems but had to wait for other developers to fix them.
  2. No-one outside the team who knew both accessibility and React was willing to work for free (not much of a surprise really!)
  3. Accessible code was changed later to inaccessible code during development.
  4. There was a lack of keyboard testing before implementation of components.

In Rian’s resignation post, she agreed with her fellow team member Andrea Fercia’s view (emphasis mine):

While the Gutenberg team has worked hard to implement some fundamental accessibility features (e.g. focus management, navigate landmark regions), the overall user experience is terribly complicated for users with accessibility needs at the point the new editor is barely usable for them.

The main reason for this lack of overall accessibility is in the overall Gutenberg design, where accessibility hasn’t been incorporated in the design process.

Feedback from accessibility users has been constantly evaluated and Gutenberg is actually a regression in terms of accessibility level, compared to the previous editor.

Accessibility team view of the Gutenberg editor in October 2018

Joe Dolson wrote on 29 October 2018, representing the views of the WordPress Accessibility team (again, emphasis mine):

The accessibility team will continue to work to support Gutenberg to the best of our ability. However, based on its current status, we cannot recommend that anybody who has a need for assistive technology allow it to be in use on any sites they need to use at this time.

Accessibility audit status

There hasn’t yet been an independent accesibility audit of the new editor.

Automattic (WordPress.com’s parent company) pledged to do one in October 2018 but later pulled out. (Story: Gutenberg Accessibility Audit Postponed Indefinitely.)

WP Campus have announced their own accessibility audit, scheduled for January 2019. They have been fundraising to meet the cost, but have just announced that Automattic will be plugging any gap in donations:

How does the new editor measure up to the seven principles of user experience?

Seven principles of user experience - useful, usable, desirable, valuable, findable, credible, accessible
Peter Morville’s User Experience Principles

The seven principles are:

1. Useful

There’s no question that the editor is an essential part of WordPress.

We do know that over 700,000 people have tried Gutenberg. 600,000 have installed Classic Editor.

Is Classic Editor being installed because users are testing, or because they don’t want to use Gutenberg? It’s unclear.

2. Usable

A number of people have commented that the new editor is “not intuitive”.

Many people who are users of the pre-WordPress 5.0 editor have compared it unfavourably with the older editor.

Another issue is that as of launch date, the official documentation is not yet online.

3. Desirable

The Gutenberg plugin has received mixed feedback and the majority of those who have reviewed it seem to love it or hate it. The second camp seem to be in the majority for now.

Here’s a Gutenberg five star review:

I put off using Gutenberg until now as I wasn’t ready for the change. I finally installed it on one of my blog sites and I was pleasantly surprised.

I found it relatively easy to use and navigate the various options. I love the blocks system and creating attractive blog posts has never been easier.

And a Gutenberg one-star review:

I’ve used large numbers of web and text editors and word processors over many years, some with very arcane interfaces. WordStar, for example. Norton Editor. Programming editors. Various HTML editors. You name it.

None of them were as obstructive to the writing process as Gutenberg. None. It was the absolute worst editing experience ever. And this is for a task (text editing with the option of inserting a few other things) that has basically been a solved problem for many years. You’ve solved a problem that didn’t exist, and you’ve created a different problem that also didn’t exist.

From what I can see, the reaction in the developer community seems reasonably optimistic. Much of the negative feedback is related to the timing of the release date of WordPress 5.0 rather than a dislike of the editor itself.

4. Findable

One of the criticisms of the block editor is that elements are hidden. This is somewhat ironic as this is a problem that the new editor was designed to solve.

For example, the “Remove Block” control is hidden under a three dots menu in the block toolbar. Presumably this is so it isn’t clicked on by accident, but it does require discovery.

Remove Block

As another example, the permalink controls have been duplicated in the Document Settings sidebar as not everyone could find them.

5. Accessible

The commitment to making the editor accessible is there, and the Accesibility team have worked hard, but the editor is not ready.

One problem is that accessibility wasn’t factored in from the start. It’s always harder to retro-fit accessible features.

The accessibility audit will reveal more work to be done, but that’s a couple of months away from now.

6. Credible

Credibility equals trust. Some users have been turned off by early bad experiences with the Gutenberg plugin. They may not come back.

Others  – particularly those new to WordPress – might be happy to use and recommend the new editor, since they don’t have a previous version to compare it to.

7. Valuable

Again, we will have to wait and see how valuable the block editor is to the WordPress project.

If the launch is a success, WordPress could increase its market share from the current 32% of all websites.

Plugin and theme developers have done a lot of preparation for WordPress 5.0 and the block system opens up some intriguing possibilites to build custom blocks.

What can you do to make the block editor better?

Leave feedback on the WordPress.org forums.

Join one of the Make WordPress.org teams: relevant ones include Accessibility, Core, Design, Documentation and Support.

Raise a GitHub issue if you have a GitHub account.

Presentation slides

I provided the slide link on SlideShare (see below). If you want to see the interactive demos, you’re better off downloading and playing back the PowerPoint presentation.

  1. View slides on LinkedIn SlideShare
  2. Download The User Experience and Accessibility of Gutenberg slides (PowerPoint, 15MB)

Looking for the talk video?

One day the presentation should be on wordpress.tv or YouTube. You might have to wait a while. 😀

What do you think?

What’s your experience with the WordPress block editor? Have you tried it in one of the beta versions or are you using it now? Let me know in the comments what you think of its user experience.

Category: Accessibility, WordPress Tags: , , ,

About Claire Brotherton

Freelance web designer and front end developer based in Edinburgh, Scotland. I love WordPress, code, learning and blogging.

Reader Interactions

Comments

  1. Johanna says

    Hi Claire,
    I haven’t updated to 5.0 and have not tried the new Gutenberg editor yet. Is it a good idea to install the Classic editor plugin before I update to 5.0? In case the Gutenberg editor doesn’t work well with my theme.
    Or can I do that also after the update?
    Thanks. Johanna

    Reply

    • Claire Brotherton says

      Hi Johanna

      It’s really up to you. You can add Classic Editor before or after updating to 5.0.

      Or you can hold off updating for a while – as far as I understand there aren’t any security fixes in the latest version, so it’s perfectly fine to leave it for now.

      Good luck!

      Claire

      Reply

  2. Mieke says

    Hi Claire, I hadn’t even considered the accessibility issues with Gutenberg. Thank you for pointing this out and delving so deeply into this.

    As someone who has worked in content publishing for decades, the rise of block editors has really come as a shock to me. In my work there’s always been the tension between what developers, who build a site and then check out except for the standard updates here and there, think is a great idea and usability for end users in the form of content managers working in a CMS every day. This round goes to the developers, and block editing is a huge BLARGH for daily content management.

    I’d been working at a startup who forced block editing onto me (they were Drupal based so I thought block editing was coming at me from the Dark Ages), and was relieved to leave that job and go to a job with a site running on WordPress. So I was shocked to find WordPress is now also switching to block editing.

    I think for developers designing a website block editing is great, but for content management it is terrible. It delays and complicates workload immensely. A lot of people write IN the editor and you cannot get a good writing flow if you need to add new blocks as you go along. Also the immensity of the types of possible blocks to use is incredibly overwhelming and confusing if you’re just trying to write a post and add some pictures. Really the block editing shouldn’t replace the classic editing system, it should exist alongside it and I think that’s where WordPress is making a mistake.

    When I had to work with block editors at the start-up it took me up to two to four times as long to post a basic blogpost. It takes up far too much time.

    I really think block editing should be used to design general lay outs and content management (i.e. adding pictures, video, text, etc) should be done from a classic editing format which really no one from my end of the online field had any problems with.

    Reply

    • Johanna says

      Mieke I agree with you.
      I installed the 5.0 version with Gutenberg and tried it out.
      It can be done, but I think for normal wp sites the Classical editor is so much easier. I failed to see the advantage of the Gutenberg editor and probably will go back to the Classical editor.

      Reply

    • Helen says

      The flow issue has foxed me too. I upgraded to 5.0 without realising it was going to be so drastic (silly me, I thought I had to be a good website owner and upgrade as soon as possible to avoid bugs and being hacked), and having each paragraph as a new block is SO ANNOYING for typing directly into the edit box.

      I couldn’t see where the permalinks were at all – it’s amusing/annoying that it’s been duplicated under Document Settings because people couldn’t find it – well where else would it logically be? And where is it other than in Doc Settings?!

      The “information” button at the top left doesn’t tell me anything useful other than, “how many blocks I’m using, how many words, how many paragraphs.” I really DO NOT CARE how many blocks I’m using. In fact, I’d rather not use any at all. I don’t understand why that info is given quite a prominent bit of real estate on the screen.

      I use html a lot and it’s frustrating that it’s more clicks to reach, and I accidentally put a title block in on something and couldn’t for the life of me see how to delete it – that’s buried too far down, I think.

      I’m going to keep trying to use it (in case it’s a matter of a learning curve to get used to it, and once I have, will it be amazing?), but it’s annoying me and everything seems very buried, so I may well go back to the Classic editor. My webpages mostly consist of text plus one or two images so I don’t really need hundreds of blocks.

      Reply

      • Claire Brotherton says

        I’m not a fan of the “new paragraph as a block” decison either. I think that might be one of the most frustrating things with the new editor. At the moment, I’m sticking with Classic Editor myself. I really can’t face selecting and moving multiple blocks in a blog post yet.

        I’m putting together a new post on what’s changed and moved, as I think that’s thrown a number of people.

        Ironic, too, that more UI elements seem to be hidden than before!

        Reply

    • Claire Brotherton says

      Hi Mieke,

      I’d agree with you about the extra time taken and complexity. If you just want to write and add the odd image, the blocks get in the way.

      It’s funny that page builder plugins (which I think the block editor was designed to supplant) don’t force new blocks for new paragraphs, so it’s strange that the block editor is doing that!

      An optional layout editor for creating columns and rows would probably have been more welcome than what we have now. People who wanted to design pages could have done that while those who just wanted to write could carry on as before.

      Reply

      • Steve says

        These have been my concerns as well. It feels as though they’re trying to fix things that aren’t broken or even worse, break things that were perfectly fine. Yes WordPress is so much more than just simple blogging in many ways now, but when you get right down to it the most important thing about it for most users is still the ability to write and publish as quickly and as easily as possible. If your main job is to write, you just want to be able to write. Every post becoming it’s own miniature design project is a perfectly needless and avoidable time suck. The way my processes work, I can’t see where I have any use for Gutenberg or how it will be of any benefit to me at this point.

        And all of that is to say nothing of accessibility. When I was talked into switching to WordPress years ago, accessibility was a major selling point. So now to hear key decision makers say essentially that accessibility doesn’t fit into the release timeline and that if this is a concern to anyone that those people are missing the bigger picture is disappointing.

        Perhaps one day, Gutenberg will be wonderful and we’ll all hardly remember having all of these discussions. But that day is not today.

        Reply

        • Claire Brotherton says

          Hi Steve, those feelings echo my own. The blocks are a hindrance for writers.

          I guess you can use the Classic block and the experience isn’t too different, but I still don’t like it as much.

          Accessibility really should have been factored in from the start. I hope that it gets the attention it deserves in Phase 2. It will be interesting to see what issues come up in the the WP Campus audit.

          Thanks for commenting,

          Claire

          Reply

  3. Panda Gila says

    I was surprised and confused the first time I use gutenberg. It’s really a drastic change. So, while I have one WordPress editor with gutenberg, I also stayed with classic editor for my other sites for a moment. By the time, I enjoy the new editor. It’s working smooth & cool

    Reply

    • Claire Brotherton says

      I’m glad the new editor is working for you – the team are working hard to improve it. I still haven’t quite got on board with it yet.

      Thanks for taking the time to comment.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

potted cactus and laptop with code