Block Editor Overview

The WordPress Block Editor is where you create and manage page and post content using blocks. Once you understand how to navigate the key areas of the editor and the settings you’ll use most often blocks are added, editing becomes intuitive and flexible.

Start here: watch the walkthrough (8 minutes)

Navigating the editor

The Block Editor is organized into several key areas that help you create, navigate, and manage content. Understanding where these areas are located makes it easier to find the tools and settings you need while editing.

The main areas of the editor include:

Top toolbar — Global tools for adding blocks, navigating content, previewing pages, and publishing changes.
Content canvas — The main editing area where you build your page or post by adding and arranging blocks.
Document overview — Tools like List View and Outline that help you understand and navigate the structure of your content.
Right sidebar panel — Settings for the page or post as a whole, as well as settings for the currently selected block.

The sections below walk through each of these areas and explain the tools you’ll use most often.

The top toolbar provides global tools for adding blocks, navigating content, previewing pages, and publishing changes. Many of the editor’s primary tools — including the Block Inserter, Document Overview, and preview options — are located here.

Block and pattern inserter

The Block Inserter (the “+” icon) allows you to add new blocks to your page.

From here you can:

Search for a block by name
Browse available block categories
Insert reusable Patterns (pre-built layouts of multiple blocks)
Access the Media Library

Tip: Use search if you already know the block name. It’s faster than browsing categories.

Document Overview

The Document Overview provides a structural snapshot of your page — showing a full block hierarchy in List View and a heading-based outline in Outline View so you can navigate, organize, and validate your content more easily.

List View

List View displays a structured outline of every block on the page.

It’s especially helpful when:

Working with nested blocks (Columns, Groups, Tabs, etc.)
Selecting blocks that are difficult to click directly
Reordering sections
Understanding layout structure

Think of List View as a “map” of your page. If something feels hard to select, try leveraging List View.

Outline

Outline gives you a high-level summary of your page’s structure, including:

The total number of blocks
The number of headings on the page
A list of headings in hierarchical order

This is especially helpful when:

Reviewing long pages for structure and organization
Checking heading hierarchy (H2s, H3s, etc.)
Confirming content is logically organized
Auditing content for accessibility best practices

Think of Outline View as a quick structural check. While List View shows every block, Outline View focuses specifically on document structure — especially headings.

Command Palette

The Command Palette provides a quick way to navigate and perform actions using search.

You can open it using the keyboard shortcut (typically Cmd + K on Mac or Ctrl + K on Windows).

From here you can:

Jump to other pages or templates
Insert blocks
Access editor settings
Perform actions without clicking through menus

This is especially helpful when navigating larger sites.

View options and preview

The View options allow you to preview how your content will appear on the front end.

You can:

Preview as Desktop, Tablet, or Mobile
These options will re-size the editor width while allowing editing to continue. This is helpful when adjusting layouts, column stacking, spacing, or font sizes to ensure content displays properly across different screen sizes without leaving the editor.
Show Template
This option will display the header and footer within the editor for a complete view of the post while allowing editing to continue. Use this when you need to confirm how your content interacts with global elements like navigation, banners, or footers, especially if spacing or design feels inconsistent.
Open a full preview in a new tab
This option is the best way to preview the actual front-end appearance to confirm spacing, layout, and responsive behavior before publishing. It loads the page outside the editor environment, allowing you to test animations, interactive elements, forms, and overall styling exactly as visitors will experience it.

Save draft and publish

On the right side of the toolbar, you’ll find:

Save draft — Saves your work without making it publicly visible
Publish — Makes the page live
Save — Applies changes to an already published page

Always preview before publishing, especially when adjusting layout, spacing, or interactive elements.

Options

The Options menu (three dots in the top-right corner) contains additional editor-level settings.

Common options include:

Switching between visual and code editor
Managing editor preferences
Viewing keyboard shortcuts
Manage patterns

Most editors won’t use this frequently, but it can be helpful when troubleshooting or adjusting preferences.

Right sidebar panel

The right sidebar includes two main sections: Page / Post Settings and Block Settings. Understanding the difference between these areas is essential.

Page or post settings

These settings affect the entire page or post and how it functions within the site.

Available settings may vary depending on the content type, but commonly include:

Title, Slug, and Permalink
Status (Draft, Published), published date, and author
Featured image
Categories or tags
Page template
Parent page
Excerpt

These settings apply to the full page — not just the blocks within it.

Block settings

Block Settings change based on the selected block.

When you select a block, the sidebar updates to display:

Block-specific settings
Style controls (such as color, spacing, and dimensions)
Advanced options

If you’re trying to change how a specific element looks or behaves, make sure that block is selected first.

Tips for editors

Select before you edit

Many settings only appear when the correct block is selected. If you don’t see what you’re looking for, check your selection.

Use List View often

When layouts become complex, List View makes navigation and editing significantly easier.

Start with structure, then style

Build your layout first using the appropriate blocks. Once the structure is in place, adjust spacing, alignment, and styling.

Preview before publishing

Spacing, animation, and responsive behavior can look different on the front end. Always preview your page before publishing changes.