How To Use Gutenberg Editor: Step-by-Step Tutorial for Bloggers

Right now, Gutenberg is the showstopper in the WordPress family. After WordPress 5.0 update, it has become mandatory to use the new Gutenberg editor.

But, this sudden change has created a huge panic as this new editor is completely different from the classic one. Anyway, you don’t have to worry about that, as you can go back to the old classic WordPress editor easily.

How do I write my first content using WordPress Gutenberg editor? #WordPress #Gutenbergeditor #gutenbergtutorialClick To Tweet

But, till when we all can get away with this new WordPress editor? So, it’s better to start learning about how to use this Gutenberg editor to write awesome content.

The best thing we can do right now to stay away from this sudden update is that we can disable Gutenberg from our main blog and try using in some separate blog. I am following the same thing and gradually learning this.

This post will cover all the information about Gutenberg from every aspect.

What is Gutenberg editor?

Basically, this is a WordPress editor which has replaced the old classic one. Gutenberg is more powerful than the classic editor and hence it comes with a lot of more new features.

These new features of Gutenberg will ultimately impact the entire publishing experience after WordPress 5.0 with highly customized post layout.

Gutenberg, the new WordPress block editor is now a part of WordPress 5.0 onward (After the 6th December 2018 update)Click To Tweet

Why Gutenberg Will Be The Game Changer For WordPress?

Let’s explore the 9 awesome key features of Gutenberg editor

  • Get ready to experience to write using different blocks
  • It will give you WYSIWYG experience, what you see is what you get
  • Every block will have its own options, no fixed set of a toolbar
  • With a document outline feature, you can review your content. The number of words, paragraphs, headings, blocks etc.
  • You can also link to your headings with a text anchor, which is an awesome feature to enjoy
  • No need to use a table plugin as you can easily add HTML tables
  • Happily create buttons without any plugin
  • Create columns with a few simple clicks
  • Increase or decrease font size seamlessly

There is no doubt that with Gutenberg now one can do many things to customize the content without any extra plugin.

Gutenberg Editor Tutorial 2019 – Let’s Get Used To With This Awesome WordPress Editor

After WordPress 5.0, you don’t have to worry about how to install Gutenberg in classic WordPress editor. Because this is mandatory now.

In fact, if you don’t want to use this editor and go back to the old one, follow this tutorial on how to disable Gutenberg editor. If you have used Thrive Architect plugin to design a landing page or customize any page, then you will not find much difficulty using this new Gutenberg editor.

For all the Gutenberg lovers, here are the things you can do with this New Gutenberg Editor.

How To Write Your First Content Using Gutenberg Editor

As usual, click on Add New Post into your WordPress Dashboard. It will open a new editor like below. You just have to get used to with this +Plus icon, as all the blocks are available on clicking that option.

gutenberg editor

Add a Title to your post and start writing a paragraph.

Before writing or adding any content into this block, here are all the features that will help you with this.

How Does Gutenberg Look Like? Key Features

gutenberg editor blocks

First of all click on the +Plus icon and you will find the above window will open. In the first segment, you will find the most common blocks. Just click on the one you want to use. E.g. if you are writing your first paragraph of the post, click on Paragraph block and start writing your first paragraph keeping all on-page SEO factors in place.

