WebsiteHowTo.org is a free guide for people who want to create their own website. Since we provide this information for free, we need some kind of support for running this site and keeping it up to date. We earn commission if you purchase something through these referral links in our content: www.bluehost.com We love these services, but we recommend you to also read some other reviews, to come to your own conclusion.

WordPress Gutenberg Editor Complete Tutorial (WordPress 5.0)

A simple yet compelling insight into the Classic WordPress and WordPress 5.0 and Gutenberg

Breaking the silence – Gutenberg is a take on a new editor for WordPress. It is named after Johannes Gutenberg, who invented a printing press with movable type more than 500 years ago.

FYI – Gutenberg was officially released as part of WordPress 5.0 on December 6, 2018.

“Gutenberg” is the name of the project to create a new editor experience for WordPress. The goal is to create a new post and page editing experience that makes it easy for anyone to create rich post layouts.

Let’s say Hello to the new editor! Oh the enriching texture, pages and posts – it’s exotic! 

The typing experience

With Gutenberg, it is not just to create a seamless post- and page-building experience, but also to ensure that it provides a seamless writing experience. The old WordPress Classic Editor presented a very text-oriented experience. Type your article into the editor, add some formatting with the toolbar buttons, but Gutenberg breaks the content into blocks. A Gutenberg block can be any type of content — simple text, an image, a photo gallery, an audio recording, a dynamically generated list of recent posts, you name it.

How to Install Gutenberg

As of writing this, the Gutenberg plugin currently has a little over 20,000 active installs with over 290,000 total downloads and a 2.5 out of 5-star rating. It also requires WordPress version 4.8 to use it. 

You can download the latest version of Gutenberg from the WordPress repository or by searching for it within your WordPress dashboard under “Add New” plugins. Again, we recommend installing this on a test site or utilize your host’s staging environment. 

How to return/revert back to the classic version

WordPress makes it easy to disable Gutenberg and return to using the classic editor (aka TinyMCE). First, you’ll need to install & activate the Classic Editor plugin. After that, let’s walk through a few different options you have. 

Classic Editor restores the previous Edit Post screen and makes it possible to use the WordPress plugins that extend it, add old-style meta boxes, or otherwise depend on the previous editor.

—WordPress

WordPress Classic Editor Plugin – when disabling Gutenberg, you have two different modes to choose from:

Always use the classic editor (completely removes Gutenberg) and/or switch between Gutenberg & the classic editor (using different links). 

Always Use Classic Editor

This is the default option. As soon as you activate the plugin, Gutenberg will be completely disabled. All of your post & page edit screens will look like they did in WordPress 4.9 and below. That’s it! Happy editing

Switch Between Gutenberg & Classic Editor

If you want to be able to use both editing methods, perhaps during a transitional time where you’re still learning Gutenberg, this is a great option.

  • Head over to Settings > Writing, and look for “Classic editor settings.”
  • Check the box that says “Do not replace the editor.”
  • Save Changes

Blocks

What’s The Difference Between Block Editor (Gutenberg) and Classic Editor?

Before we dive into the new editor, let’s first compare and understand the differences between Gutenberg Block Editor and the Classic Editor.

Here is what the classic editor in WordPress looked like:

If you upgrade to WordPress 5.0, then this is what the new block editor looks like:

As you can see, they are two completely different editors for creating content in WordPress.

In 2017, the WordPress team announced that it had begun work on a new editor based on movable ‘blocks’. This editor was given the name Gutenberg, and it will soon become a default feature of the platform.

The Gutenberg editor is designed to help users create more dynamic layouts. It lets you use a drag-and-drop system to build pages and posts using a variety of pre-built blocks. Each block is customizable, with its own unique set of options such as size, placement, and colors.

Essentially, Gutenberg replaces the single edit field of the current WordPress TinyMCE editor with lots of individual “blocks”.

These blocks, then allow you to build more complex designs than those allowed in the old classic WordPress editor.

So what’s a block?

Well, a block can be pretty much anything. For example, you can have blocks for:

  • Regular text
  • Images
  • Video Embeds
  • Buttons
  • Widgets (yes, those same widgets you use in your sidebar)
  • Tables

Do you have to use the new block editor? Can you keep the previous WordPress editor?

No, you do not have to use the new block editor, and yes, you can keep using the previous WordPress editor. To deactivate the Gutenberg block editor and return your site to the classic editor after upgrading to WordPress 5.0, you can use the official Classic Editor plugin.

How is the new WordPress block editor better than the classic editor?

The new WordPress block editor offers a simple way to add different types of content to your posts and pages.

Tutorials for 10 most used blocks

Let’s dig into the broad types of blocks and how to use them!

