How to Use Gutenberg Editor (The Complete Guide)

The Gutenberg Editor has replaced the old classic WordPress editor and it is active on the default WordPress editor.

If you have written articles on sites like Medium.com, you might have come across a similar kind of experience as the Gutenberg. However, the Gutenberg editor is a lot more comprehensive and comes with different blocks.

Currently, Gutenberg is just the editor that you can use to create your blog posts. However, it will be extended to be the complete solution to create your entire site making it a lot easier for the newbie WordPress users.

As the new editor depends mostly on it’s blocks, the independent WordPress theme and plugin developers can easily create their own blocks to extend the overall experience. 

In this article, we will look at the new Gutenberg editor in detail and learn along the way to use it the most proficient way.

Article Index

• Introduction to Gutenberg Editor
• Getting Started With Gutenberg 
• Look & Feel of The Editor
• The Gutenberg Blocks
• How to Use Gutenberg Editor
• Compatibility Issues
• Pros & Cons of Gutenberg
• Final Word

Everything You Need to Know About The Gutenberg Editor

---

What is Gutenberg Editor

Gutenberg is the name given to the new to be WordPress editor that will be using to create your blog posts soon.

Gutenberg editor is Named after Johannes Gutenberg who invented the printing press 500 years ago. 

The classic WordPress editor that you are using currently is simple with the title and the description box and the tools attached to it that you use to add different elements into your posts. 

With the introduction of Gutenberg editor this system will completely change. 

Now you will have to insert different blocks to create your blog posts. You have a number of different blocks created with the Gutenberg editor that we will see later in the post.

The new editor is expected to be a part of  the WordPress core by the end of 2018.

As already mentioned, you can use it by installing the plugin at the moment. 

Over 600k users are already using the Gutenberg editor for testing or on active sites. 

Getting Started With Gutenberg 

As Gutenberg is going to be a part of WordPress software. It is better to start it with sooner so that you are used to the editor before it becomes mandatory.

We have been using the Gutenberg editor On BeginDot for a last few days. It surely has a number of benefits at the same time it needs a lot of improvements which is expected as it is work in progress at the moment.

To get started with the editor, go to the WordPress dashboard >> plugins >> Add new 

You will see the Gutenberg plugin option right there. Just install and activate the plugin.

Before you start writing new content using the Gutenberg editor on your site, you have the option to test drive the editor right on your dashboard.

After activating the plugin, you will see the Gutenberg option on your WordPress dashboard.

Look & Feel of The Editor

Here is how the Gutenberg editor looks when you start creating your blog post.

The interface is clean and distraction free. You can now start adding the blocks that you need on your post.

Now, as you see in the image above you have the option to add the title of your post and then the blank canvas for you to add any block that you wish to add.

After adding the title of your post, come to the content area to add a block. You see the +Plus sign that you can use to add a block to your page.

You also have the option to add the block in the top left corner of the page. 

Right Bar

The details in the right bar of the editor changes depending on the current block you are editing. If you are editing an image, you will get the options for the image in the right bar such as the alt text, image size etc.

As you start editing a text block it will change accordingly. 

Visual Editor & Code Editor

Like you had the option in the classic editor to move around visual and the code editor. The Gutenberg editor also gives you the option to use the code editor in case you need that. 

Featured Image for The Post

Like in the old editor, you have the option to select the category of your blog post, option to add tags and featured image in the right bar under the documents tab. 

Redo & Undo Option

Here is a nice option to move back and forth your article. The Gutenberg editor offers you simple redo and undo option at the left top corner of your editing interface. 

You can use these two icons to undo and redo your last action. 

Quick Stats

This is a very useful feature offered in the Gutenberg editor. While writing your content, you can just click and check the number of words on the page, the number of blocks that you have used, the number of headers, paragaphs etc. 

The Gutenberg Blocks

The Gutenberg editor is all about the blocks. So, these are links th breaks that you use to build the house.

When you are creating your blog posts, after adding th title of the post the entire canvas is available for you to add different blocks.

You will see a number of different groups created for the blocks such as the most frequently used blocks, common blocks, inline elements, formatting, layout elements, widgets etc.

Let’s have a look at each of the groups one by one.

The Most used blocks will obviously the ones that are used most frequently while creating a blog post such as the heading, image, paragraph etc. 

