We use cookies to ensure you can get the best experience on our site. If you keep using this site we assume that you agree to our use of cookies. Privacy Policy OK

Gutenberg Tutorial: The Interface of the WordPress Block Editor

by | October 4, 2021

Gutenberg Tutorial: The Interface of the WordPress Block Editor Featured Image

What you need to know:

The interface of Gutenberg, the WordPress Block Editor, is comprised of a Main Content Area, a Top Toolbar, and a Sidebar. In addition, you will find a Contextual Toolbar and a Status Bar. You use the main content area to work with blocks while the top toolbar, the contextual toolbar, and the sidebar help you customize and manage your blocks.

Back in 2018, WordPress 5.0 was released to the public and one of its major features was the introduction of Gutenberg, the new WordPress Block Editor. Unlike other updates which tend to be iterative and simply build on what was already there, Gutenberg was a complete reimagining of the content creation experience in WordPress.

Gutenberg promises to allow greater flexibility while remaining easy to use. While the WordPress Block Editor is indeed intuitive and modern, it can take a bit of time to get used to it and to fully leverage all of its features. And that’s where this tutorial comes in. Read on as we take you on a brief tour around the new WordPress editor and highlight the various useful features and new capabilities.

Table of Contents:

What Is Gutenberg in WordPress?

Before we dive into Gutenberg’s interface, we’ll provide you with an overview of Gutenberg itself. Gutenberg, known also as the Block Editor in WordPress, is the new way to create posts, pages, and even widgets. If you have never used Gutenberg before, we highly recommend going through our Gutenberg Basics tutorial where we’ll show you how to publish your first post using the WordPress Block Editor.

What Are Gutenberg Blocks?

Unlike most WYSIWYG editors, Gutenberg is not a free-form text editor where you insert images and other media right inside your text. Instead, Gutenberg encapsulates every piece of content in its own block. So, you can have a paragraph block which is next to an image block that is followed by a quote block, for example. Each of these blocks is completely standalone and can be manipulated without affecting the other surrounding blocks.

If you wish to learn more about blocks, you should check our article that describes the blocks available in WordPress.

Tip:

Third-party plugins can greatly expand the number of available blocks in the Block Library. We have a list of the best plugins that would add new blocks for you to use.

How Can I Access Gutenberg in WordPress?

You can access Gutenberg, the WordPress Block Editor, when you try to create a new post. In addition, creating new pages and widgets will also bring up Gutenberg.

These block-powered experiences are what the WordPress developers refer to as Full-Site Editing. The goal is to one day be able to create every single element on your website using the Gutenberg blocks.

Tip:

Are you itching to try the WordPress Block Editor but don’t have your own website yet? Then, we invite you to sign up for our free hosting package that will allow you to create a WordPress website absolutely for free! And if you ever need additional features or functionality, you can upgrade to a premium plan, a Semi-Dedicated server, or a VPS instance with just a few clicks.

Overview of the WordPress Block Editor Interface

Broadly speaking, the WordPress editor’s interface can be broken down into five segments:

  • The Top Toolbar contains general-purpose options. Here, you’ll find your undo/redo buttons, the Publish button, various Gutenberg settings, and the Block Library.
  • The Main Content Area is located right below the Top Toolbar. Here, you can add new blocks to enrich your content.
  • The Contextual Toolbar appears within the Main Content Area whenever you select a block. The settings within the Contextual Toolbar will vary depending on the type of block that was selected.
  • The Sidebar is located next to the Main Content Area. There are two tabs in the sidebar. The first tab contains general settings about the post or page, such as its categories, tags, featured image, publish status, and more. The second tab, on the other hand, contains different settings depending on the block that you have currently selected.
  • Lastly, the Status Bar simply shows you where your selected block is located within the document structure.
The WordPress Block Editor interface can be divided into five general sections: the Top Toolbar, the Main Content Area, the Contextual Toolbar, the Sidebar, and the Status Bar.
The WordPress Block Editor interface can be divided into five general sections: the Top Toolbar, the Main Content Area, the Contextual Toolbar, the Sidebar, and the Status Bar.

Opening the Gutenberg Editor for the First Time