Creating a New Blog Post or Page Using The Block Editor – Simply click on Posts » Add New menu in your WordPress admin. If you are creating a page, then go to Pages » Add New menu. (Illustrated below)

This will launch the new block editor.

Add a Block in Gutenberg 

By default, the next block is a paragraph block. This allows users to start writing right away.

However, if you want to add something different, then you can click on the add new block button on the top left corner of the editor, below an existing block, or on the left side of a block. 

Clicking on the button will show the add block menu with a search bar on top and commonly used blocks below.

Adding an image in the new WordPress editor

Simply add the block and then upload an image file or select from the media library.

Working with Blocks in The New Editor

Adding a link in new block Editor

The block editor comes with several blocks where you can add text. You can also insert a link using the keyboard shortcut, which is Command + K for Mac and CTRL + K on Windows computers.

Adding an image gallery in Gutenberg

The gallery block works like the image block. You add it and then upload or select image files.

Adding shortcodes in WordPress posts using Gutenberg

All your shortcodes will work just like they did in the classic editor. You can simply add them to a paragraph block, or you can use the shortcode block.

Adding a button in WordPress posts and pages

Adding a button to your blog posts or pages was another annoyance in the classic editor. You either had to use a plugin that created a shortcode for the button, or you had to switch to HTML mode and write code.

Gutenberg comes with a button block that allows you to quickly add a button on any post or page.

Each block comes with its own toolbar which appears on top of the block. The buttons in the toolbar would change depending on the block you are editing.

Editor Blocks

Editor Blocks is another neat collection of Gutenberg blocks that you can use. It comes with useful blocks like author profile, hero image, pricing table, brands, features, and more

Stackable

Gutenberg Blocks are a collection of beautifully designed Gutenberg blocks that you can use on your website. It includes blocks for the container, posts, feature grid, accordion, image box, icon list, call to action, and more.

Advanced Gutenberg

This one comes with several blocks for popular content elements like WooCommerce product sliders, testimonials, maps, counter, tabs, accordions, and more.

It also gives you advanced control on which users can access blocks based on their user roles. You can create user profiles and select which blocks they can add.

Social Media Embedment

Gutenberg introduces new embed blocks to the block editor. There is a block for all supported embed types including YouTube, Twitter, Facebook, and more.

Creating multi-column content 

It was another issue that the classic editor didn’t handle at all. The block editor allows you to add Columns block, which basically adds two columns of paragraph blocks.

Adding beautiful cover images in blog posts and landing pages

Another cool feature that you may want to try is the ‘Cover’ block, which allows you to add cover images to your posts and pages.

Creating tables inside articles

The classic editor didn’t have a button to add tables into your WordPress posts. You had to use a plugin or create a table writing custom CSS and HTML.

The new Gutenberg editor comes with a default Table block, which makes it super easy to add tables into your posts and pages. Simply add the block and then select the number of columns and rows you want to insert.

Keyboard shortcuts for WordPress Gutenberg Editor

Are there Keyboard Shortcuts for Gutenberg?  Yes. There is a lot! There is a help modal showing all available keyboard shortcuts.

You can see the whole list going to the top right corner menu of the new editor and clicking on “Keyboard Shortcuts” (or by using the keyboard shortcut Shift+Alt+H on Linux/Windows and ⌃⌥H on MacOS).

This is the canonical list of keyboard shortcuts:

All in one

Even though the editor is very straightforward, you can make things even easier on yourself by checking out the handy cheat sheet for WordPress 5.0 that we have over here.

Gutenberg vs. Classic: An Analysis

A Gutenberg Surprise not everyone is too comfortable using the new version, but Gutenberg is the way of the future for WordPress. You can also see the emergence of a lot of Gutenberg-friendly themes, which will be designed to take advantage of all the new features the editor offers, such as Atomic Blocks and even the new default theme, Twenty Nineteen that proclaims their Gutenberg-first focus.

All positives aside, there is some problem with it too, such as backward compatibility issues of the plugin might effect in the codes and functionality of Gutenberg WordPress editor. Although the intention is to provide an intuitive interface, but adopting with the changes is something that is not required. 

Advice:  Big changes to your favorite platform can be difficult to accept. Gutenberg is a bold leap forward, and it’s not the only update that’s coming up.

The version is very user-friendly and quick-to-adapt, therefore I suggest you take your big leap – knowing it has reverted option as well (as discussed above)!

The WordPress’ new Gutenberg editor is an innovative drag-and-drop design tool, with lots of helpful features.  The Gutenberg editor is introducing a brand-new way to create content, which offers more options than the traditional editor. It also has some drawbacks, however, such as a lack of accessibility and the potential to cause compatibility errors.

One still has the right to choose to work with the Classic Editor Plugin after the full implementation of the Gutenberg editor. What we do know is that Gutenberg has come as part of WordPress 5.0.