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

WordPress Content Editor Interface – Editing Toolbar

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:

  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)

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

(Editing Toolbar)

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

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)

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)

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

Additionally:

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

(Rearranging blocks)

Undo & Redo

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

(Undo & Redo) 

Content Structure

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

(Content Structure)

(Content Structure)

Block Navigation

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

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

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

Preview

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

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

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

(Pre-Publishing Checks)

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

(Publishing confirmation)

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

(Post Published)

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 …

(Close Panel)

You will return to the main content editor screen.

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

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/Display Settings icon)

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

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

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

(More Tools & Options menu)

These settings are divided into the following sections:

View

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

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)

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

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

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

Editor

The Editor section of the ‘More Tools & Options’ feature lets you choose the Editor ‘mode’ for the content 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)

Code 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:

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

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:

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)

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:

(Keyboard Shortcuts)

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:

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

Options

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

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

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

General

(Content Editor Tips Enabled)

Document Panels

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

(Options – Document Panels)

Advanced Panels

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.

***

"Your training is the best in the world! It is simple, yet detailed, direct, understandable, memorable, and complete." Andrea Adams, FinancialJourney.org

Recommended Video Courses For WordPress Users

Google Tools

This video course will help you learn the basics of using Google Tools like Google Analytics and Gmail.

More info: Google Tools

Recommended Video Courses For WordPress Users

Keyword Research Tools

This video course shows you how to do keyword research using tools like the Google Keyword Planner.

More info: Keyword Research Tools

Recommended Video Courses For WordPress Users

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

WordPress 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

WordPress 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