Skip to content
WordPress Guide

WordPress Block Editor Guide for Business Owners

A plain guide to the WordPress block editor for business owners: the screen layout, adding and moving blocks, List View, the two settings tabs, and how saving and undo work.

admin Updated 23 Oct 2026 9 min read
Hands holding an open brochure with a diagram
10 sections · 9 min read
In this article · 10 sections

You open a page to change one sentence, and instead of a simple text box you get a white canvas, a row of small icons along the top and a panel on the right that keeps changing every time you click. You fix the sentence, but you are not sure whether you saved it, and you notice a heading has somehow moved below the paragraph it belonged to.

This WordPress block editor guide is for that moment. It explains how the editor is laid out, how to add, move and remove blocks, the difference between the settings for the whole page and the settings for one block, and how saving and undo really work. The editor is the same for pages and posts, so once you know it you can work on either.

What a block is, and why the editor is built this way

Every piece of a page is a separate block: a paragraph, a heading, an image, a button, a list, a set of columns. Each block has its own toolbar and its own settings, and you can move it up or down without touching the rest of the page.

The editor is still often called Gutenberg, which was the name of the project that built it. Plugin settings and forum threads use both names.

Some blocks hold other blocks. A Columns block holds one Column block for each column, and each Column holds paragraphs, images or anything else. A Group block wraps several blocks so they can share a background colour or be moved together. Most confusion in the editor comes from clicking the inner block when you meant the outer one, or the other way round, and List View (below) is the cure for that.

The three parts of the editor screen

When you open a page in the block editor, the screen has three areas.

  • The top toolbar. On the left: the WordPress or site icon that takes you back to the dashboard, the blue + button that opens the block inserter, undo and redo arrows, and the Document Overview button that opens List View. On the right: Save draft, a preview control (a small screen icon in recent versions), the main Publish button, the Settings button (a square panel icon) and a three-dot Options menu.
  • The canvas. The middle of the screen, where your content sits roughly as visitors will see it. With a block theme it shows your real fonts and colours. With some classic themes it looks plainer than the live site, which is normal.
  • The settings sidebar. The panel on the right. It has two tabs: one named Page or Post, for the whole document, and one named Block, for whatever block you have selected. If the sidebar has disappeared, click the Settings button in the top right to bring it back.

The three-dot Options menu holds the editor’s own preferences. You can switch on a fixed top toolbar there, turn on Spotlight mode to fade everything except the block you are working on, or leave fullscreen mode if you want the dashboard menu back. Choices about which panels appear are covered in our post on Screen Options and editor preferences.

Adding blocks

There are three ways to add a block, and you will end up using all of them.

  1. The inserter. Click the blue + in the top toolbar. A panel opens with tabs for Blocks, Patterns and Media. Type in the search box, for example “button” or “table”, and click the block you want. It is placed after the block you had selected.
  2. The slash command. Click into an empty paragraph and type / followed by the block’s name, such as /heading or /image. Press Enter to choose the highlighted result.
  3. The small + on the canvas. When you hover over an empty line, or between blocks, a small + appears. Clicking it opens a short list of blocks right where you want the new one.

Pressing Enter at the end of a paragraph starts a new paragraph block, so for ordinary writing you rarely need the inserter at all. Pasting text from a word processor usually turns headings, lists and paragraphs into the matching blocks, though it is worth checking the result, because odd formatting sometimes comes along with it.

Selecting, moving and removing blocks

Click once inside a block to select it. A small toolbar appears just above it. From left to right it usually shows the block’s icon (click it to transform the block into another type, such as a paragraph into a heading), a drag handle, up and down arrows, then tools that belong to that block type, and finally a three-dot menu.

  • To move a block, use the up and down arrows. Dragging works too, though arrows are more precise.
  • To copy a block, open its three-dot menu and choose Duplicate. The copy appears directly below.
  • To delete a block, open the same menu and choose Delete.
  • To hide a block on phones or on desktop, recent versions add a Hide option to that menu, where you tick the screen sizes it should not appear on.
  • To select the outer block, use the “Select parent” button at the left of the block toolbar, which appears when you are inside a nested block.

List View: the outline of the page

