Your Complete WordPress Gutenberg Guide – Explained in Detail


In this post, I am going to introduce you to Gutenberg editor and give you complete overview about its functions and explain you how it works. Let us learn in detail how this new editor works, and share some relevant information about WordPress Gutenberg Editor.

If you are using WordPress, then it is very important to be completely aware of Gutenberg editor. With the release of the WordPress 5.0, all websites are using this new editor by default; however, you still have an option of utilizing the Classic editor instead. It means you have to choose which editor is a best choice for you.

In order, to check this out, first let’s understand how both these options work. It is very important to know what every WordPress editor’s visual interface looks like, and which kinds of websites they are best suited for. For instance, media-rich websites benefit from Gutenberg editor. But, if your website has simple setup, you might prefer the Classic editor just for its easiness and simplicity.

Here in this post, let me take you through major differences between Classic & Gutenberg editors. And then decide which is suitable for your requirements. Let’s go right into it!

Brief Introduction to Gutenberg Editor

What’s Gutenberg?

Gutenberg is a sleek and modern block-based editor, which has some amazing features from the page-builder plugins such as Divi and Visual Composer. It alters the way pages and posts are created completely. It also replaces a classic editor and makes creating the rich content at WordPress one simple & refreshing experience.

In Gutenberg Editor everything is in a form of blocks. This allows you to control the whole layout of your website even though you do not know HTML. It does not change how WordPress 0.5 works. It changes to how people just like you & me interact to.

Gutenberg editor is made to help the users to create dynamic layouts. This allows you to use the drag-and-drop way to build posts and pages using various pre-built blocks. Every block is customizable, and with its unique set of options like size, colors, and placement.

The Gutenberg editor provides many benefits, like better mobile responsiveness. But, as it is the huge structural change and has the potential of causing issues on your website.

Gutenberg vs. Classic Editor: Understanding its Pros & Cons

Now we have introduced you to Gutenberg editor, let us take a close look at its pros & cons compared to its Classic editor. One biggest difference can be seen in both the editors’ interfaces.

Like we mentioned earlier, Gutenberg editor makes use of drag & drop system. That means it is simple to place the block anywhere on your page or post, and other blocks can shift accordingly:

You can do some amazing things with this great feature. For example, experiment with diverse ways to use image placement and break up the sections of text. Additionally, create full-width images.

One more benefit of Gutenberg editor is if you want to have a modern look, or do with the multimedia elements. For instance, this new editor has the shortcode block, which allows you to insert codes in an intuitive way:

There is the widget block that allows you to place all types of features directly on posts and pages.

Gutenberg helps to reduce a number of plugins that you want. If you are using the shortcode plugin or image gallery plugin, then it might no longer be essential. Same goes for the plugins that includes contact form and table functionality, since Gutenberg offers both. It is worth to note that the Gutenberg’s versions are simple than what many plugins have, however they are completely functional if you do not want any frills.

But, if you are used to Classic editor’s layout & do not want to use these advanced features, it is possible that you might find Gutenberg editor quite frustrating than useful. For instance, you cannot just sit down & type text in Gutenberg editor. All different elements of the post or page, like paragraphs and headers, need to be placed in the separate blocks:

It might take a little time to check out how to utilize Gutenberg’s settings, or how to place the blocks so your content looks in a way you want. It applies to everyone who makes use of websites you build. Suppose you are working with the client or team who is quite resistant to change and technophobe, it is better to continue using Classic editor .

Lastly, the fact that Gutenberg editor is a big change results in additional downsides. For example, Gutenberg has not been made totally accessible. Suppose your website serves people with special requirements, like those using the screen readers, Gutenberg might cause problems to them. Additionally, the editor might create conflicts with your website’s themes and plugins.

How to Know Which Editor Will Be Right on Your Web Site

On a positive side, Gutenberg editor offers several new tools for the dynamic layouts, visual editing & media-rich content. Suppose you wish to give your website and its content a different and unique look, then Gutenberg offers plenty of possibilities. This helps you to create dynamic layouts, and will reduce your requirement for any extra plugins.

Obviously, Gutenberg has a few downsides. There is a bit learning curve involved, some users have actually found this editor to be unintuitive and overly complex. Suppose you wish to create straightforward posts or pages having images and text, Gutenberg might offer many more features than the website actually needs. Also, as we mentioned before, the new editor isn’t yet accessible completely.

While deciding which editor will be right for your website, consider the kind of content that your website has, and benefit from the Gutenberg’s features. For instance, the online magazine wants to design visually exciting articles can use Gutenberg’s drop case option, and the ability to add CSS styles on a specific text.

