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 like 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 a 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!

More on wpcrib

10 comments

  1. Is it possible to survive Gutenberg?

    > Reusable blocks are good for things like footers or headers. Or at least, they will be once Gutenberg gets to the template building stage.

    https://github.com/WordPress/gutenberg/issues/8403

    Who needs Visual Composer if the “template building stage” is reached?

    1. Visual Composer will always focus on the end users and a result you can expect a better and easier builder to work with.

  2. Will we still be able to use WPBakery with it? I installed the Gutenberg plugin to check it out and there was no option for me to use the WPBakery editor anywhere in the page editor.

    1. Nevermind…hehe…I hadn’t updated WPBakery. I see the “Disable Gutenberg” option now.

  3. Tried the Gutenberg plugin with a number of sites and other page builders / themes and to be honest … it is awful !!

    It is a long long way from being as good as existing builders. I have been building sites and using WordPress since it’s early days and this is a monumental mistake to bring this in now. It’s like fitting second hand car tyres to a 747 plane and hoping it works.

    Anyway, I’ve had my rant, just would like to confirm that I will still be able to use VC as before without any issues by having Gutenberg introduced to WordPress core.

    Cheers

    1. Good comparison – love it! Yes, we have a different plan than Gutenberg and our users love the simplicity and features that Visual Composer provides. Thank you for the support.

  4. Think twice before supporting Gutenberg…

    @photomatt: “Gutenberg will definitely be a whole-page builder, that’s the entire point of phase 2. All of the infrastructure is built to support that, so it will happen much faster than phase 1.”

    https://twitter.com/photomatt/status/1037843717070057472

    1. Thanks for the link. Having an alternative is great. We have a different vision and we will continue executing our plan. Anyway, I’m glad that default WP installation will be a little more user-friendly, but for those who will want to take it to another level – there will always be Visual Composer. Our focus is on the end users. If you are a developer/agency your clients will be thankful to you when you will install them, Visual Composer. If you are the end user yourself, then you are already ahead of other users because you know that Visual Composer will serve you better 😉

  5. The text editor not working in front end editor.
    Only show HTML text.

    WORDPRESS 5.
    View image: https://screenshot.net/es/0xe1wf7

    1. Check out if you have all your plugins up to date and compatible with WP 5.0

Add comment

Join discussion and make an impact. Your email address will not be published.

GDPR is going into effect on May 25, 2018. Learn more in our new GDPR section. You can also view changes to our Privacy Policy.
We use cookies to provide a personalised experience for our users.