When you open the Gutenberg editor for the first time, you will see a Welcome Guide that will highlight the basics of using the block editor. You can go through the slides or click on the “x” button in the top right to dismiss the Welcome Guide.

The Welcome Guide gives you a brief introduction to Gutenberg the first time you start the WordPress Block Editor.

 

The Welcome Guide gives you a brief introduction to Gutenberg the first time you start the WordPress Block Editor.

Learning Gutenberg’s Top Toolbar

Gutenberg’s Top Toolbar is located at the top of the screen and contains a handful of options:

The Top Toolbar is located at the top of the WordPress Block Editor.

 

The Top Toolbar is located at the top of the WordPress Block Editor.

From left to right, the first button that we come across is the WordPress logo. Clicking on this button will take you out of Gutenberg and back into the WordPress back-end. Depending on what you were creating, you will end up in the All Posts, All Pages, or Widgets section.

Warning:

Clicking on the WordPress logo icon will lose any unsaved changes, so make sure that you have saved or updated your content before navigating away from Gutenberg.

The next button in the Top Toolbar is the Block Library. When you click on this button, you will see a full list of all available blocks that you can work with.

The Block Library is the place where you’ll find all available blocks in Gutenberg.

 

The Block Library is the place where you’ll find all available blocks in Gutenberg.

The Block Library consists of two tabs – one for single blocks and one for block patterns. To learn more, check our detailed guide to Gutenberg blocks.

Next, you will see the Tools button. Currently, this option allows you to control what happens when you click on a block with your mouse. You can either start editing the chosen block or you may simply select the block for bulk editing.

The Tools button holds a few options related to the mouse cursor.

 

The Tools button holds a few options related to the mouse cursor.

The next two buttons are arguably everyone’s favorites – the Undo and Redo buttons. You can use those to undo and redo your edits.

After the Undo and Redo buttons, we get an Information popup. This popup will give you an overview of your content such as how many words you have written, how many paragraphs there are, how many blocks you have used, and more.

The Information popup can show you how many words you have written.

 

The Information popup can show you how many words you have written.

Going with the theme of content overviews, the List View shows you an outline of the various blocks that are currently in use. This can be especially helpful in more complex layouts where blocks are nested inside of other blocks. You can click on an element in the List View to jump to that element in the Main Content Area.

The List View shows you an overview of all used blocks.

 

The List View shows you an overview of all used blocks.

If you have used WordPress in the past, you will be familiar with the next three buttons: Save Draft, Preview, and Publish. These allow you to save your changes, see how your content would look like when published, and actually publish your content. Once your content is published, Save Draft will become Switch to Draft and Publish will be replaced by Update.

The Save Draft, Preview, and Publish buttons are located on the right side of the Top Toolbar.

 

The Save Draft, Preview, and Publish buttons are located on the right side of the Top Toolbar.

When you are about to publish your post or page, WordPress will provide you with a brief checklist to make sure that there are no issues with your content. We have a separate article where we go over the pre-publishing checklist and provide tips and tricks on other ways to augment the publishing experience.

The last two buttons in the Top Toolbar allow you to toggle the Sidebar and to adjust settings related to the Gutenberg editor.

The last two buttons in the Top Toolbar allow you to toggle the Sidebar and to adjust settings.

 

The last two buttons in the Top Toolbar allow you to toggle the Sidebar and to adjust settings.

Tip:

If you are interested in making Gutenberg your own, we highly recommend our tutorial on customizing the Gutenberg editor.

Exploring the Main Content Area

Gutenberg’s Main Content Area is located just below the Top Toolbar. This is the place where you will be interacting with your blocks.

The Main Content Area is located below the Top Toolbar.

 

The Main Content Area is located below the Top Toolbar.

The Main Content Area is split into two sections by a divider. The upper section holds the title field while the lower section is designed to hold your blocks.

Tip:

If you use plugins that augment the writing experience in WordPress by adding more functionality, you will find this new functionality either in the Sidebar or below the Main Content Area.

When you start adding blocks in the Main Content Area, you will notice that a separator line appears between the blocks. On that line, you’ll see a “+” button. Clicking on that button would allow you to insert a new block where the separator line is located.

