Updated 15 October 2017.
What is Gutenberg?
Gutenberg is the new WYSIWYG editor for WordPress, currently in development.
Gutenberg is now available as a plugin for testing, with the intention that it will enter WordPress Core in version 5.0 as a replacement for the existing post editor.
It will be the biggest change to the WordPress editor in some time – perhaps ever. The Gutenberg editor is intended to resemble the editor for Medium.
Gutenberg is based on the principle of creating posts through “content blocks”. These blocks could be headings, text, images, blockquotes, videos, tweets or other content.
I was interested in trying Gutenberg out particularly from an accessibility point of view. In this review, that means for people reliant on a screen reader or keyboard to browse the Web.
This is a “first look” post so I bear in mind that haven’t tested Gutenberg functionality in-depth.
General Gutenberg observations
Here’s an idea of how Gutenberg works from the demo page.
You can see some of the elements of the interface where you can change alignment, text formatting, move a block and delete a block.
Have a look at Cloudways’ post for a Gutenberg how-to with screenshots.
I’m not sure why starting a new paragraph starts a new block. I could see this getting really cumbersome after a while. Imagine when there are 20 blocks on a page and you want to move them around!
There’s no option to change inserted image sizes as yet.
Blocks can be moved by up/down arrows visible on hover on the left of the block. But if you make an image the fullscreen width, you lose sight of the up/down arrows to move the block around.
There’s a lack of feedback for certain operations e.g. Deleting a block.
Keyboard accessibility
Tab order
Tab order was strange, I thought. Tabbing through the Gutenberg editor normally went from one block to the next. If I wanted to access the controls for a block I found myself Shift-Tabbing backwards through the options. Not that intuitive.
The focus indicator could have been stronger on certain items like the Save link (it turns from blue to grey when focused upon). This doesn’t stand out enough.
Keyboard focus
Certain elements were not focusable – in other words, inaccessible by keyboard. Some of these are:
- Discussion: The settings in the Post Settings panel, Discussion section. I could open the section but not toggle the settings on and off.
- Status and Visibility: The panel opened, but focus remained there and did not move to the radio buttons. Normally on a form, using the up and down arrows would move the focus up or down the individual radio buttons. All they did, in this case, was move the scrollbar in the side panel. Consequently, I couldn’t choose one of the options and change the visibility to Private or Password Protected.
- Publish (date and time): Unfortunately, the calendar wasn’t focusable at all. Only a mouse user could change the date. However, I could change the publish time and select between AM and PM.
Problems with inserting blocks
I started testing Gutenberg version 0.2 and later updated to version 0.3 – the current version at the time of writing. In version 0.2 all the blocks were in the one panel and could be tabbed through.
The Insert icon in 0.3 now opens a panel with a Search at the top and 3 tabs (actually marked up as buttons). The tabs list the available blocks in three sections – Recent, Blocks and Embeds.
For the average user, this looks quite sane – keep the panel compact and minimise the options. The problem is that for a keyboard-only user’s POV it just doesn’t work. I found I could only tab through the Recent options and choose one of them, which left me with just 7 options of content to add.
I couldn’t get to the Blocks or Embeds at all with the keyboard. In fact, I got stuck on Cover Image and tabbing further did nothing. The only option was to use the Esc key to leave the dialog.
The search filter worked equally badly. Searching for a component I knew to be there (button) showed me nothing – not even a “block not available” message. It would have shown the button in the Blocks pane, had I been able to get to it with the keyboard.
This makes the Insert button less accessible than in Gutenberg’s previous version, which is really not acceptable.
Need for a skip link
There needs to be an option to go back to the start of the Gutenberg interface when you get to the end. At the moment, a lot of tabbing is necessary to do so.
Screen reader accessibility issues
I tested with VoiceOver on Safari, macOS Sierra.
I would have expected some auditory feedback at certain points e.g. saving (unless they later change Gutenberg to autosave).
It was possible to access the Blocks and Embeds that I couldn’t get to by keyboard, but only in a convoluted way. I had to go to the Insert button and enter the dialog, then go to the Form Controls Menu in VoiceOver and select the Blocks button or Embeds button. Then I was able to tab through the controls and select one. Not intuitive at all!
I could save a post okay, but couldn’t Publish it! I got stuck on a text element trying to do so.
Update: Testing again with Gutenberg 0.4, it is possible to publish a post with VoiceOver. Tapping the Enter key will publish, and Esc will cancel the operation.
One thing I was able to do with VoiceOver but not keyboard was to toggle the checkbox controls on and off e.g. Pending review.
Update: the controls are able to be toggled by the keyboard using the space bar. But the lack of a keyboard focus style makes it look as though they are not triggerable by the user.
I had the same problem accessing the date picker as with the keyboard. In this screenshot the focus is actually behind the date picker and on a button.
Thoughts
I know that Gutenberg is still in active development and changes are coming thick and fast, but I’m worried that it might not be in a fit state for release in WordPress 5.0.
Certainly, the accessibility issues of Gutenberg have to be addressed. According to the Make WordPress Core Accessibility Coding Standards,
All new or updated code released in WordPress must conform with the WCAG 2.0 guidelines at level AA.
There’s a long way to go to get to that stage. Accessibility is not an add-on – it needs to be factored in from the start.
My feeling is that the original post editor should remain an option for users since it is tried and tested.
Update: it looks as if the current post editor will remain in some form. In this reply to a comment on a blog about Gutenberg, Matt Mullenweg said:
Gutenberg uses TinyMCE, so a better way to think of it is that Gutenberg is a new version of our approach to TinyMCE. It will the default experience of WP, for people that want to use something more like what’s currently there we’ll have a plugin they can use. [emphasis mine]
What others think
Gutenberg has proven Marmite to those who have left a review on WordPress.org. Most love it or hate it. Not many are neutral.
Several sites have reviewed the Gutenberg plugin.
Kinsta’s Gutenberg review says:
Overall we were quite impressed with the new Gutenberg WordPress editor, it’s definitely something we are excited about for the future.
Amanda J Rush, a WordPress developer and screen reader user, was not impressed by Gutenberg.
Right now I’m thinking of what it would be like to write one of the WordPress with a Screen Reader posts in this and I want to just crawl under my desk and never write again. I’ve lived in the WordPress dashboard daily since 2005, and I’m finding this really frustrating. I can see someone new to WordPress who uses a screen reader just giving up on this.
Josh Pollock, writing for TorqueMag about Gutenberg, says:
Clearly there is a demand for an editor that is more expressive then what we have now. Divi, Beaver Builder, and all the other page builders prove that. But is our goal standardization? Can there be one true editor that replaces all of those page builders because it solves the needs of tens of millions of sites?
WPMU Dev’s Gutenberg review sums up by saying:
While the developers working on the Gutenberg editor plugin have obviously put a lot of work into creating the plugin and I commend them on their efforts so far, the truth is, this plugin is nowhere near ready to be included in WordPress and needs a lot more work, in particular, UX work.
It’s important to note that these are reactions from developers.
What do everyday users think? We don’t really know yet.
Have your say
WordPress developers
A number of Gutenberg issues have been raised on GitHub.
I haven’t read through the list in full – there are 15 pages!
Some of the problems I noted have been raised already.
Andrea Fercia has highlighted the inaccessibility of the date picker and also the issue navigating between the sidebar and blocks.
The Make WordPress Accessible team are particularly keen to get feedback on Gutenberg from accessibility experts, whether they use WordPress or not.
Are you an #accessibility expert? We need your help to improve the new WordPress Gutenberg editor. Please RT! https://t.co/iOrsGlvfTI
— Claire Brotherton (@abrightclearweb) July 5, 2017
WordPress users
Here’s an article on getting started with Gutenberg and how to submit feedback.
It’s really important that everyday users get their say, as they will be the majority of the user base when Gutenberg is ready for launch.
So I encourage you to try the Gutenberg plugin out and send your feedback. Just don’t try it on a live site!
Very informative post, thanks for sharing
Involvement of Gutenberg in the WordPress Core will bring a revolutionary change in the functionalities of WP. It will be of great help to non-technical people who try to stay away of codes for customization. It will even make it easier to customize the look and feel of website. Thanks a lot for sharing such helpful information.
That’s the hope with Gutenberg. We’ll have to see what happens when it launches.
Thanks for commenting.
I’ve long wondered if the trend toward page builders would do this to themes as well. With most modern page builders, often the best theme is more like a vanilla theme with little styling to interfere with the page builder generated pages and templates.
Basically each page has its own design, top to bottom, that overrides any theme styling anyways. Taken to its logical conclusion, themes would become obsolete.
That said, I don’t have the impression that Gutenberg goes nearly as far in this direction.
Thanks for commenting.
Yes, some page builders like Oxygen are aiming to be theme-independent; the builder can control elements that have been traditionally theme terrritory, such as headers and footers.
I agree that Gutenberg isn’t a fully-fledged page builder yet. It’s heading in that direction, but is nowhere near as mature the existing page builders on the market.