πŸ”ž ADULT: Documentation/article/wordpress block editor - Collection

WordPress Block Editor

The WordPress block editor also called the block editor, WordPress editor or Gutenberg editor is the new way of publishing content in WordPress.

Following the launch of WordPress 5.0 in December 2018, the WordPress block editor was set as the default editor and replaced the classic editor. To use the classic editor, you will need to install the classic editor plugin.

The WordPress block editor offers an array of blocks that can be used to create media-rich pages and posts.

Blocks are the content elements that you add to create content layouts. You can add blocks for paragraphs, images, headings, lists, videos, galleries, and more. You can control the layout of the blocks with ease, to build visually appealing web pages.

WordPress has blocks for all common content elements, and more can be added through WordPress plugins.

The block editor’s workspace

To launch the WordPress block editor, click on Posts > Add New or Pages > Add New.

Launch the WordPress block editor by choosing 'Add new' next to 'posts'
How to launch the WordPress block editor

The block editor opens by default in fullscreen mode.

WordPress Block Editor overview

The WordPress block editor workspace has three main sections:

  • the top toolbar
  • the sidebar with the post/page settings and the block settings
  • the content area.

The top toolbar

Before you publish your post or page, you will see the following options in the top toolbar.

Top toolbar showing available icons in post edit screen

After the publishing, you will see the following options.

After the publishing, new option View Post / View Page is appeared.

The options corresponding to the numbers in the figure are as followings:

1. View Posts / View Pages

Shows the W icon by default, or the Site Icon if available. Click to exit the editor and back to the list of Posts or Pages in Administrator Screens. This will prompt you to save the changes or leave the post or page.

2. Toggle block inserter

Show or Hide block inserter that allows users to add block, patterns or media to your post or page.

Block options, patterns and media when clicking block inserter.

3. Undo and Redo

Undo an action, or redo an undone action.

4. Document Overview

This option includes two tabs: List View and Outline.

  • List View: a list of all of the blocks that are on the post/page and easily navigate between the blocks on your post/page. Read more about List View tool.
  • Outline: Show the the post/page details including the character and word count, estimated time to read, the number of paragraphs and blocks on the post/page, and the document outline showing the headings and how they are structured on the post/page.
A preview of the document overview showing outline tab content.
Outline tab in the Document Overview

5. Command Palette

The Command Palette helps you streamline your workflow in the WordPress editor by providing a centralized location to work on various aspects of your site’s design. Click this field, or press Cmd+k on Mac or Ctrl+k on Windows. For more details about Command Palete, refer Editor Command Palette.

Command palette on post for duplication, add, group or delete.

6. Save draft / Saved

Save a draft of your post or page without publishing it. If the post or page is saved successfully, the label changes to Saved. Once the post or page is published, this label is hidden.

7. View

View how your post/page looks on your site with the current changes applied. For more details, refer How to use the View feature.

8. Settings

Show or hide the post/page sidebar settings and the block settings.

Page or block settings.

9. Publish

Make your post/page available publicly.

10. Options

Open up more options. See below section.