Gutenberg Editor Explained

The WordPress universe has been buzzing for a while now and it’s all because of Gutenberg, not the guy, the editor (the joke had to be made).  There are some big changes ahead of all the WordPress users, some already know what’s going on, some might not, so without further ado, let me tell you the Gutenberg story.

What is Gutenberg?     

In short – Gutenberg is the new visual editor for WordPress. As the current editor tends to be quite difficult to get a grip on, especially for newcomers to website building, and the popularity of page builders is continuously growing, WordPress is trying to offer a better, simpler solution.

At the moment, Gutenberg is available in the form of a plugin, but it’s expected to be the default visual editor of WordPress sometime in 2018.

Gutenberg editor in WordPress

Now, how is it different from the current editor? I’m glad you asked because it’s time for pros and cons!

Pros:

  • Visually uncluttered
  • The introduction of blocks – blocks unify the items like shortcodes and widgets, also they are easier to develop, therefore there are going to be more new custom elements
  • TinyMCE is used only for text blocks and that’s good because of the neverending problems it had
  • With Gutenberg, WordPress is becoming more like the very popular Wix or Squarespace
  • Gutenberg blocks will replace not only shortcodes but also widgets – consider it as a unified mechanism to control all the content and all the parts of your website. Something we really miss in the WordPress right now

Cons:

  • Still, a lot to improve and the improvements could take a while
  • Compatibility issues – a lot of plugins (especially the ones based on shortcodes) need to put in extra work to become compatible with Gutenberg. Almost every WordPress plugin has to change, tweak or adjust something.
  • Gutenberg is ‘sneaking’ into the WordPress area that was successfully occupied by page builders, while still needing improvement in its core
  • Drag and drop feature works more as a sorting mechanism
  • People who are used to working with the classic editor now have to learn how to work with Gutenberg
  • Many unanswered questions, like “what is going to happen with Gutenberg when it’s going to be packed with blocks? Is the performance going to be affected?”
  • The interface is very clumsy in some places. The gap between Gutenberg and mature builders is still very big.

How to install Gutenberg?

As I’ve mentioned before, at this moment you can use Gutenberg only if you download the plugin and there are two ways you can do it.

Through wordpress.org

  1. Go to wordpress.org and find the Gutenberg plugin
  2. Download the plugin
  3. Go to the Plugins section of your WordPress admin panel
  4. Press the “Upload Plugin” button on the upper left
  5. Upload the downloaded zip file
  6. Click on “Activate Plugin”

Through the WordPress Dashboard

  1. Go to your WordPress admin panel
  2. Open the “Plugins” section
  3. Click on “Add New” in the upper left
  4. Type “Gutenberg” in the search bar
  5. Locate the plugin and click on the “Install Now” button
  6. Click on activate (at the same spot)

Gutenberg plugin in WordPress dashboard

As easy as it is to get Gutenberg, do it at your own risk, as it is in a very early stage. What that means is – it is going to change a lot and often, and it will become a part of the WordPress core at some point. That can cause problems in the future if you’ve built something important with the plugin already. In short – maybe don’t start your new, big, important project with Gutenberg right away.

How to use Gutenberg?

Now let’s take a quick look at the editor itself. At the first glance, it is similar to the WordPress editor we knew before, but the interface is not as cluttered and you more options for customizing your content. The biggest difference is that the TinyMCE editor is missing and is replaced by the blocks.

Gutenberg and WordPress current editor comparison side by side

You can add all sorts of content blocks (ex. Text, Image, Button) by clicking on the little plus icon. Once you add a block, it will show you the properties of the specific block on the right, and that’s new too.

It will be especially easy to get a hang of it if you’ve used any page builder before, as the interface does hint at some of the features you’re already familiar with.

Gutenberg For Developers

The good thing about the new Gutenberg editor is that developers have the chance to extend the plugin. And all that is thanks to blocks. Everyone has the chance to make Gutenberg blocks and enhance their designs.

The question on everyone’s mind (by that I mean, my mind when I first heard about Gutenberg) is – what are these mythical WordPress creatures called blocks? WordPress defines them as “a unified way to style content”. So, think of them as independent assets (just like in the page builders) you can use to build your page block by block.

There are already plugins on the market that add blocks to Gutenberg (like Maps, GDPR data request forms or even a plugin to disable Gutenberg for any post type) and the amount of them is only growing. If you’re inspired and want to start creating your own Gutenberg blocks, go for it! For a detailed explanation of how exactly to get started – WordPress has you covered right here.

Gutenberg in Visual Composer

Here at Visual Composer using Gutenberg is easy peasy. If you’ve got the plugin downloaded already, simply download the Gutenberg element from the Visual Composer Hub and you’ll be able to use Gutenberg within Visual Composer. You can create content in the Gutenberg editor and it will automatically be added to the frontend editor of Visual Composer.

Gutenberg element in Visual Composer frontend editor

Add the element and open the Gutenberg editor. You can combine content created in Gutenberg with design created in Visual Composer. Moreover, you can insert an unlimited amount of Gutenberg elements in the layout.  So check it out, experiment, but at the moment, most of the content you might create with Gutenberg, you can do it Visual Composer directly.

Ch-ch-ch-ch-changes

There is a lot of discussions out there about whether Gutenberg is a good or a bad thing, so I what I want you to take away from this post is – try it out but be aware of the changes ahead.

Wait a minute, take it easy and once it’s in the WordPress core, that’s when you can start going crazy with it. Well, not crazy per se, but you know what I mean. And remember, Visual Composer will always have your back!