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

Additionally:

  • 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’)

Preview

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

Preview

(Preview)

The preview window will open in a new tab …

(Post Preview)

Publish

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)

Important

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
View

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)

Editor

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)

Tools

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.

Important

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)

Options

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

Options

(Options)

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:

General
  • 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 am beyond impressed with what you have put together. I can tell that you put a ton of hard work into building what you have. You have the absolute best content on WordPress I have ever seen!" - Robert T. Jillie

Recommended Video Courses For WordPress Users

WordPress Traffic & User EngagementWordPress Traffic & User Engagement

Learn how to drive more targeted traffic to your website and discover ways to improve user engagement with your business online.

More info: WordPress Traffic & User Engagement

Recommended Video Courses For WordPress Users

WordPress 101: How To Use WordPressWordPress 101: How To Use WordPress

Learn how to unlock the power of the WordPress content management system (CMS) using the many powerful features inside your WordPress administration area.

More info: WordPress 101: How To Use WordPress

Recommended Video Courses For WordPress Users

Build A WordPress Site ... Fast!Build A WordPress Site ... Fast!

Need a new website or blog in a hurry?

This video course shows you how to quickly install and configure a WordPress website or blog on your own domain name and be up and running in no time!

More info: Build A WordPress Site ... Fast!

Recommended Video Courses For WordPress Users

Why Your Business Needs WordPressWhy Your Business Needs WordPress

Learn about the unique features, benefits, and advantages of using WordPress to start or grow your business online.

More info: Why Your Business Needs WordPress

Recommended Video Courses For WordPress Users

How To Create Engaging PresentationsHow To Create Engaging Presentations

Learn how to create beautiful and engaging presentations that will help you sell more products and services online.

More info: How To Create Engaging Presentations

Recommended Video Courses For WordPress Users

WordPress SEOWordPress SEO

In this WordPress SEO training series you will learn how to optimize your WordPress site and how to craft website pages and blog posts that will help you get better search engine rankings and improve your traffic results.

More info: WordPress SEO

Author: Martin Aranovitch

Martin Aranovitch is the founder of WPCompendium.org and the author of The Small Business Digital Manager. WPCompendium.org provides hundreds of FREE tutorials that show you how to use WordPress to grow your business online with no coding skills required! Get our FREE "101+ WordPress Tips, Tricks & Hacks For Non-Techies" e-course with loads of useful WordPress tips!

Originally published as WordPress Content Editor Interface – Editing Toolbar.