In this Block you have several options:

  1. Paragraph: By clicking on the paragraph you can write start writing your article.
  2. Heading: If you want to add heading instead of text after title you can add it easily. With this option, you can add H2, H3, H4 tags. Also, switch to other options to add TEXT in a quote.
  3. Image: You can add an image by clicking on image option directly from your media library, upload a new file or add an image by URL.
  4. List: You can add a list of steps that you need to explain in your article. This is the typical bullet system without adding much to offer you.
  5. Quote: You can add Quotes or old wise sayings or motivational words to encourage your readers to read the full post on your website.
  6. Photo Gallery: You can add Images Gallery by clicking on photo gallery (This is an extra plugin – you can install it from the WordPress plugins directory.
  7. Audio: You can add the audio file here. This is something interesting as you can now easily embed any podcast or audio file directly without looking for their HTML embed code.
  8. Cover: You can write text above any image by setting it up as background.

These are the basic and most used blocks with which you can easily create content. If you want to use more elements then there are more options available.

Inline elements: Gutenberg Editor

Inline Images Feature is basically used to write text below any image. (Text will appear very close to the uploaded image). If you want to add an image within a block or content area then you can use this option.

gutenberg editor inline element

Common Blocks: Gutenberg Post Editor

Nearly all of the features are already discussed above in the Most Used Feature. These 2 features can be added here.

  1. Video: Easily upload videos from your desktop, or directly from a YouTube link.
  2. File: This is also similar to uploading any file from your computer or media library.

Formatting: Gutenberg Post Editor

gutenberg editor formatting

Formatting Feature in Gutenberg Post editor contains several options which are discussed below.

  1. Code: You can write any code in here. Basically HTML, java scripts, PHP etc.
  2. Classic: you can use classic Editor in your post. In case you want to edit your existing articles, you will find the entire article in the classic element. You have to break it and then use different blocks.
  3. Custom HTML: you can use custom HTML codes in your post by this button in Gutenberg Post editor.
  4. Preformatted: This feature allows you to write text in any other format.
  5. Pullquote: This Feature is used to write a quote which is covered by two lines above the text and below the text.
  6. Table: If you used classic editor then you know this feature very well. The table is used to define data or any type of records.
  7. Verse: This option will give you the power of classic editor without showing the same basic features of it.

Layout Elements: Gutenberg Plugin

gutenberg editor layout

This part is really awesome as it will simply help you insert many shortcodes. You don’t need a plugin to add a button or column. As this feature was missing in the earlier WordPress version.

  1. Button: you can create a button using this option, for example, you can write DOWNLOAD on this button and connect it to the URL of that file.
  2. Columns: This option can help you in adding columns to your post to define any data.
  3. Media & Text: Add Media here and place it in left or right and you can write text in front of the file explaining what the file is about.
  4. More: If your post is too big i.e. if it contains more than 2000 words or has some additional information then you can use this feature.
  5. Page Break: Same as 4th
  6. Separate: you can separate anything on your post using this feature.
  7. Spacer: This feature is used to give space between different blocks in the post.

Use of Widgets:

gutenberg editor widgets

This is an advanced option provided in Gutenberg Editor to embed many awesome features.

  1. WPForms: You can add any custom form in your post by this widget. Read the WPForms review for more details.
  2. Shortcode: This option will help you in adding the Shortcode of social share plugins or anything in your posts.
  3. Archives: You can show archives of your website in your posts.
  4. Categories: You can show all of your categories in one click on any post.
  5. Latest comments: Add all latest comments of your blog in a particular post.
  6. Latest Posts: Add a list of latest posts in any post by clicking here.

Note: Archives, Categories, Latest comments, and Latest Posts will be updated on that post automatically if you add any new category, post etc.

Embed Option in Gutenberg Editor

gutenberg editor embed option

This Block will help you to add embed format of any media directly to your post by just selecting the option and putting URL or code in it.

E.g. if you embed your twitter URL with this block, you can find your twitter activity feed in your blog post. Similarly, you can use any other platform content within your blog posts like YouTube, Facebook, Instagram, SoundCloud, Spotify, Flickr and many more.

Advance Options to Edit Paragraph

gutenberg editor advanced option

As soon as you write a piece of content within a paragraph, you may need to format the text to make it visually appealing. In that case, from the right side click on the settings option and you can find that many text formatting options like typography, color etc. has been activated.

Other Options in Gutenberg that you Need to Know:

It contains Top Toolbar, Spotlight Mode, Fullscreen Mode, Code editor, Copy All Content and other options. They are defined in the image as well.

gutenberg editor more options

Another best part is that you can now access your Yoast SEO settings from the right side option itself. Just click on the Yoast SEO icon and it will provide you with all the options on the right side of the Gutenberg editor. You just need to click the snippet preview and do the necessary editing like SEO title, meta description, permalink change etc.

Conclusion: WordPress Gutenberg Editor Tutorial

This is all about the basic blocks of Gutenberg editor. It is too early to expect more features, but with time Gutenberg will surely become a one-man army to write awesome content without any extra page-builder plugin.

Off course the demand for advanced customization may not be achieved with Gutenberg, but the majority of bloggers has to upgrade their content writing experience with time.

Hope you like this basic Gutenberg editor tutorial. You have to keep practicing more to create content fast using this new WordPress block editor. Please share this article on social media, if you find it useful.

Rahul BhichherAuthor Bio: Rahul Bhichher

I am very ambitious, generous and thoughtful. I love to try new ideas because I wanna live life from every expect. I like to make new friends and share my knowledge with them.

Follow Me: Website, Twitter

Affiliate Disclaimer: This post contains affiliate links and I will be compensated if you make a purchase after clicking on my links. This will not cost you a single penny extra. Thanks for the understanding and rewarding me for my hard work.

4 thoughts on “How To Use Gutenberg Editor: Step-by-Step Tutorial for Bloggers”

  1. I Have Develop Blog On WordPress Related To Hosting But My Blog Load Time is Too Much And Google Page Speed is Low. Please Tell Me Sir Which Theme is Best For Blogging. Thanks

Comments are closed.