Gutenberg Editor in WordPress: Learn How To Use For Beginners (2020)

133Shares
Gutenberg Editor in WordPress
  • Save

In this post, I’ll introduce you to what the Gutenberg editor is, give you a brief look at explaining how it works. I will also tell you when you can expect to see the new editor, and share a few other minor relevant details.

The way that you write your blog posts in WordPress will drastically change (though you will be able to install a plugin to keep using the current editor, if desired).

It is to help you get ready for the change that I have penned down this post on How To Use The WordPress Gutenberg Editor.

It’s a complete redesigned editing experience.

I’ll show you exactly how you can use the new editor to write a blog post so that you are ready for the transition to WordPress Gutenberg.

What Is The WordPress Gutenberg Editor?

Gutenberg is a completely redesigned editor aimed at replacing the current TinyMCE editor that WordPress has used for, well, pretty much forever.

Gutenberg’s goal is to make it easier and more accessible for casual users to create unique content structures by using blocks (I’ll explain this in a second).

Or, in the words of Matt Mullenweg, co-founder of WordPress:

The editor will endeavour to 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.

In case you’re not familiar with what I’m talking about when I say TinyMCE editor, this is what the current WordPress TinyMCE editor looks like:

gutenberg-editor
  • Save

In contrast, here’s what the new WordPress Gutenberg editor looks like:

  • Save

But apart from the new interface styling, the real change that Gutenberg will bring is in that block-based editing approach.

Also see:

How Does The WordPress Gutenberg Editor Work?

If you’re using WordPress, I’m sure you’re familiar with how the current editor works – you have a single box where you write your text, add your images, embed videos, etc.

Gutenberg changes that by letting you write your posts using multiple “blocks”.

A “block” can be pretty much anything. For example, these count as a block:

  • A paragraph of text
  • An image
  • An embedded video
  • A quote
  • A button

Here’s an example of how the different blocks work. In the GIF below, you can see that I have added four different blocks:

  • Two paragraph text blocks
  • One image block
  • One video block
How blocks works
  • Save

And because each block is a separate entity, you can also easily apply a color background to just a single block:

Styling blocks
  • Save

But here’s the really cool part about blocks:

Developers will be able to write their own blocks as well, which paves way for the elimination of things like shortcodes and embed codes.

For example, rather than needing to insert a shortcode to add a gallery to your post, you’ll eventually just be able to use a “gallery block” to insert your gallery and see a live preview in the editor itself.

In a nutshell, the new WordPress Gutenberg editor sits somewhere in between the current TinyMCE editor and more powerful page builders.

With it, you’ll be able to build more attractive pages without needing to know any code. And that should unlock a ton of helpful new functionalities for your blog!

An Introduction To The WordPress Gutenberg Editor Interface

When you first go to create a new post or page with Gutenberg, here’s what you’ll see:

the wordpress gutenberg editor interface
  • Save

It is somewhat similar to the current WordPress TinyMCE editor, but the biggest difference to you would be the absence of the single text box for you which you currently use to write and format all your content.

Instead, you will have one big white area that starts with ‘Write your story’. If you read my post on what the WordPress Gutenberg editor is, you’ll know that is because Gutenberg uses “blocks” to help you create your content, rather than a single text input area.

For more information on what blocks are, I recommend that you read my post above. But as a quick refresher, a block can basically be anything. It can be:

  • A regular paragraph of text
  • An image
  • A CTA button
  • An embedded video

Third-party developers will also be able to code their own blocks to add more functionality. You can already see an example of this with the BlocksWP Social Share Block.

How To Use The Gutenberg Editor Interface

Here are what the various areas of the Gutenberg interface let you do:

how to use the wordpress gutenberg editor
  • Save
  1. Click this button to add a new block.
  2. Undo/redo buttons let you move forward or backward to edit easily, just like Microsoft Word.
  3. This settings area includes many of the same options as the current WordPress editor sidebar. It is where you add categories/tags, set the featured image, choose the publishing date etc.
  4. When you select an individual block, this settings area includes settings that are specific to that block. It is where you can choose colors, styles, and other important block-specific details.
  5. These two buttons let you preview or publish your post.

If you click on the +Plus button to insert a block, it will open a window that lets you browse all available blocks that you can use in your content:

adding blocks to your content
  • Save

The Recent and Saved tabs allow you to access blocks that you frequently use, while the Blocks and Embeds tabs let you browse all available blocks.

You can also use the search box to quickly find a specific block by typing in the block’s name.

How To Write A Blog Post Using The Gutenberg Editor

Now that you know how the interface works, well, to an extent, I’ll show you how you can actually use Gutenberg to write a blog post for your site.

For example, let’s say that you want to write a blog post that includes:

Previously, you might’ve needed some separate plugins or custom CSS to handle creating a table and CTA button – but now you can do everything with Gutenberg.

Step 1: Write your text using paragraph blocks

To write the text of your blog post, Gutenberg doesn’t require you to actually add a new block. Instead, you can just click on the page and start writing like this:

how to add text to gutenberg
  • Save

Pretty easy so far, right?

All you do is type. And whenever you hit enter to start a new paragraph, Gutenberg will automatically create a new block.

If you want to add a link, change alignment, or format the text with bold or italics, you can just click on the text block and use the floating menu bar:

formatting text with gutenberg
  • Save

Step 2: Add an image block

