With the release of WordPress 5.0, the editor experience (one of the main features that drew people to WordPress) has undergone a pretty radical evolution. The new “Gutenberg” editor changes the types of things that you can do as an author in WordPress that, up to now, you’d have to switch over to an HTML editor and write your own markup, or pay someone to build custom content types to accomplish the various layouts that you want.
It’s worth noting that Gutenberg editor is also available as a Drupal module. While you’re over there in Drupal land, perhaps take a look at Elementor which is billed as a “different way to build landing pages, and experiences with Drupal” and also comes to Drupal from the WordPress community.
What Has Changed?
A lot, really. In previous versions of WordPress, if you wanted to embed different types of media (YouTube videos, Spotify audio, tweets or Facebook posts, etc.) you likely would have had to install a plugin. The ability to add these types of blocks is now built in to the editor. Historically, multi-column layouts were also tricky to pull off without forcing authors to switch into HTML view, but are now very simple.
When creating a new post, users of Gutenberg are presented with a brand new, quite spartan, editor:
From here, creating a new post is fairly simple. Just start typing like you always did. If what you are doing is simply creating plain content then things will feel pretty familiar. Basic formatting tools are available when you move your mouse anywhere in the editor and consist of the usual cast of characters. Formatting tools also appear if you are typing and you press [SHIFT+TAB] to cycle up, backwards, through the tools, or if you select any text in your post by any method (drag with mouse, or [SHIFT+CTRL+up arrow] with your keyboard.
Building Pages with Blocks
In addition to the modest changes to the content editor, you can now build pages with blocks. These blocks can be plain content, the embedded widgets described earlier, formatting and layout, as well as others. The really cool thing about these blocks is that they can easily be reordered on the page, providing more bulletproof ways to arrange and lay out your page all within a single page authoring experience. To add a new block, hover and click the [+] sign icon. I have not yet figured out how to accomplish this with keyboard navigation.
For you old-timers, one of the new blocks available is “classic” which allows you to add content using the old pre-Gutenberg editor. If you edit posts created before the Gutenberg update, you will see content in this type of block.
WordPress has provided a very nice overview of the features and block types available with Gutenberg.
While Gutenberg arrives with a really good selection of blocks, it is possible that you will want to add a block that it does not provide. Fortunately, WordPress has provided us with a Block API and the ability to create custom blocks.
So, now more about that keyboard navigation I mentioned a couple of times. Is the Gutengerg editor simple for EVERYONE?
The Accessibility Debate
For months there has been a lively debate over the implications of the new editor on accessibility. It’s a reasonable thing to look at since it is the way that people will create content on their sites and anyone with specific needs regarding accessibility will need to be aware of any changes in their experience that the new Gutenberg editor brings.
Obviously, when a user experience is updated to make many more things available via some sort of “click and go” or “drag and drop” interaction, you have to ask the questions “How do you click?” and “How do you drag?” If the answers to those questions is “Why thank you for asking, I click by using my voice to tab to a link and then use a voice command to click it,” or “How kind of you to ask, I cannot drag on web pages. Dragging requires a level of fine motor control that, due to how my body works, I simply do not have” then a developer is faced with one of three options:
- Make the “drag” action something that can be accomplished by assistive technology.
- Give users another way to accomplish the same thing.
- Look at analytics, determine that only a small number of people are affected, and accept that their needs will not be served.
I hope that we can all agree that the first two options are the only real choices. Especially if we accept that meeting the needs of all users is really good for all users and not just the ones who would otherwise be adversely affected.
Matias Ventura, a developer at Automattic and WordPress Core Contributor, has weighed in on the debate finding, perhaps not surprisingly, that they are pleased with themselves in this area.
There are bugs, of course, and rough edges to still address. From release to release these have been refined and iterated by many people and I want to thank all of them for their hard work. There are about 270 tickets closed specifically labeled “accessibility,” and around 90 more that remain open, so we still need your help. The goal is to make this experience as seamless as possible for all users, so if you are encountering an issue, please share it so it can be addressed.
In contrast to this assertion, Rian Reitveld, the WordPress Accessibility Team Lead, resigned in October with a fairly pointed startement regarding their concerns that accessibility issues were being ignored. This followed up their post half a year earlier outlining concerns.
The short answer is:
- Gutenberg still needs extensive work to meet basic standards, like keyboard accessibility and semantics.
- Especially for screen reader users, Gutenberg as it stands right now is a dramatic step back in usability.
- We need to write a manual/documentation for assistive technology users.
Even Matias’ take leaves it clear that there are accessiblity issues remaining. You can see what issues are currently being tracked in some way (as well as open issues of your own!) at the WordPress GitHub. Here are the current issues labeled “accessibility” https://github.com/WordPress/gutenberg/labels/Accessibility
Will This Update Break My Site?
The short answer is, “probably not.” But it could change how you start authoring content. If you had special content types that you used to pull off certain layouts, you may find yourself instead using the editor to do the same going forward. Your content will all be there after the update and *should* appear the same as it always has. If, after updating, you go to edit an existing post or page you will (as described previously) see your content wrapped in an editor labeled “classic” and you should be able to edit as you did in the past. Just be aware that, depending on the content types and any shortcodes you may be using now to lay things out, there could be hiccups.
Can I Get It Without Updating to WordPress 5.0?
You can install the Gutenberg plugin in older versions of WordPress. But you’re not using an old version of WordPress, are you? In the interest of security, it’s best to keep your WordPress up to date.
Can I Opt Out?
If you want to update to the newest version of WordPress but are not interested in using their new editor, you can always install the classic editor plugin.
The new editor is certainly a sea change for the WordPress authoring experience. For some, it will provide tools long lacking and allow for some very exciting layout options. For some, it will provide a confusing, difficult, or even impossible to use authoring experience. But for all of us, it’s a change.
Even a seasoned WordPress user like myself quickly got into a layout connundrum that was difficult to drag my way out of when first experimenting with the new editor.
Sources and other interesting articles
- WordPress 5.0 “Bebo” (wordpress.org)
- Diving Into the New Gutenberg WordPress Editor (Pros and Cons)
- Regarding Accessibility in Gutenberg (wordpress.org)
- Gutenberg With A Screen Reader: Initial Thoughts And Reactions (customerservant.com)
- Accessibility of Gutenberg, the state of play (make.wordpress.org)
- I have resigned as the WordPress accessibility team lead. Here is why. (rianrietveld.com)
- Why Web Accessibility is Important (medium.com)
- Why Designing for Accessibility is Simply Good Business (digitaldesignstandards.com)
- Why Designing for Accessibility Helps Everyone (blog.ai-media.tv)
- 3 Reasons Why Accessible Design Is Good for All (interaction-design.org)
- Gutenberg Editor Technical Overview (make.wordpress.org)