WordPress Gutenberg Content Editor Interface – Editing Toolbar
This 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:
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 Gutenberg Content Editor Interface – Content Area
- WordPress Gutenberg Content Editor Interface – Settings Section
WordPress Content Editor: Editing Toolbar
The editing toolbar is the strip found at the top of the content editor screen …
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)
The section on the top left corner of the Editing Toolbar contains the following features:
(Editing Toolbar features)
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)
The ‘Add Block’ tool contains a ‘Search’ field and several menu sections:
- Most Used
- Common Blocks
- Layout Elements
- Inline Elements – This menu displays if you click inside a block before selecting the ‘Add Block’ tool.
- Reusable Blocks – Note: 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)
Blocks are inserted into the Content Area 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 ‘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’)
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)
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)
Click on the ‘Block Navigation’ icon to display the structure and layout of your content blocks …
Switch To Draft
Click on the ‘Switch to Draft’ link to convert a published post or page into a draft document …
(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)
You can switch posts/pages from ‘Draft’ to ‘Published’ status and vice-versa at any time …
(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 …
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) …
Gutenberg provides an optional pre-publishing check function that reminds you to double-check your settings and confirm before publishing …
Click the ‘Publish/Update’ button again to proceed …
After your post/page has been published you will be given options like viewing your post/page …
Or copying your post/page URL to your clipboard …
(Copy Post URL)
To turn off this option deselect the ‘Always show pre-publish checks’ checkbox …
(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 …
You will return to the main content editor screen.
If you’re not sure what different post or page statuses mean, this will hopefully help you:
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:
Clicking on the ‘Settings’ icon hides the ‘Settings’ sidebar, allowing you to work in a ‘distraction-free’ content editing mode …
(Hide/Display Settings icon)
You can also hide the ‘Settings’ section by closing the sidebar …
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)
This brings up a menu with additional content editing tools and options …
(More Tools & Options menu)
These settings are divided into the following sections:
This section lets you configure the following options to help you work more efficiently on your content:
- Top Toolbar
- Spotlight Mode
- Fullscreen Mode
Making this section active lets you access all block and document tools from a single place …
To view the Block Editor settings inside a selected block, leave the ‘Top Toolbar’ option unselected …
(Top Toolbar option unselected)
This also displays the ‘More Options’ menu inside the selected block …
(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)
And moves the ‘Add Block’ tool to the top of your block sections, replacing the Block Editor …
(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)
Spotlight Mode lets you focus on one block at a time …
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 …
Fullscreen Mode lets you work without distraction by hiding the dashboard menu and Admin toolbar from the content editor screen …
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 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)
Selecting ‘Code Editor’ mode lets you work on your content with the code and HTML formatting displayed …
(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)
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.
(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)
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)
To learn how to create, use, and manage Reusable Blocks, see the tutorial below:
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)
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)
For more details, see the tutorial below:
Copy All Content
This tool lets you copy everything in your Content Area to your clipboard …
(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)
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)
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)
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)
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)
Select/deselect the options in this section to display/hide the following content editor panels:
- Categories (Posts only)
- Tags (Posts only)
- Featured Image (Posts & Pages)
- Excerpt (Posts only)
- Discussion (Posts & Pages)
- Page Attributes (Pages only)
(Options – Document 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.
- For the next tutorial in this series, go here: WordPress Gutenberg Content Editor Interface – Content Area
- For more tutorials on using the WordPress Gutenberg content editor, go here: WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users
"This is an awesome training series. I have a pretty good understanding of WordPress already, but this is helping me to move somewhere from intermediate to advanced user!" - Kim Lednum