There is a hidden separator between every two blocks that allows you to insert a new block there.

 

There is a hidden separator between every two blocks that allows you to insert a new block there.

Exploring the Contextual Toolbar

As soon as you start working with blocks in the Main Content Area, you will notice an additional Contextual Toolbar that appears every time you select a block.

A Contextual Toolbar appears every time you select a block in the Main Content Area.

 

A Contextual Toolbar appears every time you select a block in the Main Content Area.

The Contextual Toolbar lists the most used options. If you cannot find the option that you need, try clicking on the three-dot button at the end of the toolbar. It contains a menu with additional options.

The Sidebar in the Gutenberg editor is located to the right of the Main Content Area. If your sidebar is hidden, click on the cogwheel icon near the end of the Top Toolbar to reveal it.

You will find two tabs in the Sidebar. The first tab is all about managing the properties of your page or post. If you have used the classic WordPress editor in the past, these options will be familiar to you:

  • The Status & Visibility section lets you control the state and visibility of your page or post.
  • The Permalink section enables you to customize the permalink for your page or post.
  • The Categories section allows you to assign a category to your post.
  • The Tags section lets you assign tags to your post.
  • The Featured Image section can be used to assign a featured image to the page or post.
  • The Excerpt is used to store a summary of your content. Some themes may use the Excerpt.
  • Lastly, Discussion has controls for comments, pingbacks, and trackbacks.
The first tab contain options that closely match those that were available in the classic Post Editor.

 

The first tab contain options that closely match those that were available in the classic Post Editor.

Tip:

Plugins that add new functionality to the WordPress Block Editor will also present their options here in this first tab.

Tip:

The number of options in the first tab will vary depending on whether you are creating a post, a page, or a widget.

The second tab contained within the Sidebar is the Block tab. The contents of this tab change dynamically depending on the block that you have selected. When you have selected a block, you can find additional block-related options there.

Exploring the Status Bar

The last element of the WordPress Block Editor that we will note is the Status Bar. Located at the very bottom of the page, the Status bar is used to show you where your currently selected block is located within your document. This can be especially helpful if your page or post has a complex layout with many blocks nested inside one another.

The Status Bar is located at the very bottom of the WordPress Block Editor.

 

The Status Bar is located at the very bottom of the WordPress Block Editor.

Customizing the WordPress Block Editor

While Gutenberg has a lot going for it already, you can make it even better for your style of work by tweaking its settings. You can find the block editor settings by clicking on the three-dot icon at the end of the Top Toolbar.

The Gutenberg settings can be accessed via the last button in the Top Toolbar.

 

The Gutenberg settings can be accessed via the last button in the Top Toolbar.

Be sure to check these settings once in a while since most new WordPress versions bring improvements and new features to Gutenberg. You can learn what customization options are currently available by reading our guide on customizing Gutenberg. And if you are looking to customize your Gutenberg experience even further, check out our article where we list the five best plugins for Gutenberg.

Reverting to the Classic WordPress Editor

Of course, the new Gutenberg editor will not be to everyone’s liking. Thankfully, the developers behind WordPress have created an easy way to revert back to the classic Post Editor. If you wish to stick to the tried-and-true classic Post Editor, check our article on how to replace Gutenberg with the classic Post Editor.

Next Steps

Now that you know your way around Gutenberg’s interface, you’re one step closer to creating great-looking content with minimal effort. We recommend going through our tutorial on blocks in WordPress so that you get a better idea of the possibilities afforded by the existing block library. Lastly, you can make Gutenberg your own by customizing Gutenberg to your liking and installing plugins that enhance the WordPress Block Editor.

Related Posts

Gutenberg Tutorial: The Basics of the WordPress Block Editor

This crash course on Gutenberg, the WordPress Block Editor, will show you how to use blocks to construct and publish your first post.

How to Add Additional CSS to WordPress and Further Customize Your Website

Although, while creating your WordPress website, you will choose a theme that will determine the general look and feel of your website, most often than...

How to Add a Plugin to WordPress

Summary on How to Add a Plugin to WordPress Adding a plugin to your website could be the difference between an ideal website and a big dose of frustration....

awardspace logo
Where Ideas Turn Into Websites