WordPress Content Editor Interface – Editing Toolbar

Learn how to use the editing toolbar section of the WordPress Gutenberg content editor …

WordPress Gutenberg Content Editor Interface – Editing Toolbar

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


As discussed in this tutorial, the WordPress Gutenberg content editor interface consists of three main sections:

  1. Editing Toolbar (this section)
  2. Content Area
  3. Settings Section

In this tutorial, you will learn about the ‘Editing Toolbar’ section of the content editor.

For tutorials on the other sections of the Gutenberg content editor interface, go here:

WordPress Content Editor: Editing Toolbar

Editing Toolbar

(Editing Toolbar)

The editing toolbar is the strip found at the top of the content editor screen …

Editing Toolbar

(Editing Toolbar)

The editing toolbar allows you to perform a number of 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 ‘More Tools & Options’ feature

The ‘Editing Toolbar’ 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) …

Editing Toolbar - Block Toolbar

(Editing Toolbar – Block Toolbar)

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

Editing Toolbar features

(Editing Toolbar features)

Add Block

Clicking on the ‘Add Block’ (+) tool brings up a menu containing a list of all the available blocks you can use …

'Add Block' tool - Editing Toolbar

(‘Add Block’ tool – Editing Toolbar)

The ‘Add Block’ tool contains a ‘Search’ field and several menu sections:

  • Most Used
  • Common Blocks
  • Formatting
  • Layout Elements
  • Widgets
  • Embeds


  • Inline Elements – This menu displays if you click inside a block before selecting the ‘Add Block’ tool.
  • Reusable BlocksNote: At least one Reusable Block must be created for this section to display in the ‘Add Block’ tool’s menu section.

See the tutorial below to learn more about the blocks associated with each of these sections:

Select (or search and select) a block from the ‘Add Block’ menu …

Select a block from the 'Add Block' tool

(Select a block from the ‘Add Block’ tool)

Blocks are inserted into the Content Area below existing content …

Block added below existing content

(Block added below existing content)

You can reorder, rearrange, or reposition blocks using ‘move up’ or ‘move down’ arrows …

Reorder blocks using 'up' and 'down' arrows

(Reorder blocks using ‘move up’ and ‘move down’ arrows)

You can also place the block wherever you like by dragging and dropping blocks to rearrange your content layout …

Rearrange blocks using 'drag and drop'

(Rearrange blocks using ‘drag and drop’)

Rearranging blocks

(Rearranging blocks)

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.

Undo & Redo

(Undo & Redo) 

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)

Content Structure

(Content Structure)

Content Structure

(Content Structure)

Block Navigation

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

Block Navigation

(Block Navigation)

Switch To Draft

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

Switch to Draft

(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 …

Switch to draft

(Switch to draft)

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

Switch from 'Draft' to 'Publish'

(Switch from ‘Draft’ to ‘Publish’)


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



The preview window will open in a new tab …

(Post Preview)


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

(‘Publish/Update’ button)

Gutenberg provides an optional pre-publishing check function that reminds you to double-check your settings and confirm before publishing …

Pre-Publishing Checks

(Pre-Publishing Checks)

Click the ‘Publish/Update’ button again to proceed …

Publishing confirmation

(Publishing confirmation)

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

Post Published

(Post Published)

Or copying your post/page URL to your clipboard …

Copy Post URL

(Copy Post URL)

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

Deselect box to stop pre-publish checks

(Deselect box to stop pre-publish checks)

Note: you can also deselect this option in the ‘Options’ screen (see ‘Settings‘ section).

After publishing, close the panel to continue working in the content editor …

Close Panel

(Close Panel)

You will return to the main content editor screen.

Publishing options

(Publishing options)


If you’re not sure what different post or page statuses mean, this will hopefully 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 Settings tutorial).
  • Draft: A draft post is not visible to 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 how to assign user permissions in WordPress, see this tutorial:

Hide/Display Settings

Clicking on the ‘Settings’ icon hides the ‘Settings’ sidebar, allowing you to work in a ‘distraction-free’ content editing mode …

Hide/Show Settings icon

(Hide/Display Settings icon)

You can also hide the ‘Settings’ section by closing the sidebar …

Hide/Display Settings

(Hide/Display Settings)

More Tools & Options

Gutenberg has added a new feature to the WordPress content editor called ‘More Tools & Options’.

Click on the ‘More Tools & Options’ icon …

More Tools & Options

(More Tools & Options)

This brings up a menu with additional content editing tools and options …

More Tools & Options menu

(More Tools & Options menu)

These settings are divided into the following sections:

  • View
  • Editor
  • Tools
  • Options

This section lets you configure the following options to help you work more efficiently on your content:

  • Top Toolbar
  • Spotlight Mode
  • Fullscreen Mode
Top Toolbar

Making this section active lets you access all block and document tools from a single place …

(Top Toolbar)

To view the Block Editor settings inside a selected block, leave the ‘Top Toolbar’ option unselected …

Top Toolbar option unselected

(Top Toolbar option unselected)

This also displays the ‘More Options’ menu inside the selected block …

Block Editor setings and options

(Block Editor setings and options)

Turning on the ‘Top Toolbar’ option places the Block Editor at the top of your content editor screen …

Editing Toolbar - Block Toolbar

(Editing Toolbar – Block Toolbar)

And moves the ‘Add Block’ tool to the top of your block sections, replacing the Block Editor …

Top Toolbar option enabled

(Top Toolbar option enabled)

If you prefer the ‘Add Block’ tool at the top of your block sections instead of the Block Editor, then leave the ‘Top Toolbar’ option selected …

Add Block tool

