Beginner’s Guide to Gutenberg Editor

Gutenberg is the future WordPress Editor. This brand new editing experience is expected to come with WordPress 5.0. The main goal of this editor is to provide a better content creation experience for everyone.

We have been using the previous editor since forever. Gutenberg will replace the old TinyMCE editor and there will be a massive change in the way we create posts/pages.

Previously, we had a single box where we add our text, images, videos etc. With Gutenberg, instead of a single box, we will have blocks. (Explaining that in a bit.)

From Official Gutenberg Handbook:

“The editor will endeavor 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.”

What are Gutenberg Blocks?

Essentially, a block can be pretty much anything. Every little part of a content is considered a block. Here are some things which can be added as content blocks in Gutenberg:

  • An Image
  • A Paragraph
  • A Heading
  • A Button
  • A List

This post was written with Gutenberg. The list you just read is a block.

Here’s how the list was added:

The heading is a block. All these paragraphs are blocks. So, blocks are the building blocks of your post/page.

Blocks can be re-arranged, moved around, changed to your needs. And that gives you much more control and flexibility to create your posts/pages.

By default, Gutenberg comes with lots of blocks.

Developers can create their own blocks too. That means shortcodes can be replaced with blocks.

Instead of inserting an ugly shortcode with attributes, you can just add the block in your post and you’re good to go. 

Diving Into the Gutenberg Editor

Gutenberg is not merged with core yet. But you can still try it if you want. It’s available as a plugin in WordPress Plugin Repository.

You can get it from here.

Warning: You should try it on local host or staging environment since Gutenberg is not merged into core yet.

You can install it just like any other WordPress plugin.

After you install the plugin, you will see a new menu item – ‘Gutenberg’ on your dashboard. There are three items under the menu item.

  • Demo – Opens up the editor with dummy content in it. You can play around with the editor here. You can see all the basic blocks in action here.
  • Feedback – This opens a form which lets you give feedback about the editor to the Gutenberg Development team. You can ask support questions too.
  • Documentation – Open the official Gutenberg Documentation. You can check the documentation here.

You can try the editor using the ‘Demo’ option or alternatively you can create a new post with the editor. But creating one from scratch will give you more knowledge of the editor.

Interface Of the Gutenberg Editor

Now, let’s take a look at the interface of the editor, what different parts and elements of the editor can do.

Let’s learn about the different parts of the editor.

1. Editing Toolbar

On the very top, marked in green is the Editing toolbar. Editing Toolbar has lots of functionalities.

The + sign on the left, lets you add a block to the content area.

Inserting Gutenberg Blocks

After that, there are undo-redo buttons which lets you undo/redo changes you have made.

The little i sign next to them, is the content structure. You can view your content structure summary by clicking on it. Here’ how it looks.

Gutenberg Content Structure

Then we have the save button or the confirmation showing the changes are saving.

Besides that is the Preview button, let’s you preview your post on a new tab.

Then we have the Publish button which lets us configure visibility, publish date/time.

Advanced Settings button shows/hides the advanced settings sidebar on the right.

Last, the additional settings including

  • Visual Editor/Code Editor Selection.
  • Fixing the Toolbar to top.
  • Copy all content.

2. Title

Next we have the title section of the editor, marked in black.

This is the post/page title.

When you click on the title section, you can see the permalink above the title. You can copy the permalink using the Copy button.

3. Content Area

Next comes the content area, marked blue.

Content area is where we add our content. Previously, it was the TinyMCE editor.

Now, we will use different blocks to create our content.

Most of the blocks has a Block Toolbar which shows up when you click on that block. Different blocks will have toolbars with different controls.

Check out the example below.

We have toolbar to edit the block content. We have two buttons on the side that we can use to move the block up/down.

We also have additional settings which lets us edit the block as HTML, duplicate, remove, turn it into other block etc.

There’s an item in Editing Toolbar – Fix Toolbar at top. What this does is – instead of showing the Block toolbar above the block, it shows in the Editing toolbar.

4. Advanced Settings

Advanced Settings section resides on the right sidebar of the editor.

It has two sections.

  • Document Settings (Post/Page Settings)
  • Blocks Settings

Document Settings are the posts settings that includes Status & Visibility,  Categories, Tags, Featured Image etc.

This is almost like the classic editor. We used to have those settings in classic editor too.

Other settings that were located bottom in the classic editor like Excerpt, Discussion, these are also added in the document settings section.

Block Settings are advanced settings for individual blocks.

When you click any block to edit, advanced settings for that block appears here.

On the example, you can see block settings for a Paragraph block.

Over To You

Those are the basics of Gutenberg Editor. Try it out, play around with it. We hope you like Gutenberg as much as we do.

If you face any issues or feel anything missing, let the Gutenberg Development team know through support forum or create a Github Issue.

You can ask us too through the comments. Let us know how you feel about this big change in WordPress.