But, you might prefer staying with Classic editor in case you use WordPress for drafting short posts, or you already have the page builder plugin, which you are comfortable using it. Suppose that description fits your website, or you just dislike Gutenberg editor, you may disable new editor & install Classic editor. This allows you to continue to produce content in a way you want.

Suppose you want to start making use of Gutenberg, you do not have to do anything very special. Update your website to use it by default before an end of a year. Alternatively, you may install Classic plugin when 5.0 come, if you want to keep on using this functionality you are quite familiar with:

Suppose you decide to stay to Classic editor, be aware you might do this forever. Lots of plugins are adapted to work with Gutenberg, and the new plugins and themes are created to take benefit of (enhance) its functionality. Whether you like it or not, Gutenberg is a future of WordPress –thus it is worth to learn how this works even though you would like to avoid using this for now.

What’re Gutenberg’s Blocks?

Gutenberg Editor is designed on a concept of Blocks. And Gutenberg’s Blocks will allow you to add anything to your post or page. Right from the paragraph text, video, images, widgets, buttons, and pull quotes, just think about it, and Gutenberg’s Blocks will add this in your content.

Like you may see below, Gutenberg allows you to drag images from the desktop and drop it directly in the Block to add the gallery into your post.

To display Gutenberg’s Blocks, we select many pictures of blocks.

Note: We can go in-depth at how to use the Gutenberg Blocks later. We will just cover the broad overview in the post.

Knowing About Gutenberg Editor Menu

Time to dive in the Gutenberg Editor just by starting with options in their top menu

11 Menu Bar Options Include

Located on the top of your screen, you will see a menu bar having 11 different options:

  • Back option
  • Add Block option
  • Undo option
  • Redo option
  • Content Structure option
  • Block Navigation option
  • Save Draft option
  • Preview option
  • Publish option
  • Settings option
  • Many More Options

1. Back

Pressing on Back button can take you to either edit all pages or posts depending on what you are editing at present.

2. Add Block

Add Block is where you can find a wide range of the Gutenberg’s Blocks & embeds you may add in your page and post. You may use the search bar and scroll through different options that are available on your screen.

Gutenberg Editor’s “Highly Used” Block options will include:

  • Paragraph
  • List
  • Heading
  • Image
  • Gallery
  • Spacer
  • Quote
  • Cover
  • Video

There are many more Gutenberg Blocks, thus will cover them in complete detail later on.

3. Undo

Undo last change that you made.

4. Redo

Redo the last undo.

5. Content Structure

Content Structure gives you a quick overview of the content in your WordPress page or post, including word count, number of paragraphs, headings, and number of Blocks. You also can see the Document outline that is very handy to see in a way your WP page or post is structured with the headings.

Making use of headings (heading 1, 2, 3, 4, 5, 6) is the best way of dividing your content into different sections, and giving readers the better way of scanning this information. Headings are important for SEO. Because search engines make use of headings to index your content, thus use them very wisely.

Just by clicking on heading, you may quickly jump on the corresponding section of a page.

6. Block Navigation

This option allows you to quickly jump between Gutenberg Blocks at your WordPress page or post.

7. Save Draft

The Save Draft option is how you will save your current version of the draft. Note WordPress Gutenberg can constantly auto-save all your work, thus you might not use the Save Draft button quite often.

8. Preview

Preview button to show what your page or post can look like on a front end of the website when it gets published.

9. Publish

Clicking on Publish button can make your WP page or post available to the public.

10. Settings

Settings wheel toggles down settings menu on & off.

11. More Tools and Options

Use an icon with 3 vertical dots for displaying More Tools and Options menu.

From the menu, you will see additional options you have for Gutenberg editor, which includes View, Editor options & more Tools.

Views include Spotlight Mode, Unified Toolbar, and Full-screen mode.

  • Unified Toolbar will allow you to access all the block & document tools at one single place.
  • Spotlight mode will allow you to focus at one block at a time.
  • Full-screen Mode will allow you to work without any distraction by removing the unnecessary menu items.

You easily can switch between Visual & Code Editor here. Switching between the views will be useful for advanced users in case you want to see the current code that is generated by content.

In the Tools section, you will Manage Reusable Blocks, configure the Keyboard Shortcuts & Copy All Content.

Know About Document Menu Options

Let us now walk through Document menu options. You will see ten different options to format the “document,” or content in the WordPress page or post.

1. Document

The tab toggles on the right menu for displaying Document settings.

2. Block

Toggle right tab for displaying Block settings.

3. Status and Visibility

