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.

 

  • Google+
  • Facebook
  • Twitter

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.

  • Google+
  • Facebook
  • Twitter

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.

  • Google+
  • Facebook
  • Twitter

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.

  • Google+
  • Facebook
  • Twitter

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.

 

  • Google+
  • Facebook
  • Twitter

Alternately, you’ll find a new menu item called Gutenberg, just below settings.

  • Google+
  • Facebook
  • Twitter

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.

  • Google+
  • Facebook
  • Twitter

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.

  • Google+
  • Facebook
  • Twitter

 

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.

 

  • Google+
  • Facebook
  • Twitter

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.

  • Google+
  • Facebook
  • Twitter
  • Google+
  • Facebook
  • Twitter

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’
  • Google+
  • Facebook
  • Twitter

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.

  • Google+
  • Facebook
  • Twitter

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.

  • Google+
  • Facebook
  • Twitter

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.

  • Google+
  • Facebook
  • Twitter

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!

Previous post
Next post

9 Comments

  1. Hector

    Great Info
    Thanks for your work

    Reply
    • David Blackmon

      You’re welcome Hector!

  2. Alan

    Thank you. Appreciate your post.

    Reply
    • David Blackmon

      Thanks Allen, and you’re welcome.

  3. Luke Cavanagh

    Gutenberg UI and UX is still really weak.

    Reply
    • Cory Jenkins

      totally agree Luke… I have a feeling it will improve quite a bit in the next few months

  4. Anton

    I’m beginning to understand that it’s yet another page builder. How is it compatible with other themes? Does it leave artefacts just like Divi’s shortcodes?

    Reply
  5. Roger

    I think this is a great post, in part because it clearly let’s people know what the features are, what they’re for, and where they are. I’d recommend this post to anyone interested in Gutenberg.

    I did try using Gutenberg (the plugin), and this post was bang on about everything; a VERY useful post! 🙂

    Gutenberg itself, not so much… It was not very practical or user friendly (and this is a clear opinion, not a statement of fact). I’m concerned how this will impact the Divi theme? I do not use Divi’s visual editor (for me it’s a nightmare to use), instead I happily, and speedily love work using Divi’s “Divi Builder”, within WP Admin Backend Divi Builder = Fast efficient, practical.

    I find that Divi’s front-end visual editor, options within options to drill through is frustrating; and it seems Gutenberg is similar with options that are found by clicking through, it was a steeper learning curve as well (I found Divi Builder quicker to grasp).

    I understand from a lot of online discussion that apparently Gutenberg will be merged into WordPress core? If so, I hope it’s an optional feature (or better still, maybe add this as an optional feature of Jetpack).

    More so, ultimately how is this going to effect Divi code and functionality (and Divi development)? Divi “blocks” within the new WordPress blocks? (I’m not a WP developer, which leads to a bit of concern, and likely some confusion).

    Finally, (any concerns about Divi editor compatibility, et al aside, in my opinion Gutenberg seems more for people who are focused on content creation, blogging, journalism, etc., not a CMS that many of us use it for.

    Between the lines, I can assume that WordPress perhaps is trying to attract more users. The problem, cater predominately to one sector, results in a mass exodus of others. Hence, it would be better to have this as an optional feature, so as to encourage more (and different) kinds of users.

    Reply
    • Trixie

      Hi Roger, it seems that, from the recent articles released, Gutenberg will be part of WordPress 5.0, not an optional feature.

      We think there are two ways to move forward and include new users: (1) for plugin and theme creators have to make sure that they are compatible with the blocks (that means re-writing their codes as soon as the final version of Gutenberg has been released to the public); or (2) to release a Gutenberg addon that can extend its current capacities, while waiting for WordPress 5.0.

      From our end, we went with Option 2 (while waiting for the final version of Gutenberg), and released our first batch of Gutenberg addons — Stackable: Ultimate Gutenberg Blocks. This plugin adds 23 Gutenberg blocks in a single install (some of which are separators, icons, bars, etc.). You can check it out here: https://wordpress.org/plugins/stackable-ultimate-gutenberg-blocks/

Submit a Comment

Your email address will not be published. Required fields are marked *