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:
It seemed to go down pretty well with attendees. Here’s a couple of tweets:
Big #accessibility challenges with the new #WordPress editor. A lot of noise about the new rebuild writing experience #gutenberg but I believe huge process was done the last pass months. @wcedin #wcedin #WCC2018 pic.twitter.com/xRzVxclvZ1
— Fellyph Cintra (@fellyph) November 17, 2018
— Indigo Tree (@IndigoTreeSays) November 17, 2018
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?
- What makes a great editor?
- What problems does the existing editor have?
- What’s the aim of the block editor?
- What have users thought of Gutenberg as a plugin?
- What are some of the criticisms and concerns with the new WordPress 5.0 editor?
- How has accessibility been handled with Gutenberg?
- What has improved in the Gutenberg editor’s accessibility?
- 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?
- How does the new editor measure up to the seven principles of user experience?
- What can you do to make the block editor better?
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.
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.
- 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.
Here are some reviews of more recent versions:
- David Bisset, November 2018, high school students: Gutenberg And Youth (“Generation Z”)
- 10up, June 2018: User Testing Gutenberg
- 10up, November 2018: Testing the Gutenberg Publishing Userflow
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:
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.
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
My thoughts on WP 5.0 thus far have been pretty much compose tweet, delete. I said months ago it was being rushed out the door for WordCamp US. Everything since then has been lip service while moving towards that goal. The “community” never really had a say in the schedule.
— Carl Hancock 🚀 (@carlhancock) December 4, 2018
WordPress 5.0 launching December 6.
The real-world implication of this extremely poor timing for hundreds of people, is a wasted trip to Nashville for WordCamp US, because they will be working the entire time instead of celebrating & enjoying each other’s company.
— ʝ³ (@JJJ) December 4, 2018
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 honest truth: WordPress 5.0 is not ready, and neither is ACF. Hats off to all the amazing web developers working on updates to their plugins, themes and client projects when they should be enjoying some well earned time off with family and friends. ❤️👨💻👩💻
— Advanced Custom Fields (@wp_acf) December 4, 2018
- 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.
- Version 0.2: Accessibility testing WordPress Gutenberg – a first look
- Version 1.4: The Evolution Of Gutenberg – Has It Improved?
- Version 3.9: Time To Try Gutenberg? Introducing The New WordPress Editor
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.
- Searching for blocks – improved.
- Date picker – was inaccessible to keyboard users, now accessible.
- 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?
- Still a lot of keystrokes required to achieve tasks.
- Some controls hidden away and less discoverable.
- Different toolbars used to manipulate block content.
- Multiple scrollbars in some circumstances.
- Unexpected behaviours e.g. images always insert full size.
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:
- Keyboard accessibility and semantics were sub-optimal.
- At that time the team view was “Gutenberg is a dramatic step back in usability”.
- 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:
- No-one outside the team who knew both accessibility and React was willing to work for free (not much of a surprise really!)
- Accessible code was changed later to inaccessible code during development.
- 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:
— WPCampus at #WCUS (@wpcampusorg) December 5, 2018
How does the new editor measure up to the seven principles of user experience?
The seven principles are:
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.
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.
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.
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.
As another example, the permalink controls have been duplicated in the Document Settings sidebar as not everyone could find them.
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.
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.
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.
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.
- View slides on LinkedIn SlideShare
- 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.