The WordPress Block Editor - Toolbar

WordPress Block Editor – Editing Toolbar

WordPress Gutenberg Content Editor Interface - Editing Toolbar
Editing Toolbar

This tutorial is part of our series on How To Use The WordPress Block Editor (Gutenberg).

***

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.

WordPress Content Editor: 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.

WordPress Block Editor - Editing Toolbar.
The Editing Toolbar.

The editing toolbar allows you to perform various functions, including:

  • Add a new block in your content area
  • Undo/Redo changes
  • View content structure information
  • View block navigation information
  • Save changes (and view saved and auto-saved confirmations)
  • Change Post/Page status from ‘draft’ to ‘published’ and vice-versa
  • Preview your post or page
  • Publish/update your post or page
  • Show/Hide the ‘Settings’ section
  • Show ‘Options’ section

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 ‘Options’ section below).

WordPress Block Editor - Editing Toolbar
The Editing Toolbar with an embedded block editor.

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

WordPress Block Editor - Editing toolbar features.
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).

WordPress Block Editor - View Posts/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.

WordPress Block Editor: Editing Toolbar - Add Block tool.
Editing Toolbar – Add Block tool.

Tools

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

Currently, you have the option of using two tools:

  • Edit
  • Select
WordPress Block Editor: Editing Toolbar - Tools.
Editing Toolbar – Tools.

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

WordPress Block Editor: Editing Toolbar - Select tool.
Editing Toolbar – Select tool.

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

WordPress Block Editor: Editing Toolbar - Edit tool.
Editing Toolbar – Edit tool.

Undo & Redo

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

  • Restores previous actions when typing content.
  • Restores the position of any blocks that have been rearranged.
WordPress Block Editor: Editing Toolbar - Undo and Redo buttons.
Editing Toolbar – Undo and Redo buttons.

Content Structure

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

  • Number of Words
  • Number of Headings
  • Number of Paragraphs
  • Number of Blocks
  • Document Outline (like a Table of Contents)
WordPress Block Editor: Editing Toolbar - Content structure.
Editing Toolbar – Content structure.

Block Navigation

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

WordPress Block Editor: Editing Toolbar - Block navigation.
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.

WordPress Block Editor: Editing Toolbar - Switch to draft button.
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.

WordPress Block Editor: Editing Toolbar - Switch to draft.
Using Switch to draft.

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

WordPress Block Editor: Editing Toolbar - Publish.
Switch between Draft and Publish mode as often as you like.

Preview

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

WordPress Block Editor: Editing Toolbar - 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.

WordPress Block Editor: Editing Toolbar - Preview your post/page.
Preview your post/page in different modes.

Publish/Update

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).

WordPress Block Editor: Editing Toolbar - Publish/Update button.
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.

WordPress Block Editor - Pre-publishing checks
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.

WordPress Block Editor - Edit your publishing settings.
Edit your publishing settings.

Your post/page will be published.

WordPress Block Editor: Post 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…

WordPress Block Editor - View Post button.
View your published post.

Or copying your post/page URL to your clipboard…

WordPress Block Editor - Copy Link button.
Copy your post/page URL to your clipboard.

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

WordPress Block Editor - Always show pre-publish checks.
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 section).

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

WordPress Block Editor - Close panel button.
Close the publishing panel after publishing your post/page.

You will return to the main content editor screen.

WordPress Block Editor - Content Area screen.
The WordPress Block Editor Content Area.

Important

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:

  • Published: Published posts and pages display to everyone who visits your site unless they’re set as ‘Private’ or ‘Password-Protected’ (see ‘Visibility Settings’  in the Block Editor Settings tutorial).
  • Draft: A draft post is not visible to your site visitors and registered members or users unless they are a site administrator.
  • Pending Review: A post marked as ‘Pending Review’ is similar to a draft post but needs to be reviewed and approved for publication by a user with a minimum permission-level of Editor.

To learn 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.

WordPress Block Editor: Editing Toolbar - Settings button.
Editing Toolbar: Settings button.

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

WordPress Block Editor: Editing Toolbar - Settings button.
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).

WordPress Block Editor: Editing Toolbar - Settings button.
Using the Settings button to display/hide your post/page settings.

Options

WordPress has added a new feature to the block content editor called ‘Options’.

Click on the vertical ellipsis (three dots) icon to display the ‘Options’ menu.

WordPress Block Editor: Editing Toolbar - Options.
Editing Toolbar – Options.

Using the Options section is covered in this tutorial: WordPress Block Editor Settings

WordPress Block Editor: Editing Toolbar - Options menu.
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.

WordPress Block Editor - Editing Toolbar.
The WordPress Block Editor’s Editing Toolbar.

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

***

Print Friendly, PDF & Email

Updated: April 8th, 2023

Terms Of Use | Privacy Policy

Scroll to Top