Summary (TL:DR because let’s face it, we’re all busy…)
- With WordPress’s 5.0 release, the content editing interface is being updated to a block-based, drag-and-drop tool codenamed “Gutenberg”
- Gutenberg offers significant improvements in flexibility and power for WordPress authors in the creation of pages and posts, similar to add-on editors like WP Bakery, or competing site-builder platforms like Squarespace and Wix.
- For WordPress authors that prefer (or require) the classic editing interface, the Classic Editor plug-in can easily be installed.
- Gutenberg represents a major step forward for WordPress, but currently falls short in terms of accessibility compliance. It is not yet ready for use with assistive devices.
In the month for resolutions, fresh starts, and changes big and small, we’re taking a look at a big change rolled out in the latest major update of WordPress. The release of WordPress 5.0 in December introduced a new editing interface called Gutenberg. Named after Johannes Gutenberg, whose movable-type printing press sparked the mass-production of books and newspapers, this editor is intended to revolutionize webpage editing for WordPress content authors. Given WordPress’ market share of 32% of websites worldwide, that’s a lot of authors. If you’re a member of that club, here’s what you need to know.
What Is Gutenberg?
Gutenberg replaces the familiar What You See Is What You Get editor window—casually known as WYSIWYG—with content blocks. With the classic WYSIWYG editor, you have one big block to enter your text, inline images, video embed code from YouTube, etc. With Gutenberg, each of those things is its own smaller block that you can drag and drop to arrange on a page. For example, each of these common page features exist as their own content block:
- Text
- Lists
- Headings
- Images
- Video Embeds
- Buttons
- Quotes
- …and more
Take a look to see how the old and new WordPress editors compare:
The new Gutenberg interface:
Why Is This Change Happening?
WordPress isn’t just replacing one feature with another here. Gutenberg is the first step in a major shift in how sites will be made with WordPress. This shift follows a change in the types of content people are publishing on the web. The old WYSIWYG was great for working with large blocks of text, like articles. Now, websites are more multimedia-heavy. Adding images, video embeds, and other elements in a WYSIWYG can be a pain, and you may need to know a little HTML to get the formatting and styling right. It’s also difficult to replicate the same page elements throughout a site without using custom page templates or post types.
An alternative concept of building pages with drag-and-drop blocks has been available for years in some themes and plugins, such as WP Bakery. Known as page builders, these tools make it easy to add pre-defined but customizable blocks to a page and, if needed, to save that page as a template to reuse throughout the site. Other website platforms such as Wix and Squarespace work on this concept as well. Gutenberg is, in part, WordPress’s response to the widespread adoption of these alternative editors and site-building platforms.
Although Gutenberg is a great first step towards a native page-builder experience, it’s not yet quite as flexible as add-on page builder tools—it doesn’t yet offer a library of pre-built page templates, for example. The team behind WordPress has signaled that more changes in the future will eventually make it easier to create complex page templates in the native platform.
Sounds Good So Far. Can (and Should) I Use Gutenberg?
Gutenberg is built into the core WordPress 5.0 release, so sites will be updated to it automatically. (As always, we strongly advise keeping sites up-to-date—you always want the latest security updates!) However, the Classic Editor Plugin can be installed to keep the old interface as long as the plugin is supported. Currently the plugin team plans to support it through 2021.
For many users, especially those new to WordPress, Gutenberg will likely be a welcome change. The concept of using smaller content units to build out a page is intuitive. The page you see while editing in WordPress will look more like the page on the live site. Also, the ability to create and place reusable blocks throughout the site—and see a change to one of those blocks automatically reflected in the others—will simplify updates to commonly used elements.
Experienced WordPress users on the other hand may need some time to get used to the new interface. Explore the official demo tool to get a feel for it.
Website owners already using a page builder tool on their site may find Gutenberg duplicative. Page builder tools will continue to work, if the tool is being actively maintained by its creators. You may need to update plugins and themes to the latest versions.
On the other hand, if your theme or plugin hasn’t been consistently maintained by its creators, it may not be compatible. You likely will need to install the Classic Editor and reach out to a partner such as Fionta for help on bringing your site up to date for Gutenberg.
Gutenberg’s lack of accessibility compliance means it’s currently not recommended for those who use assistive devices to edit their websites. Testers have reported that it’s very difficult to navigate the editing interface with keyboard strokes or a screen reader. The team behind WordPress has pledged to address accessibility in future updates, but it’s much harder to tack on accessible features after the fact rather than building with accessibility in mind, so we expect it to take some time before Gutenberg is up to par in this area.
What Next Steps Should I Take?
Check with your host or web vendor to find out if you have been (or will be) updated to WordPress 5.0. Some managed hosts will automatically apply CMS updates to your site, so be aware—if one day your editor looks different, or your page builder tool no longer works, your WordPress version may have been updated. If so, getting your themes and plugins updated or installing the Classic Editor plugin should set things right.
From there, explore the new editor on the official demo site. Dive deeper with these WordPress.tv Gutenberg posts. And, if needed, have your developer or web development partner install the Classic Editor plugin.