Status & Visibility section provides a complete overview of the current status of the page or post.

  • Visibility –Post Visibility option enables you to select who will see the WordPress page or post when it gets published. You may select between Password protected, Private or Public.
  • Publish – You may use Publish option for scheduling your post and publish automatically. For scheduling the post, choose the date & right time that you want the new page or post to get live.
  • Post Format –Post Format link will allow you to select the format of the post, which includes Link, Aside, Quote, Image, Video or Standard.
  • Stick to the Front Page – Check the box to have a link of your post being added on the front page of the site.
  • Pending Review –Choose this option & save your post to change its status of pending.

4. Revisions

By clicking on Revisions link can take you to different versions of the post. You can compare two versions to see changes that are made or who made it. You may revert your page to the older version from your Revisions page.

5. Categories

Choose the current category or you can create the new one for the post.

6. Tags

Choose the current Tag or you can create the new one for the post.

7. Featured Image

You can add Featured Image in your post.

8. Excerpt

Create a description or summary for your page. WordPress Excerpt is one optional description or summary of your post and excerpts have got two uses:

  • Gives summaries in the RSS feeds: The excerpts will replace full content in the RSS feeds when the option to display the summaries is chosen in Dashboard = Settings = Reading.
  • In the post previews: That depends on a WordPress theme, the excerpts are displayed in the places where fast summaries are highly preferable to the full content, as search results and archives for the tags, categories, authors and months.

9. Discussion

Control if you wish to allow the users to comment on your WordPress page or post. You can select whether to allow Trackbacks and Pingbacks. Trackbacks & pingbacks are two methods to alert the blogs that you linked to it, so they offer one kind of the “remote” commenting system.

  • Pingback is one kind of comment created when you will link to other blog post and where pingbacks are been enabled. Pingbacks will be automated and do not send content.
  • Trackbacks are a way to notify the legacy blog systems you have linked to. Trackbacks should be manually created, and send an excerpt of a content.

Know Gutenberg Editor Block Menu Options

Block tab on the right side of your screen gives you many options to format Blocks you have used. You will first have to choose the Gutenberg Block that you want to format. Block Settings will allow you to customize every block individually.

When you select the Gutenberg Block, options in the panel can change. Most of the Gutenberg Edition Block options need to do with styles and formatting. Customizations settings available may vary with the Block type; however you will see there are many different options to apply styles or other settings in the Block.

Advanced Settings of Gutenberg Block

The Advanced setting will allow you to add the additional CSS class on your selected Block. The CSS classes are used by the theme to add any additional styles in your Block.

Change the Block Type

Every Block has got the option of changing its type. Just by clicking on the Block you’ve added and hovering over an icon on left, you may change the present Block Type to pre-selected blocks options given to you.

Edit Current Block

Like you may see below, I can use Change Block Type to switch to my current block right from the Paragraph block to Heading block. After that I can use Edit Current Block to change its heading size. You may have various quick edit options that depend on the type of the block selected.

Some More Options

Every Gutenberg Block has additional options that are revealed just by clicking on an icon on far right side of a menu for Block.

The additional settings will include:

  • Duplicate
  • Hide Block Settings
  • Insert After
  • Insert Before
  • Add to Reusable Blocks
  • Edit at HTML

Hide & Show Block Settings

The option allows you to switch between hiding & show right sidebar settings. It is helpful in case you quickly want to clear up the editing screen.

Insert Before

It is where you may insert the new block over the Block currently selected.

Insert After

Use this option to insert the new block below your block that is selected.

Edit as HTML or Edit Visually

The option allows you to switch between the editing views, Visually or in HTML. Editing in HTML can be very helpful if you would like to see and alter HTML code output in Block, like div classes and inline styles applied on the block. Switching to Edit Visually may return to the editing screen by default.

Add Reusable Block

In this option, you will save the current Block for using later. The option can be very useful if you are using similar same images, text, and buttons frequently.

Remove Block

Use it to delete the current block from the post or page.

Give Gutenberg Spin On Your WP Website

Now you know how to work on the WP Gutenberg editor, it’s your turn of having some fun with different options. You may play with this new editor before the release of WP 5.0 just by downloading Gutenberg plugin & installing this on your website.


The new WordPress Gutenberg editor is the modern and latest drag-and-drop system tool, with plenty of useful features. But, it is one big change in a way WordPress functions, and not everybody feels that it is the change for better.

Gutenberg editor is also introducing the brand-new way of creating content that offers many more options than the traditional editor. Though it has a few drawbacks, like lack of accessibility or potential to cause the compatibility errors. Suppose you want to use Gutenberg editor, all you have to do is to update your website when 5 roll over. Or, you may use the Classic Editor plugin just too efficiently avoid the change (momentarily).

Leave a Comment