To add an image anywhere in your blog post, all you need to do is hover over the spot where you want to insert your image.

When you do that, you will see the +Plus icon appear. Clicking on it will open the block list, which will help you choose the Image block.

When you do that, you’ll be able to upload a new image or select an image from your Media Library, just like you do with the current WordPress editor:

how to insert an image with gutenberg
  • Save

Once you insert the image block, you’ll see the actual image right there in the editor.

Step 3: Add a YouTube embed block

To embed a YouTube video, you follow an almost identical process:

  • Hover over where you want to embed your YouTube video
  • Click the +Plus icon
  • Go to the Embeds tab
  • Choose YouTube

Then, all you need to do is paste in the URL to the video, click Embed, and you’ll see the embedded video right there in your post:

  • Save

Step 3: Add a table block

The table block lets you insert and manipulate a table anywhere in your content with ease.

To do so, you will need to follow the same process as above. And once you add it, you can add or remove rows and columns by using the floating menu bar:

embed a video in gutenberg
  • Save

Step 4: Add and style button block

The button block is one of my favorite additions to the Gutenberg editor because buttons are something that were previously difficult to add without knowing the usage of custom CSS. But with Gutenberg, using buttons is simple.

First, you can insert a button by following the same process similar to other blocks. To edit the button’s text, all you need to do is click and type:

how to add cta button in gutenberg
  • Save

You can also go to the Block tab to change the colors of your button:

how to style button in gutenberg
  • Save

And that’s it! You just wrote an entire blog post using the new WordPress Gutenberg editor. It is that simple.

Some Other Helpful Things That You Can Do With The WordPress Gutenberg Editor

Apart from what I demonstrated above, there are also some other helpful things that you can do with Gutenberg.

One feature that’s helpful is the ability to add a unique background color to any paragraph block in your post:

gutenberg block background
  • Save

You can also use the up and down buttons next to each block to quickly change the positioning of the block i.e. without the old copy and paste method:

  • Save

And finally, if you want to save some time while inserting new blocks, I like the quick-insert autosuggest feature. Rather than needing to use the +Plus icon every time you want to insert a new block, you can just start typing and use this format /block-name.

As you type, Gutenberg will automatically suggest blocks that match:

  • Save

With this feature, you can add blocks just by using your keyboard, which helps keep you in your flow.

Gutenberg Might Have Growing Pains, But It Should Be Good In The Long Run

WordPress has been using pretty much the same TinyMCE editor for as long as most people can remember, so I think it’s fairly unavoidable that there are going to be growing pains when WordPress 5.0 comes.

You will need to learn a completely new interface, which is obviously going to take some adjustment.

But in the long run, that new interface should give you more power to create awesome content.

Now I want to hear from you. What do you think about the Gutenberg editor so far? Do you like it? Or do you still prefer the current WordPress editor? Let me know in the comments!

Also see:

Was this helpful?

Thanks for your feedback!
  • Save
133Shares
Authored By
A Blogger, Author and a speaker! Harsh Agrawal is recognized as a leader in digital marketing and FinTech space. Fountainhead of ShoutMeLoud, and a Speaker at ASW, Hero Mindmine, Inorbit, IBM, India blockchain summit. Also, an award-winning blogger.

9 thoughts on “Gutenberg Editor in WordPress: Learn How To Use For Beginners (2020)”

  1. Shrinivas

    Gutenberg is a next big change in the WordPress, it has more advanced options and elements compared to the existing WP editor but most of the people found it difficult to use and insisted not to ship it with the WordPress core. Shouters, what is your thought on this?

  2. vivek+bisht

    Hello sir
    This is amazing guide, after reading this now I think, I should update my editor plugin

  3. Shruti sinha

    u didn’t explained how do I find “create a config file” when it doesn’t appear.. I had to found it my self. for who doesn’t know, just type localhost/wordpress/ bcuz if u just click u’ll get the error “doc expired” or somethin

  4. SUNNY

    Hey, I just wanted to take this moment to thank you for the great tutorials. Each one has been extremely detailed and helpful :). I’m currently attending college to become a front-end web developer and with that said wordpress will be a major part of my work. Your tutorials have explained a lot, I wish my profs were as detailed as your videos. Many times they speed through the foundation leaving the entire class lost. Anyways just wanted to say your videos are extremely helpful and I really appreciate them.

  5. Chandan

    I have seen something like this before on medium website. Now, no need extra plugin for button, table or notification areas. Really like the new editor.

  6. Manish

    Hi,
    Gutenberg looks great. I guess this will be the end for all these overblown page builder themes.
    Thanks

  7. Ashutosh singh

    Hi Harsh,

    It looks amazing and has very nice GUI. I love to write with this editor and waiting for wordpress 5.0.
    Thank you for sharing a look at wordpress 5.0 before it’s release it creates an excitation.
    Waiting for wordpress 5.0
    Ashutosh Singh

  8. Freddy G. Cabrera

    Hey Harsh!

    This is news to me!

    I really like this new content editor WordPress is coming up with. It looks more seamless and the simplicity of it can help a lot with productivity. I already know I’m going to love this new editing interface.

    Thank you so much for sharing this!

    I’m spreading the word too!

    Best regards!

  9. Ali

    Thanks bro i was curious how people show tables in wordpress sites. You solve my problem thanks Again 🙂

Leave a Comment

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

Scroll to Top
133 Shares