Explore

Building or Editing a Page

The Block Editor Workspace

The Block Editor Workspace is the main view you'll be working in when editing or creating a new page.

⁠

How to Access the Block Editor Workspace

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

The block editor opens by default in fullscreen mode.

⁠

WordPress Block Editor shows the writing and editing screen in full when it opens

⁠

WordPress Block Editor in full screen mode

The WordPress block editor workspace has three main sections:

the

top left toolbar⁠

⁠

the

top right toolbar⁠

with the post/page settings and the block settings

the

content area⁠

⁠

⁠

The top toolbar

⁠

Top Left Corner

At the top left of the block editor workspace, you will see the following options:

⁠

⁠

Arrow icons pointing to the left and right, to represent undo and redo.

⁠

A lowercase I with a circle around it for an information icon, to show Details.

⁠

Three offset stacked vertical lines, to represent the List View.

⁠

Exit the Editor: Shows the W icon by default, or the Site Icon if available. Click to exit the editor. This will prompt you to save the changes or leave the post or page.

Block Inserter: Add blocks of content to your page, like text, images, and much more.

⁠

Block inserter panel

Tools: Switch between editing a block and selecting a block. Choose the Select tool (or press the Escape key on your keyboard) to select individual blocks. Once a block is selected, press the Enter key on your keyboard to return to editing.

⁠

Edit/Select buttons

Undo and Redo: Undo an action, or redo an undone action.

Details: Get the page details including the character and word count, the number of paragraphs and blocks on the page, and the document outline showing the headings and how they are structured on the page.

⁠

Document details

List View: See a list of all of the blocks that are on the page and easily navigate between the blocks on your page.

Read more about List View tool⁠

⁠

Top Right Corner

This contains the post/page settings and the block settings.

Before you publish your page, you will see the following options in the top right corner of the block editor’s workspace.

⁠

Save draft: Save a draft of your page without publishing it.

Preview: See how your page looks on your site. See details on

how to use the preview function⁠

Publish: Make your page available publicly. After you publish your page, you will see the following options in the top right corner of the block editor’s workspace.

⁠

Switch to draft: Unpublish a page, making it a draft.

Update: Save the changes to your page.

⁠

⁠

Settings: Show or hide the

page sidebar settings⁠

and the

block settings⁠

⁠

Three vertical dots icon, which you can click to show more options.

⁠

Options: Open up

more options⁠

. To access more options, click the three dots to the right of the Settings ‘cog’ icon in the upper right corner. Here, you can customize your editing experience using various options.

⁠

More options

View

Display or hide the top toolbar in the editor. When you enable this option, block toolbars are pinned to the top of the WordPress block editor (right under the top toolbar) instead of appearing directly above the block.

⁠

Top toolbar enabled

Spotlight Mode: all blocks are greyed out except for the one you’re working on so that you can focus on a single block at a time.

Spotlight mode enables you to focus on just one block

⁠

Fullscreen mode

⁠

To switch-off Fullscreen mode, use the three-dot menu on the top right and un-check the Fullscreen mode.

Your choice will be stored in your browser’s local storage. If you switch browsers, the choice for the view will not be remembered and you have to set your preference again. This will be the case when you switch computers as well.

Safari browser users will experience a reset of default settings once in a while as it is programmed to delete local storage entries every now and then.

Until the core developers find the best solution, you can use the

Persistent block editor settings plugin⁠

. This plugin stores the Fullscreen mode preference in the database. Hence your fullscreen mode choice stays consistent across browsers and devices.

Editor: By default, you will be in the Visual editor. Switch to the Code editor to view the entire page in HTML code editor.

Tools: Here, you can manage

reusable blocks⁠

, learn

keyboard shortcuts⁠

, visit the WordPress block editor welcome guide, copy all content on the page, or view additional support articles.

Preferences: Use the

Preferences⁠

menu to:

Customize the editing experience.

Change how you interact with blocks and which blocks appear when searching for a block.

Show or hide individual panels from the page settings

.⁠

⁠

The Content Area

How to move items between areas

There are two ways to move items between areas:

You can use drag and drop by hovering over the block toolbar, selecting and holding it, and dragging it to a new section.

You can use the option shown below in the block toolbar to move to the desired Widget Area:

⁠

⁠

How to use blocks in the Customizer

If you’re more comfortable managing your Widget Areas in the Customizer, you can now add widgets and blocks with the same ability to live preview, scheduling changes, and publishing that you’re used to. The main thing to keep in mind is that, due to the small size of the Customizer, some settings require a few more steps to find. To find all block settings, follow the steps below:

Use the + to add a new block.

After adding the block, select the three dot ellipsis menu and choose the top option of “Show more settings”.

From there, you’ll see more options to customize your block to your liking.

⁠

Next Section: Using Block Patterns ➔⁠

How to Access the Block Editor Workspace

Top Left Corner

Top Right Corner

The Content Area

How to move items between areas

How to use blocks in the Customizer

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.