(Add Block tool)

Spotlight Mode

Spotlight Mode lets you focus on one block at a time …

Spotlight Mode

(Spotlight Mode)

When Spotlight Mode is turned on (i.e. selected), the blocks you are not working on fade out, allowing you to focus more on the selected block …

(Spotlight Mode)

Fullscreen Mode

Fullscreen Mode lets you work without distraction by hiding the dashboard menu and Admin toolbar from the content editor screen …

Fullscreen Mode

(Fullscreen Mode)


The Editor section of the ‘More Tools & Options’ feature lets you choose the Editor ‘mode’ for the content editor:

  • Visual Editor, or
  • Code Editor
Visual Editor

Visual Editor is the default mode. With Visual Editor mode selected, the content editor lets you see and work on your content in WYSIWYG (What You See Is What You Get) format …

Editor - Visual Editor

(Editor – Visual Editor)

Code Editor

Selecting ‘Code Editor’ mode lets you work on your content with the code and HTML formatting displayed …

Editor - Code Editor

(Editor – Code Editor)

To switch from the Code Editor to the Visual Editor, click on ‘Exit Code Editor’ or select Visual Editor from the ‘More Tools & Options’ menu …

Exit Code Editor

(Exit Code Editor)

You can easily switch back and forth between the Visual and Code Editor modes. This is useful if, for example, you want to:

  • Work in Visual mode but occasionally see the formatting code for a section of your content
  • Paste in content as HTML
  • Copy the content’s HTML to paste in another application.
  • Etc.

Visual & Code Editor modes

(Visual & Code Editor modes)


This section provides a number of useful Content Editor tools and functions.

Manage All Reusable Blocks

The Gutenberg editor lets you create custom content blocks that can be used throughout your site (e.g. on other posts or pages).

This tool lets you manage all the Reusable Blocks that you create …

More Tools & Options: Tools > Manage All Reusable Blocks

(More Tools & Options: Tools > Manage All Reusable Blocks)

Selecting ‘Tools > Manage All Reusable Blocks’ from the ‘More Tools & Options’ menu brings you to the WordPress ‘Blocks’ library, where you can view, edit, and manage your Reusable Blocks …

WordPress 'Blocks' library

(WordPress ‘Blocks’ library)

To learn how to create, use, and manage Reusable Blocks, see the tutorial below:

Keyboard Shortcuts

The WordPress Gutenberg content editor provides a number of keyboard shortcuts that will help you perform certain functions faster and speed up content editing or formatting tasks …

Tools > Keyboard Shortcuts

(Tools > Keyboard Shortcuts)

Selecting ‘Tools > Keyboard Shortcuts’ from the ‘More Tools & Options’ menu brings up a list of all the keyboard shortcuts you can use when working in the Gutenberg content editor …

WordPress Gutenberg Content Editor - Keyboard Shortcuts

(WordPress Gutenberg Content Editor – Keyboard Shortcuts)

For more details, see the tutorial below:

(Keyboard Shortcuts)

Copy All Content

This tool lets you copy everything in your Content Area to your clipboard …

Tools > Copy All Content

(Tools > Copy All Content)

To use this tool, click inside any block in the Content area, select the ‘More Tools & Options’ menu, and click on ‘Copy All Content’ …

Copy All Content

(Copy All Content)

All content will be selected and copied to your clipboard.


To copy all content from an existing post or page and paste into a new post or page:

  • Click inside any block in the Content area
  • Select the ‘More Tools & Options’ menu
  • Click on ‘Copy All Content’
  • Create a new post or page
  • Add a new block to the Content area
  • Select ‘Code Editor’ mode (‘Tools’ > ‘Editor’ > ‘Code Editor’)
  • Click inside the new block and paste your content
  • Select ‘Visual Editor’ mode (‘Tools’ > ‘Editor’ > ‘Visual Editor’)
  • All content will be copied from your previous post or page …

Copy and paste content from one post/page to another

(Copy and paste content from one post/page to another)

Note: If you paste the content from one site to another, you may see errors if the pasted-in content contains custom (i.e. Reusable) blocks …

Block has been deleted or is unavailable

(Block has been deleted or is unavailable)


This section provides a number of options for the content editor …



The features in this section can be turned on or off by selecting or deselecting options …

Select/deselect options to show/hide content editor features

(Select/deselect options to show/hide content editor features)

Click on ‘Options’ in the ‘More Tools & Options’ menu to enable/disable the following options:

  • Enable pre-publish checks: Displays pre-publish checks and reminders before publishing your post/page.
  • Enable Tips: Displays tips about content editor features.

Content Editor Tips Enabled

(Content Editor Tips Enabled)

Document Panels

Select/deselect the options in this section to display/hide the following content editor panels:

Options - Document Panels

(Options – Document Panels)

Advanced Panels
  • Custom Fields – Select/deselect options in this section to display/hide custom fields.

The ‘Editing Toolbar’ section can display additional information depending on how your settings are configured.

Congratulations! Now you know how the Editing Toolbar of the WordPress Gutenberg content editor works and how to use the features, settings, and options in this section.

The next step is to learn about the Content Area of the WordPress Gutenberg Content Editor Interface.

WordPress Gutenberg - Making WordPress Easier For Non-Techies


"I have used the tutorials to teach all of my clients and it has probably never been so easy for everyone to learn WordPress ... Now I don't need to buy all these very expensive video courses that often don't deliver what they promise." - Stefan Wendt, Internet Marketing Success Group

For a white label version of this tutorial visit WPTrainingManual.com.
Originally published as WordPress Content Editor Interface – Editing Toolbar.