The block editor

Module 4: Creating content · Reading time: 8 minutes

Learning objective: After this lesson, you can build a Page using blocks and patterns, and you'll know how drafts, scheduling and revisions work.

Key concepts: block, block settings, toolbar, list view, group, columns, pattern, synced pattern, draft, private, scheduling, revisions, preview

Everything is a block

Since WordPress 5.0 (late 2018), you create content in the block editor (also known as Gutenberg, after the project). A Page is made up of separate blocks: a heading, a paragraph, an image, a button, a list, a table, an embedded video. Each block has its own settings. You can place blocks below each other, next to each other (in columns), or inside one another (in a group).

Why blocks? In the old editor, a Page was one big text box. If you wanted two columns or a button, you needed a page builder, shortcodes or HTML. With blocks, you can do this within WordPress itself, and the result is clean HTML that the theme styles.

Behind the scenes, WordPress stores blocks as HTML with comment markers before and after:

<!-- wp:heading -->
<h2 class="wp-block-heading">Opening Hours</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We're open from Tuesday through Saturday.</p>
<!-- /wp:paragraph -->

That's useful to know: the content remains readable HTML, even if you later switch themes or a block no longer exists. You can see this if you choose "Edit as HTML" on a block, or in the code editor (Ctrl+Shift+Alt+M).

The editor in three parts

1. The canvas in the middle: your Page roughly as it will appear.
2. The toolbar above a selected block: bold, italic, link, alignment, and converting the block to a different type (a paragraph becomes a list, an image becomes a gallery).
3. The sidebar on the right with two tabs: Page (or Post) with settings for the whole Page, and Block with settings for the selected block, such as colour, spacing and font size.

Two tools that make your work much easier:

• List view (the icon with three lines, top left): the structure of your Page as a tree. This lets you select exactly the block you want, even if it's inside a group inside a column.
• Slash commands: on an empty line, type / followed by a block name (/heading, /button, /image) and press Enter.

Building with groups and columns

A good Page has a clear structure. For this, you use three building blocks:

• Group: a frame around a few blocks, with its own background or spacing. For example, a coloured block with a heading, a sentence and a button.
• Columns: blocks next to each other. On a phone, they stack on top of each other.
• Row and Stack: variants of a group that arrange blocks horizontally or vertically.

Use headings correctly: one H1 (the title of the Page, usually generated by the theme itself), then H2 for the main sections and H3 for the subsections within them. Don't choose a heading level for its font size; adjust that in the block settings instead. Screen readers and search engines use headings to understand the structure of the Page (lesson 9.2).

Patterns: no need to start from scratch

A pattern is a ready-made group of blocks: a heading with text and an image, a pricing table, three columns with icons. You insert them via the insert button (the plus icon), under the Patterns tab. Your theme often comes with a few, and the pattern library at wordpress.org has hundreds more.

You can also create your own patterns: select a few blocks, choose the three dots in the toolbar, and Create pattern. You then choose whether the pattern is synced:

• Not synced: every time you insert it, you get a separate copy. If you change that copy, only it changes. Handy as a template.
• Synced: wherever it appears, it's identical. If you change it in one place, it changes everywhere. Handy for a "Contact and opening hours" block that appears on ten Pages. (These used to be called "reusable blocks".)

A pitfall: if you "just" tweak a synced pattern on one Page, it also changes on every other Page it appears on. If you want something different in just one place, turn that one copy into a regular group (detach it).

Saving, publishing and scheduling

A Page has a status:

Use Preview to view the Page as a visitor would see it, including on mobile and tablet, before you publish.

Revisions: going back in time

Every time you save, WordPress stores a revision: the version at that moment. In the sidebar, you can see how many revisions a Page has. Click on it to see a slider showing the differences between two versions, and restore an older version if needed.

Revisions are your first safety net for mistakes ("I accidentally deleted half the Page"). However, they're all stored in the database. A website with thousands of revisions becomes larger and sometimes slower. You can limit the number in wp-config.php:

define( 'WP_POST_REVISIONS', 20 );

Lesson 6.3 covers cleaning up old revisions.

Where the editor stops

The block editor creates the content of a Page. What surrounds that content (the site header, the menu, the footer) belongs to the theme. With a block theme, you edit this in the Site Editor (Appearance > Editor) using the same blocks; with a classic theme, in the Customiser and under Widgets (lesson 5.1). If you use a page builder such as Elementor or Divi, you work in that tool instead of the block editor; lesson 5.1 discusses the downsides of that approach.

Summary

• A Page consists of blocks that you place below, next to and inside one another; WordPress stores them as HTML with comment markers.
• List view and slash commands make building fast and precise.
• Use headings for structure (H2, H3), not for font size.
• Patterns save work; a synced pattern changes everywhere at once.
• Draft, scheduled, private and revisions give you control over what's visible when, and a way back.

Quiz

Exercise

Exercise D4.1: Build a Page with blocks. Create a draft Page "About us" with: an H2 and an H3, at least two paragraphs, an image with alt text, a columns block with two columns, a button with a link, and a pattern from the library. Turn one group into your own synced pattern and insert it on a second draft Page. Then adjust it in one place and see what happens on the other Page. Finally, restore an earlier revision. Tick off each step and describe in two sentences when you would and wouldn't use a synced pattern.

Further reading

We don't yet have our own articles about working within WordPress itself; the official WordPress documentation is extensive.

• The block editor (wordpress.org, English): https://wordpress.org/documentation/article/wordpress-block-editor/
• Patterns (wordpress.org, English): https://wordpress.org/documentation/article/block-pattern/
• Revisions (wordpress.org, English): https://wordpress.org/documentation/article/revisions/