The Ultimate Guide on How to use WordPress Gutenberg Editor

WordPress Gutenberg

WordPress Gutenberg Editor is officially here and people are both excited and scared. It is one of the major parts of WordPress 5.0.

It would be safe to say with this new editor, there are going to be some momentous changes in how we write a blog post.

If you have been practically living under a rock and have no idea what Gutenberg Project is, have a look at this article: Everything you need to know about Gutenberg.

And for everyone else, it’s time to officially welcome the new block editor.

Don’t worry, even though the WordPress team is encouraging us to upgrade to WordPress Gutenberg, they will continue to provide support to the Classic Editor plugin until December 31, 2021.

Also, we advise trying WordPress Gutenberg Editor on a staging environment first to avoid any compatibility issues.

We already did this, we have started using Gutenberg on our staging site and so far we have not faced any issues. In fact, we love it!

It might seem a little complicated and why not, we are so used to the classic editor.

Today in this article we will give you a tour of the new WordPress Gutenberg Editor and try to uncomplicate things a little.

In this guide we will cover:

  1. How to install Gutenberg?
  2. WordPress Gutenberg Editor tour
  3. How to add and customize a blog post?

How to install Gutenberg?

Gutenberg will eventually replace WordPress editor. But as of now, you are allowed to install the Gutenberg plugin and play with the blocks.

The process is just like adding any new plugin. Go to Plugins > Add New and search for Gutenberg. Click on Install and remember to Activate the plugin once it gets installed.

Then go to Posts > Add New. You will be greeted by the new WordPress Gutenberg Editor.

WordPress Gutenberg Editor tour

Gutenberg also known as a block editor, uses lots of individual blocks. These blocks will give you many new features as compared to the classic WordPress editor.

Here are some of the blocks Gutenberg has to offer:

WordPress Gutenberg

To view Gutenberg editor, simply go to Post > Add New.

You will see a completely different canvas. This is Gutenberg editor:

WordPress Gutenberg

You will see a white area with the text “Start Writing”. You will have to use blocks to add headings, paragraphs, lists, and images.

A WordPress developer would be able to code their own blocks in order to add more functionality. But any regular blogger or content creator will pretty much get everything they want in this editor.

To add blocks simply click on the + icon on the top left corner.

WordPress Gutenberg

Click on the icon you want to insert. We will tell you how to add text in the next section.

Let’s first see the right sidebar. For the most part, it is very similar to WordPress’s classic editor. You get 2 subheads: Document and Block.

In the Document section, you will be able to add tags, featured images etc.

WordPress Gutenberg
WordPress Gutenberg
WordPress Gutenberg

You can publish or schedule your posts, assign categories and tags, set featured images using this sidebar. You can also control whether or not to allow comments and pingbacks on the post.

In the Block section, you will be able to control the basic settings of the block you are currently working on.

For example, if you are writing a paragraph, you will be able to change the font size, background color, text color, and also add additional CSS Class.

WordPress Gutenberg
WordPress Gutenberg

How to add and customize a blog post?

At first, these blocks will look complicated but once you start using it. You wouldn’t be able to go back!

In this section, we will cover:

  • Adding text
  • Adding Images
  • Embedding Youtube videos
  • Adding Tables

Let’s start by adding some text, all you have to do is start typing in the blank space on the screen.

WordPress Gutenberg

Whenever you hit enter, it will automatically create a new block. You can simply continue writing or you can type “/” to see the options on which kind of block you want. Also, you can change the alignment and format the text by clicking on the block for a menu bar.

WordPress Gutenberg

Now about adding images. Click on “+” in the top left corner and select the images block. You will find it under the most used section.

WordPress Gutenberg

Once you click on this, a new block will be inserted. It will look something like this:

WordPress Gutenberg

You will be able to upload a new image or select an image from your Media Library. Once you have added the image, WordPress Gutenberg editor also allows you to make modifications as required.

The process remains the same for anything that you want to add. The only difference is you will have to go under different sections.

To embed a Youtube video, in the “+” menu, click on Youtube under the Embed section.

WordPress Gutenberg

Next, all you have to do is paste the URL and click Embed.

WordPress Gutenberg

The video will get embedded in your post and you will be able to view it on the editor itself. It will look something like this:

WordPress Gutenberg

These features aren’t new, we were able to add images and videos to our post in the classic WordPress editor too. What’s new is that now you can also add and customize tables and buttons. Earlier we had to download an extra plugin to do this.

Also, the steps are completely the same as adding images and videos. You will find the table option under formatting.

WordPress Gutenberg
WordPress Gutenberg

You can add rows and columns. You can also work on formatting it as your requirements. 

Seriously, is there anything Gutenberg cannot do?

We were just as nervous as you are but you need to give it a try.

Also, as we stated in the start, test Gutenberg on the staging environment first and make sure to take a complete backup before upgrading your live site.

Wrapping Up

Gutenberg isn’t the only change that will come with WordPress 5.0. Other changes include JavaScript internationalization support, compatibility with PHP 7.3, and the new Twenty Nineteen theme.

There is going to be a definite change in the blogging world and if anything, we are really excited about it. Do give WordPress Gutenberg a try and if you face any issues with the new editor you can always contact our WordPress experts.

Have you switched to WordPress Gutenberg editor?

Share your experience with Gutenberg in the comments down below.

Latest Magento Tips, Guides, & News

Stay updated with new stuff in the Magento ecosystem including exclusive deals, how-to articles, new plugins, and more. 100% Magento Goodness, a promise!

Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top

Talk to a sales representative

USA / Worldwide

+1.714.2425683

India

+91.9852704704

We can help you. Right now.

Fast growing merchants choose Breeze for high-performance hosting. Experience counts. Let's get started.

Request demo

Please fill in the details below and we’ll reach out to you with a customized demo of our product!

🎉 CYBER MONDAY SAVINGS 🎉

75% OFF on
ALL PLANS

Receive the coupon as soon as you
submit the email address. 🚀