Loading...

Knowledge Base
Home 
 
/
 Guide to WordPress Block Editor
Categories: WordPress

Guide to WordPress Block Editor

WordPress 5.0, released in December 2018, made the Gutenberg editor the default content editor. Now called the Block Editor, it lets you build pages and posts from individual pieces of content called blocks.

What is a Block?

A block is a single piece of content in a WordPress page or post. Headings, paragraphs, images, galleries, audio and video files, tables, and buttons are all blocks.

You can add, move, customize, and delete each block without changing the rest of the page. Some blocks, such as Group, Columns, and Row, hold other blocks so you can build layouts. WordPress comes with blocks for the most common content types, and plugins can add more.

This article covers the following topics:

Before You Begin

To open the Block Editor, create or edit a page or post:

  1. Log in to your WordPress dashboard.
  2. In the top menu, click + New, then select Page or Post. You can also hover over Pages or Posts in the left-hand menu and click Add New.

    Pages vs Posts

    • Pages are standalone content, such as an About, Contact, or Services page.
    • Posts are dated entries that appear in your blog feed.
You can undo most changes with Undo or restore an earlier revision of a page or post. Before you make larger changes to your site, we recommend backing up your website.

Understanding Blocks

Every block has three main parts:

Block structure

  1. Block content: The content itself, such as text, an image, or a video. You edit it directly in the editor.
  2. Block toolbar: The toolbar that appears above a block when you select it. It holds quick options such as block type, alignment, and formatting.
  3. Block settings sidebar: The panel on the right side of the editor. It has more options for the selected block, such as color, typography, and spacing.

Each block type has its own features, so the toolbar and sidebar options change depending on which block you select.

Editor Toolbar Overview

The toolbar at the top of the editor has these main controls:

  • + (Block Inserter): Opens the library of blocks, patterns, and media.
  • Undo and Redo: Reverse or repeat your most recent change.
  • Save draft, Preview, and Publish: Save your work, see how it will look, and make it live.
  • Settings: The panel icon that shows or hides the settings sidebar.
  • Options (three-dot menu): Editor preferences, display modes, and keyboard shortcuts.

Adding a New Block

To add a new block:

  1. Open a page or post in the editor. For steps, see Before you begin.
  2. Click a + (Block Inserter) icon. You'll find one in each of these places:

    Block Inserter

    • The top left of the editor: Opens the full block library in a panel on the left.
    • Inside the editor, on an empty line: Opens a small window of common blocks. Click Browse all to see the full library.
    • Between two blocks: Hover between the blocks to add a new block in that spot.
  3. Search for a block, or scroll to browse the block categories. For search tips, see Searching for a block.
  4. Click the block you want. The block is added to your page or post.

For the full list of block categories and blocks, see WordPress.org's Blocks documentation.

Searching for a Block

There are two ways to find a block quickly.

Search box

In the Block Inserter, type a block name or keyword, such as "video" or "image." A list of matching blocks appears.

Slash (/) command

Slash command

On an empty line in the editor, type / and then a block name or keyword. Press Enter or click a block in the list to add it.

Customizing a Block

Each block has its own settings, and the options depend on the block type.

To customize a block:

  1. Select the block. Its block toolbar appears above it.

    Settings icon
     

  2. If the settings sidebar is closed, click Settings at the top right of the editor.

    Block toolbar
     

  3. In the sidebar, click the Block tab to see the formatting options for the selected block.

To change settings for the whole page or post, such as its status, permalink, or featured image, click the Page or Post tab instead.

Transforming a Block

You can change a block into a different type without losing its content. For example, you can turn a Paragraph into a Heading.

To transform a block:

  1. Select the block.
  2. In the block toolbar, click the block type icon on the far left.
  3. Select the new block type from the list.

Rearranging Blocks

To move a block:

  1. Select the block to show its block toolbar.
  2. Click the up or down arrow to move the block one position at a time.

    Move up and down blocks

    You can also click and hold the drag handle (the six-dot icon) in the block toolbar, then drag the block to a new spot.

    Drag blocks

Inserting a Block Between Existing Blocks

To add a block above or below another block:

  1. Select a block to show its block toolbar.
  2. Click Options (the three-dot menu).

    Options
     

  3. Select Add before or Add after.

    Add before or Add after

Duplicating and Copying a block

To duplicate or copy a block:

  1. Select the block.
  2. In the block toolbar, click Options (the three-dot menu).
  3. Select one of these options:

    Duplicate or Copy

    • Duplicate: Places a copy directly below the original.
    • Copy: Copies the block so you can paste it anywhere, including into another page or post.

Deleting a Block

To delete a block:

  1. Select the block you want to delete.
  2. In the block toolbar, click Options (the three-dot menu).
  3. Select Delete.

    Duplicate or Copy

Using Patterns

Patterns are ready-made groups of blocks, such as a hero section, a pricing table, or a call to action. To add one, open the Block Inserter and click the Patterns tab.

You can also save your own blocks as a pattern so you can reuse them:

  1. Select the block or blocks you want to save.
  2. Click Options (the three-dot menu), then select Create pattern.
  3. Enter a name for the pattern.
  4. Turn on Synced if you want changes to the pattern to update everywhere it's used. Synced patterns were previously called reusable blocks.
  5. Click Add.

Keyboard Shortcuts

Here are some common Block Editor keyboard shortcuts for Windows and Mac.

Action Windows Mac
Duplicate a block Ctrl + Shift + D Cmd + Shift + D
Delete a block Shift + Alt + Z Ctrl + Option + Z
Move a block up Ctrl + Shift + Alt + T Cmd + Shift + Option + T
Move a block down Ctrl + Shift + Alt + Y Cmd + Shift + Option + Y
Add a block before Ctrl + Alt + T Cmd + Option + T
Add a block after Ctrl + Alt + Y Cmd + Option + Y
Show all shortcuts Shift + Alt + H Ctrl + Option + H

Shortcuts can change between WordPress versions. To see the current list, click Options (the three-dot menu) at the top right of the editor, then select Keyboard shortcuts.

Troubleshooting

I don't see the Block tab.

The settings sidebar is closed or no block is selected. Click Settings at the top right of the editor, then select a block.

I don't see the block toolbar.

Click inside the block to select it. If the toolbar still doesn't appear, click Options (the three-dot menu) and check whether Top toolbar is turned on. That setting moves the block toolbar to the top of the editor.

My theme uses the Site Editor.

Block themes let you edit headers, footers, and templates in Appearance > Editor. The Site Editor uses the same blocks and tools described in this article.

Video Tutorials

Watch our "Building your First WordPress Website" video series to get you started.

How can we help you? Please contact us via phone or chat if you need assistance.

Loading...