The WordPress Gutenberg Editor – A Comprehensive Overview

The WordPress Gutenberg Editor – A Comprehensive Overview
2018 will see the release of WordPress 5.0. With this massive update comes the highly contested release of Gutenberg, an all-new ‘block’ based editor that is intended to revolutionize the WordPress publishing process.

In this post, we’ll discuss the new Gutenberg editor and give you an overview of its basic functions.

Gutenberg is currently in development and is available as a testing plugin that you can try out at any time. If you’re curious Gutenberg, we recommend downloading the plugin and playing around with it. The plugin is not for use on live sites so only use it in a testing or development environment. If you need to set up a testing environment, follow our DesktopServer set up tutorial or read Elegant Themes’ MAMP set up tutorial.

For a full breakdown of the Gutenberg editor, as explained by Matt Mullenweg and demonstrated by lead Gutenberg developer, Matias Ventura, watch Mullenweg’s State of the Word address from roundabout 33 mins onward.

Also, check out Episode 62 of Divi Chat, where some of the best Divi minds come together to discuss their first impressions of the Gutenberg editor.

What is Gutenberg?

“The goal of the block editor is to make adding rich content to WordPress simple and enjoyable.” – From the Gutenberg plugin description on WordPress.org.

Gutenberg is a new editor that intends to replace the current WYSIWYG editor found in WordPress’ pages and posts.

For ages, WordPress has used TinyMCE as the WYSIWYG page or a post editor interface.

 

By offering both visual and code-based content publishing, TinyMCE gets the job done, but as other competitor platforms, such as Medium or Squarespace, offer a more interesting and unique content publishing experience, WordPress is sort of left behind in this regard.

To offer its users a more engaging and enjoyable contemporary content writing and publishing experience, Gutenberg was introduced.

Essentially, Gutenberg operates like a page builder of sorts. Using a number of ‘blocks’ Gutenberg allows the user to add a desired content block and customize it right from within the editor console. These ‘blocks’, that range from paragraphs to images, video embeds, tables and more, are various forms of content that can be inserted into a post and customized immediately.
Named after Johannes Gutenberg, the inventor of the printing press, Gutenberg aims to help replace the need for shortcodes and custom HTML by using the blocks that can be added and edited pretty much exclusively visually. Not only can blocks be inserted and customized incredibly easily, but also arranged incredibly easily too.

“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

The intention is to streamline the WordPress content publishing experience and make it both lighter and more enjoyable for its users. With Gutenberg, WordPress users will be able to create beautiful page or post layouts both quickly and easily, and without getting distracted by configuration settings.

Enough theory, let’s see what Gutenberg is like in practice.

An Introduction to the Gutenberg Editor

As mentioned above, Gutenberg is currently available as a plugin that can be downloaded from the WordPress repository. The plugin is NOT for use on a live site, it is still very much in development and should NOT be used on a live site.

If you’re keen to check out Gutenberg, play around with it on a testing or development site. Follow one of these detailed guides for how to set up a local testing/staging site:

Once you’ve got a local/testing/staging site set up and ready to go, head over to the WordPress repository and download Gutenberg.

As with any other plugin, navigate to Plugins > Add New and upload the .zip folder. Once the installation is complete, navigate to Posts and click Add New. A drop-down menu will appear, asking whether you’d like to use the Classic Editor or Gutenberg. In selecting the Gutenberg editor, you’ll start with a blank canvas and can start building your post from scratch.

Alternately, you’ll find a new menu item called Gutenberg, just below settings.
If you’d like to read more about the Gutenberg project, click on Documentation and you’ll be sent to the Gutenberg handbook on the WordPress repository. If you’d like to share your thoughts and opinions about Gutenberg, or to ask a support question, click on Feedback. To start playing around with the editor, click on Demo. This will open up an already set up demo post with a number of different blocks already styled and ready to go.
Before we continue, have a look at the two different editors, Classic and Gutenberg, side by side.
The first thing that jumps out is that there’s so much more space to write. Also, as the right-hand side toolbar display shows and hides by clicking Settings (the gear icon), there’s a real sense of distraction-free writing, and Gutenberg almost feels like Calmly Writer in a way. This notion of additional space will certainly help those composing posts on smaller screens.

