The Gutenberg Interface looks quite a bit different than the Classic Editor. This page will show you some of the differences.
Three Main Sections
The Gutenberg interface is made up of three main areas:
- Editing Toolbar – It sits at the top of the screen. It is outlined in Red in the image below.
- Content Area – This is the large area below the Editing Toolbar outlined in blue. This is the place you add all of your content.
- Advanced Settings – This is the right sidebar, outlined in green below. It includes both Document and Block level settings.
1. Editing Toolbar
In the Editing Toolbar, you can do the following:
- Add a new block using the (+) symbol.
- Undo/Redo changes you have made using the back and forward arrows.
- View your content’s structure using the (i) symbol. This includes number of words, paragraphs, blocks, and headings.
- Navigate to a section of your page using the Block Navigation tool
- Preview your Page or Post
- Publish your Page or Post
- Show or Hide the Advanced Settings right sidebar by clicking the Gear icon.
- The three dots open another section of settings including:
- View (Top toolbar, Spotlight mode, Fullscreen mode)
- Toggle between the Visual and Code editors
- Copy all content
- Additional tools and options
2. Content Area
The content area is where you do most of your work. It is similar in function to the classic WordPress editing screen, but now you will use blocks instead of TinyMCE.
Block Toolbar
The block toolbar is a smaller toolbar that appears above each individual block. You can turn this off if it gets in the way by clicking on the three dots in the upper right and selecting ‘Top Toolbar’. This will place the formatting toolbar for each block at the top in the Editing Toolbar.
3. Advanced Settings
The Advanced settings area is located in the right sidebar. It includes both Document Settings and Block Settings.
Document Settings
The Document settings are the Post/Page settings. They are specific to the Page or Post you are editing. They include most of the same information that was in the right sidebar of the classic editor:
- Status, visibility and publish date (both)
- Featured Image (both)
- Permalink (both)
- Discussion (both)
Revisions (both) - Post format (Posts only)
- Categories (Posts only)
- Tags (Posts only)
- Page Attributes (Pages only)
- Excerpt (Posts only)
Block Settings
The Block Settings will change for each individual block that you are on. The block toolbar contains the most commonly used settings, but there may be more options in the Block Settings.