The Document Overview button in the top toolbar (it looks like a stack of lines) opens List View, a tree of every block on the page. It is the single most useful thing to learn in the editor. Click a name in the list and that block is selected on the canvas, even when it is buried inside columns or groups. You can drag blocks around inside the list, and it makes it obvious when a heading has ended up inside the wrong group.

Page settings versus block settings

The sidebar’s two tabs answer two different questions. The Page (or Post) tab is about the document as a whole:

  • its status and visibility, and when it is published
  • the URL slug
  • the template, for themes that offer more than one
  • the parent page, for pages
  • the featured image, and the excerpt for posts
  • categories and tags, for posts only

The Block tab is about the block you have selected: its colours, font size, spacing, alignment and any options special to that block type. Some options sit behind a small three-dot menu at the top of a panel, so if you cannot find a setting such as letter spacing or a border, look there before assuming the block does not have it.

If you change something in the Block tab and nothing seems to happen, check which block is selected. It is easy to style a Column when you meant the Columns block around it.

Saving, publishing and undo

Nothing you type is live until you press the main button in the top right. On a new page it says Publish, and it asks you to confirm in a second step. On a page that is already live, the same button saves your changes straight to the public page. Current versions label it Save; older ones said Update. Save draft, when it appears, keeps the work private.

WordPress also autosaves while you work, and each time you save it keeps a revision. If you close the tab by mistake, reopening the page usually offers to restore the autosave. If you want to go back to how a page looked last week, our post on restoring an earlier version of a page shows how to compare and roll back.

For mistakes in the last few minutes, the undo arrow in the top toolbar, or Ctrl + Z (Cmd + Z on a Mac), steps back one change at a time. Undo history is lost when you reload the page, so use revisions for anything older.

Before publishing anything that matters, open the preview in a new tab and look at the page as a visitor would, on a phone as well as a laptop.

What the page editor does not control

The page editor only edits the page’s own content. The header, the footer, menus and sidebars belong to the theme. With a block theme you edit those in Appearance → Editor, which uses the same blocks. With a classic theme they live in Appearance → Customize, Menus and Widgets.

If your page opens with an “Edit with Elementor” button, or you see one large text box with Visual and Text tabs instead of blocks, your site uses a page builder or the Classic Editor plugin, and the steps in this section only partly apply. Our post on editing an existing page explains how to tell which one you are looking at.

When the editor itself will not load, shows “This block contains unexpected or invalid content” or will not save, that is a fault rather than a how-to question, and our post on block editor problems and their causes works through it.

The rest of this WordPress block editor guide

Each of the posts below takes one job from start to finish. Read them in whatever order your work brings them up.

Further posts deal with previewing and sharing drafts, copying a page, scheduling a post, page templates, categories and tags, and deleting or restoring a page. All of them are listed in our WordPress management guide, alongside the other parts of running the site.

Frequently asked questions

Can I switch back to the old WordPress editor?

Yes. The Classic Editor plugin, maintained by the WordPress team, restores the old single text box. It is still available, but new features are built for blocks, and many current themes and plugins assume the block editor. Switching back also does not convert existing block content, so try it on a staging copy first.

Why does the editor look different from my live website?

The canvas uses styles your theme provides for the editor. Block themes usually match the front end closely, while some classic themes supply only basic editor styles, so fonts, widths or colours can look plainer. Use Preview to check the real result before publishing.

Will typing in the editor change my live page straight away?

No. Changes stay in the editor until you press the main button in the top right. Autosave keeps a private copy while you work, but visitors see nothing new until you publish or update the page.

Is there a list of keyboard shortcuts for the editor?

Yes. Open the three-dot Options menu in the top right and choose Keyboard shortcuts. It lists shortcuts for formatting, moving between blocks, duplicating and removing them, and opening List View. The slash command for inserting blocks is the one most owners find worth learning first.

Most editing goes well once List View and the two sidebar tabs make sense. A page that still refuses to behave, or a batch of edits you would rather hand over, is ordinary work for our WordPress support service.

All guides in this section

Next in this series: WordPress Pages vs Posts: Which to Use and When

Tags:

Is Your Website Working Properly?

Get a free website health check from WebMaintor. We'll review your website's speed, security, forms, and technical health — and tell you exactly what needs attention.

No obligation. No automated reports. A real review by our team.

Free Health Check WhatsApp Us
Keep Reading