The Gutenberg Interface, Explained

Using the image above as a guide, let's talk about each section of the Gutenberg interface. After describing each section, I'll explain how to use each area of the interface to optimize & streamline your content creation experience in WordPress.

3 Main Sections

The Gutenberg interface is comprised of three main areas:

1. Editing Toolbar: Very top of screen, outlined in red
2. Content Area: Large area on the left side of the screen, outlined in blue
3. Advanced Settings: Right sidebar area, outlined in green

Each of these areas contain additional sections with different settings. Let's break them down even further.

1. Editing Toolbar

Located at the very top of the screen, the editing toolbar allows you to do the following:

• Add a new block to the content area
• Undo/Redo changes you've made
• View your content's structure (number of words, paragraphs, blocks, headings, and a table of contents)
• Save your changes, or see a visual confirmation that your latest changes have been auto-saved
• Preview your page/post
• Publish settings, such as post visibility & publish date/time
• Show/Hide the advanced settings right sidebar
• Additional settings, including:
  • Switch between visual & code editors
  • Fix the block toolbar to the top of the screen (more on this below)
  • Copy all content

2. Content Area

The content area is where you add content to your page. This is essentially the same as it was in the classic WordPress editing screen. Only now, instead of using TinyMCE to edit content, you're using Gutenberg blocks.

NOTE: Some themes do a nice job of displaying styles within the content area, so a block's style will appear exactly as it appears here, in the backend. Other themes could fall short in this area. It will be theme dependent.

Block Toolbar

The block toolbar is the smaller toolbar that appears just above each individual block. The block toolbar shows up when you click inside of a block to edit it.

Different blocks will have different toolbars. This is because the features that are available to each block are different. For example, the paragraph block has bold, italics, strikethrough, links and alignment available to it. But the shortcode block actually has no options, because everything is managed within the shortcode.

3. Advanced Settings

The advanced settings area is located in the right sidebar, and comprised of two distinct sub-sections:

• Document Settings
• Block Settings

Document Settings (aka: Page Settings)

I like to think of these as page (or post) settings. They are the settings that apply to that one specific page or post that you are editing.

Document settings contains much of the same information that was in the right sidebar of the classic WordPress editor:

• Status, visibility & publish date
• Post format
• Categories
• Tags
• Featured image

It also includes some things that you were used to seeing below your content (at the bottom of the page):

• Author
• Discussion settings
• Excerpt

Block Settings

This is where you'll find advanced settings for each individual block on your page.

The block toolbar, directly above the block itself (in the content area), contains the most commonly used, and most basic, settings. However, many blocks have even more options, and those can be configured here in the right sidebar.

NOTE: Not all blocks have advanced settings. Sometimes you won't see anything in this area, for example, with shortcode & custom HTML blocks.

---

That does it for our overview of the Gutenberg interface.

Up Next: Explore all Gutenberg blocks and learn how to use each one.