A drop-down menu on the top right-hand corner allows you to switch between Visual and Code Editing modes. There are also other options such as fixing the edit toolbar and copying all content in one go.

 

In the Settings section, you’ll find two tabs:

  • Document, which lets you set the hardcore settings of the post including its post format and publish status, taxonomies, featured image, excerpt, comments settings and a table of contents (more on the last one later), and
  • Block, which, once you’ve selected an individual block, will pull up the respective settings and customizations that can be made.

 

Blocks can quickly be arranged by clicking on the up or down arrows on the left-hand side. To the right of the block, a menu pops up on hover, bringing up more options for the block. Here the user can choose from an array of different format options. One of these options, Convert to Reusable Block, lets you save block complete with its customization settings to use at a later stage.
Blocks can be added by finding the + icon in the top left-hand corner, or, buy hovering over the top or bottom section of a block and waiting for the + icon to appear. Once clicked you can select from:

  • Recent: A collection of your most frequently used blocks
  • Blocks: Which include Common Blocks (i.e. images, lists, paragraphs), Formatting blocks (tables, pull quotes and preformatted text), Layout Blocks (such as separators/dividers, buttons and text columns), and Widgets (including a latest post or category feed, or shortcodes)
  • Embeds: Options to embed various web elements from a number of popular platforms
  • Saved: Stored blocks, saved by clicking ‘Convert to Reusable Block’
The top menu includes a number of options, including the add block icon, an undo and redo button and various formatting options that display based on the block selected.
One really awesome feature is the Document Outline in the top toolbar as well as the Table of Contents section in the Settings > Documents bar. Both of these break down exactly what the content of the post is so that the writer can access portions of copy quickly, and too, format text that displays optimally for search engines.
Once a block is added, it can be edited and customized using an array of options by using the Settings > Block menu. Each block also includes a section for a custom CSS class. Below is an example of the styling of a paragraph block.
This is just a very basic overview of the Gutenberg editor. Over time, as the project nears completion, there may be more features added, or some taken away.

In its current form, Gutenberg has some awesome features that would certainly make a more contemporary user happy, however, this isn’t necessarily the case for developers and WordPress pursuits.

Even though Gutenberg presents a whole new offering to current and potential WordPress users, and the interface itself certainly satisfies its brief to offer a more intuitive and engaging content publishing experience, there is still a learning curve to the platform and those who are familiar with a more technical approach to content may not take to the new system as lightly.

Nevertheless, Gutenberg is still a while away, so time will tell whether it’ll completely replace the TinyMCE editor, or be offered as an option for content publishing.

Using Divi in a Gutenberg World

While Gutenberg certainly appears rather page-builder-esque in nature, it’s still only scheduled to release initially as a post editor, not an entire layout creator… yet. The release of the Gutenberg editor is intended to pave the way for even bigger, bolder innovations for WordPress, possibly seeing the entire WordPress interface become block-based and visually editable.

“These foundational elements will pave the way for stages two and three, planned for the next year, to go beyond the post into page templates and ultimately, full site customization.” – WordPress.org

A quick point to mention is that the Gutenberg editor feels a little bit Divi-ish as its block entry and customization process almost sort of echoes the front end builder. Divi users, particularly those who have been using the front end builder, may find Gutenberg almost familiar in a way, and as a result, may not have such a steep learning curve when Gutenberg is introduced.

Front-end builder or not, Divi users are naturally comfortable with the concept of creating layouts using heavily customizable modules (or blocks). As a result, Divi users will more than likely find it relatively easy to adopt Gutenberg as an interface.

As Divi users, we’re lucky to have options, so Gutenberg or not, Divi users can still choose to use the Divi Builder for page and post layouts.

Beyond building a site, If you’re a Divi designer who makes websites for clients that need to add and edit their own content, note that Gutenberg has been created to make even more people more comfortable with the WordPress platform, and they’ll probably take to this platform easier than TinyMCE if they’re first timer WordPress users. If you’d like to encourage your clients to publish their post exclusively with the Divi Builder, keep in mind that the front end builder now comes complete with baked-in documentation videos and walkthrough tours to help guide your clients along.

We want to hear from you!

What are your thoughts on Gutenberg? Do you like the new editor interface, or would you prefer to keep the classic editor?

Share your comments or queries below – we love receiving your feedback!

Thanks for reading!