WordPress For Non-Techies: Free WordPress Tutorials – WPCompendium.org

WordPress Content Editor Interface – Editing Toolbar

For a white label version of this tutorial visit WPTrainingManual.com.

WordPress Block Editor – Editing Toolbar

WordPress Gutenberg Content Editor Interface - Editing Toolbar
Editing Toolbar

This tutorial is part of our series WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users.


The WordPress block content editor interface is divided into three main sections:

  1. Editing Toolbar (you are here)
  2. Content Area
  3. Settings Section

In this tutorial, you will learn how to use the Editing Toolbar section of the WordPress block editor.

For a complete understanding of how to use the WordPress Block Editor, see the other tutorials in this series:


WordPress Content Editor: Editing Toolbar

The uppermost section of the WordPress block editor is called the Editing Toolbar.

The Editing Toolbar is the section at the top of the WordPress block editor.

The Editing Toolbar features run across the entire width of the content editor screen.

The Editing Toolbar.

The editing toolbar allows you to perform a number of functions, including:

This section can also display additional information depending on how your settings are configured, such as fixing the block toolbar to the top of the screen (see ‘More Tools & Options’ section below).

The Editing Toolbar with an embedded block editor.

The section on the top left corner of the Editing Toolbar contains the following functions:

Features of the Editing Toolbar.

View Posts/Pages

Click on View Posts (or View Pages if working with Pages) to return to your Table of Posts (Posts > All Posts) or Table of Pages (Pages > All Pages).

Click on View Posts/ Pages to view the Table of Posts/Pages.

Add Block

Clicking on the ‘Add Block’ [+] tool brings up a menu containing a list of all the available blocks you can use.

Editing Toolbar – Add Block tool.


The Tools button specifies how you interact with blocks (i.e. block selection & editing).

Currently, you have the option of using two tools:

Editing Toolbar – Tools.

Use the Select tool to select a block. (Tip: Press the Escape key to switch to the Select tool).

Editing Toolbar – Select tool.

Once a Block is selected, press the Enter key to return to the Edit tool.

Editing Toolbar – Edit tool.

Undo & Redo

Clicking on the ‘Undo’ or ‘Redo’ buttons while adding or editing content before saving your changes:

Editing Toolbar – Undo and Redo buttons.

Content Structure

Clicking on the ‘Content Structure’ icon displays information about your content like:

Editing Toolbar – Content structure.

Block Navigation

Click on the ‘Block Navigation’ icon to display the structure and layout of your content blocks.

Editing Toolbar – Block navigation.

Switch To Draft

Click on the ‘Switch to Draft’ link to convert a published post or page into a draft document.

Editing Toolbar – Switch to draft.

When asked to confirm your choice, click ‘OK’ to revert your published post/page to ‘Draft’ status, otherwise click ‘Cancel’ to keep the current status of your post/page.

Using Switch to draft.

You can switch posts/pages from ‘Draft’ to ‘Published’ status and vice-versa at any time.

Switch between Draft and Publish mode as often as you like.


To see what visitors will see when they visit your post/page, click the ‘Preview’ button.

Editing Toolbar – Preview button.

You can preview your post/page as it will display on a desktop, tablet, or mobile device screen, or open the preview window in a new tab.

Preview your post/page in different modes.


The ‘Publish’ section lets you publish new posts/pages and update existing posts/pages.

To publish your post or page, click on the ‘Publish’ button (or ‘Update’ if editing an existing post or page).

Publish/Update button.

The block editor provides an optional pre-publishing check function that reminds you to double-check your settings and confirm before publishing.

Pre-publishing checks make sure that you’ve completed all the steps prior to publishing your post/page.

Edit your publishing settings, then click the ‘Publish’ button again to proceed.

Edit your publishing settings.

Your post/page will be published.

Your post/page is now live!

After your post/page has been published you will be given a couple of options like viewing your post/page…

View your published post.

Or copying your post/page URL to your clipboard…

Copy your post/page URL to your clipboard.

To turn off this option deselect the ‘Always show pre-publish checks’ checkbox.

Deselect Always show pre-publish checks box to stop showing these.

Note: you can also deselect this option in the ‘Options’ screen (see Block Editor Settings [INSERT-WPTM-044-URLHERE] section).

After publishing, close the panel to continue working inside the content editor.

Close the publishing panel after publishing your post/page.

You will return to the main content editor screen.

The WordPress Block Editor Content Area.

If you’re not sure what different post or page statuses mean, this will help you:

Page/Post Status

In WordPress, Posts and Pages can be assigned the following status:

To learn more about assigning user permissions in WordPress, see this tutorial: How To Manage WordPress Users

Hide/Display Settings

Click on the Gear icon to bring up your post or page Settings section.

Editing Toolbar: Settings button.

Clicking on the ‘Settings’ icon alternates between displaying and hiding the Settings section.

Click the Settings button to display or hide your post and page settings.

You can also hide the Settings section by closing the sidebar (X).

Using the Settings button to display/hide your post/page settings.

More Tools & Options

WordPress has added a new feature to the block content editor called ‘More tools & options’.

Click on the vertical ellipsis (three dots) icon to display the ‘More tools & options’ menu.

Editing Toolbar – More tools & options.

Using the More tools & options feature is covered in this tutorial: WordPress Block Editor Settings

More tools & options menu.

Note: The Editing Toolbar section can display additional information depending on how your site’s settings are configured and what additional plugins you have installed on your site.

Congratulations! Now you know how to use the Editing Toolbar of the WordPress block content editor.

The next step is to learn about the WordPress block editor’s Content Area.

For more tutorials about using the block editor, go here:


Learn how to use the WordPress Block Editor’s Editing Toolbar.



"I was absolutely amazed at the scope and breadth of these tutorials! The most in-depth training I have ever received on any subject!" - Myke O'Neill, DailyGreenPost.com

We are not affiliated, associated, sponsored, or endorsed by WordPress or its parent company Automattic. This site contains affiliate links to products. We may receive a commission for purchases made through these links.

For a white label version of this tutorial visit WPTrainingManual.com.