The common blocks will also have somewhat the similar blocks in it.

If the default Gutenberg blocks are not enough for your site, there are a number of new Gutenberg block plugins that you can use on your site.

Formatting Blocks

There are a few useful blocks under the formatting group. Such as th following

• Classic Editor: If you need to old classic editor toolbar to edit anything, you will find it here
• Custom HTML: The option to add custom HTML
• Add Code: Add code on your tutorial posts
• Add a Table: This is a very useful addition to the WordPress editor, now you will not need a plugin to add a table to you posts.

Embeds

With the rise of multimedia content, viral content type, the importance of embed functionality has gone up.

Content producers are using content from Twitter, Instagram, YouTube very regularly these days.

The Gutenberg editor makes it super simple and easy for the users to embed content from a number of popular platforms with ease.

Layout Related Blocks

The layout blocks will be very useful for the users. Now, you don’t need to use a shortcode plugin to add buttons to your post anymore because you have the built-in option to add a button.

There are a number of useful layout design options to choose from. 

Creating a Post Using The Gutenberg Editor

Now that you are aware of the Gutenberg interface, let’s create a blog post using the editor.

We will try to go through the most frequently used blocks and create content with them.

To create a blog post, go to the port new option just like old editor.

Step 1. Title & Paragraphs

Add the title of your post and start writing your article. To add the content for the post, you don’t have to do anything, just click on the canvas and start writing.

Step 2. Adding An Image

Other than the text of your blog post, the second most important thing on your blog post is the image or the images for your content.

You can click on the +plus sign and add an image block to add the image of your choice. 

Now, there are a few different options for images in the Gutenberg editor that you can use according to your need.

• Simple image block
• Image and text block (found under layout blocks)
• Cover Image

As we are talking about the normal blog post images, let’s one for the post. 

Step 3. Add a Video

As already discussed in the Blocks section, the Gutenberg editor comes with a comprehensive list of embed options.

So, not only YouTube videos, you can embed content from a number of other services to make your blog post look stunning.

To add a video to your blog post

Click on the +plus icon and go to embed section. Select the YouTube option from the list, add the video URL and done.

Step 4. Adding a Call to Action Button

Once you start using the Gutenberg editor, you will not need a button shortcode plugin anymore.

The editor comes with its own button block. You can add the button and style them as per your need.

Step 5. Adding Background Color to Text

Gutenberg gives you the option to add a background color to your text in case you want to highlight any text in the post. 

The process is quite simple, you just have to select the text that you wish to highlight and the color options will come up in the right bar, select the background color, text color and done. 

This is how you can highlight the text in your blog post to make it more interactive and engaging. It will also help you to attract the attention of your readers to the important sections on your blog post.

Compatibility Issues

Introduction of the Gutenberg editor is a big change and it will take some time to get everything else settle around it. 

Many WordPress themes and plugins are not yet compatible with the editor. 

For example, we were using a plugin to nofollow the outgoing link, and it doesn’t seem to be working with the new editor.

Similarly, many shortcode plugins will not be working as the Gutenberg comes with its own shortcode option.

However, the compatibility issues are temporary, as the themes and plugins get updated as per the requirement of the Gutenberg editor, things should be fine.

We have created an article about the best Gutenberg ready WordPress themes, you can select any theme from that list. 

Gutenberg is great in many aspects and it needs improvement in many departments.

As we are already using Gutenberg on our site, we have the first-hand experience about the editor.

So, here is a list of things that we like about the editor and things that are creating issues for us.

Pros of Gutenberg

• The editor is quite simple and easy to use.
• It is comprehensive in terms of the available options
• No technical skills will be required to add a button or to highlight content
• A new user will be able to create a great looking article with nice presentation
• Modern layout options, not just simple one-column content anymore.
• The interface is clean and distraction free
• Works perfectly on the mobile devices 

Cons of Gutenberg

• There is an option to open the link in a new window but no option to add nofollow tag
• Though there are discussions at many places, there is no dedicated support yet
• Plugin and theme compatibility can be a big concern
• Many important plugins are not functioning properly as of now

Final Word

Hope this article will help you to understand the Gutenberg editor better. As we are learning about the editor as you are, let’s have a  discussion about the editor make this guide even more comprehensive.

So don’t forget to add a comment or concern in the comment box below.