The WordPress block editor, originally called Gutenberg, builds every post and page from blocks: paragraphs, headings, images, tables, buttons and more. You add a block with the plus button or by typing a slash, arrange blocks by dragging or with the arrows, and save groups of blocks as patterns to reuse. This tutorial covers the essentials for 2026.
The short answer
Start with inserting blocks, layout blocks such as Group and Columns, patterns and List View. Unsynced patterns give each insertion an independent copy; synced patterns share a source. Supported overrides can let selected content differ while design stays linked. Practise with a new unused pattern or on staging so a learning edit does not change a live call to action across the site.
I have built WordPress sites since before the block editor existed, and switching editors is not just a visual change. On a migration, I check where the content actually lives. A classic theme or page builder may store layouts in custom fields or shortcodes that need mapping before the theme changes. Core blocks keep more of the content in the post, but custom blocks can still depend on their plugin or theme code. Test the content and its dependencies, not just the new homepage.
What is the WordPress block editor?
The WordPress block editor is the default editor in WordPress since version 5.0, released in December 2018. It replaced the classic single-box editor with blocks, where each paragraph, image, heading or embed is a separate element you can move, style and reuse. Gutenberg is the name of the project that develops it.
What is the difference between the block editor and the classic editor?
The classic editor is one text box, similar to a word processor, with layouts usually handled by the theme, shortcodes or a page builder. The block editor treats every element as a block with its own settings, so editors can build richer layouts without code. Block content is also cleaner to style consistently and easier to reuse.
| Classic editor | Block editor | |
|---|---|---|
| Editing model | One text area | Separate blocks for each element |
| Layouts | Theme templates, shortcodes or page builders | Group, Columns, Row, Grid and Cover blocks |
| Reuse | Copy and paste, or shortcodes | Patterns and synced patterns |
| Full site editing | The post editor choice is separate from Site Editor availability | Site Editor for templates in block themes |
| Status in 2026 | Available through the official Classic Editor plugin | Default editor in WordPress |
Caption: WordPress classic editor and block editor compared.
How do you add and edit blocks?
Add a block by clicking the plus (+) button in the top toolbar or between blocks, or type “/” followed by the block name on a new line, such as /image or /table. Select a block to see its toolbar for quick formatting, and open the settings sidebar for colours, typography, spacing and advanced options.
- Click into the content area and start typing to create a paragraph.
- Type “/” and a block name to insert another block type.
- Use the block toolbar to change alignment, bold, links and block type.
- Open the Settings sidebar for the selected block or post; the icon and label can vary by release.
- Drag the block handle, or use the up and down arrows, to move a block.
- Open the List View to see and reorder every block on the page.
What are patterns and synced patterns?
Patterns are saved groups of blocks. An unsynced insertion can be edited independently; a synced pattern keeps its shared structure/content connected. Since WordPress 6.6, supported pattern overrides can allow selected instance content to vary. Editing the shared source can still update every use, including on published pages.
Create a pattern by selecting blocks, opening the block options menu and choosing “Create pattern”. You can export patterns as files and import them on another site, which helps teams keep layouts consistent.
Worked example: a reusable call-to-action section
Practise this with a new pattern that is not used on live pages, preferably on staging. These are the block editor’s core steps; labels can change by version and plugin. This review checked the documentation, not a logged-in execution of every step on your installation.
- In a draft post, type “/group” on a new line and press Enter to add a Group block.
- Inside the group, add a Heading, a short Paragraph and a Buttons block. Set the heading level to fit the page outline, usually H2, not whatever size looks right.
- Write button text that says what happens, such as “Book a free call”, and add the link. Never “Click here”.
- Select the Group, open the settings sidebar and choose a background colour. If the editor warns that the colour combination may be hard to read, pick another.
- With the Group selected, choose Create pattern, name it and explicitly choose Synced if you want a shared source. Confirm the setting before saving.
- Insert the new pattern on a second test page, then edit its shared source and inspect both. Use an unsynced copy or supported overrides when content should differ. Check all uses before changing a pattern already on live pages.
The exercise should leave a correctly nested heading, a descriptive working link and readable focus/colour states. Test those directly. Semantic structure is useful to people and some tools, but is not proof of accessibility conformance or universal agent compatibility.
How do you create custom blocks?
Developers can scaffold a block with the official @wordpress/create-block tooling and use @wordpress/scripts for development/build tasks. Block builders such as Lazy Blocks, Genesis Custom Blocks or ACF Blocks in ACF Pro offer other workflows. Compare dependencies, editing needs and actual output; custom code is not automatically faster.
| Option | Best for | Status (WordPress.org, October 2026) |
|---|---|---|
| Native blocks with @wordpress/create-block and @wordpress/scripts | Developers building lasting custom blocks | Official WordPress tooling |
| Lazy Blocks | Building blocks with a visual interface | 20,000+ installs, updated October 2026 |
| Genesis Custom Blocks | Simple custom blocks with templates | 10,000+ installs, updated October 2026 |
| ACF Blocks | Sites already using Advanced Custom Fields Pro | Part of ACF Pro |
| Block Lab | (Listed in the 2022 version of this post) | Closed to downloads; directory notice dated 3 February 2022 |
Plugin directory/API records checked 26 October 2026: Lazy Blocks 20,000+ and Genesis Custom Blocks 10,000+ active installations; both list October updates. “Tested up to” is publisher metadata, not a compatibility test. Block Lab’s directory page says it is closed; plan any migration against existing content dependencies.
Can you still use the classic editor?
The official Classic Editor plugin remains available; its directory API reports 8+ million active installations. That does not force a move away from it immediately. Assess the editor workflow, theme and shortcode/custom-field dependencies, then test a migration where it offers a real benefit. Site Editor support depends on the theme, separately from the post editor.
Older sites often use shortcodes for layouts. My guide to WordPress shortcodes explains how they work alongside blocks.
How do you keep block content accessible and fast?
Keep block content accessible by using headings in order, adding alt text to images, writing descriptive link text and checking colour contrast in the block settings. Keep it fast by compressing images, avoiding heavy third-party blocks and limiting embedded videos. Clean, structured blocks are also easier for search engines and AI assistants to read.
My guide to WordPress accessibility covers the checks, and my guide to adding a PDF to WordPress shows the File block in use.
What to do next
- Practise adding blocks with “/” on a draft post.
- Use Group and Columns to build one simple layout.
- Save that layout as a pattern.
- Turn a repeated contact box into a synced pattern.
- When changing files in a vendor-updated theme, use a suitable child theme or another update-safe extension method. An owned version-controlled custom theme and Site Editor styles have different workflows; a child theme is not mandatory for every customisation.
Frequently asked questions
Is Gutenberg the same as the WordPress block editor?
Yes, in everyday use. Gutenberg is the name of the WordPress project that develops the block editor and related features such as the Site Editor. The editor itself is called the block editor inside WordPress.
How do I switch back to the classic editor?
Install and activate the official Classic Editor plugin from the WordPress plugin directory. It replaces the block editor with the classic editor, and its settings let you choose which editor users see by default. Plan a gradual move to blocks, as new WordPress features target the block editor.
What happened to reusable blocks?
Reusable blocks became synced patterns. Shared-source edits update their uses; supported overrides can allow selected content to differ without changing the shared design. Unsynced patterns insert independent copies. Inspect whether you are editing the source or one permitted override before saving.
What is the Site Editor?
The Site Editor lets you edit templates, headers, footers and styles with blocks, in block themes. It replaces much of what the Customizer and theme template files used to do. Classic themes do not use the Site Editor.
Do I need a page builder with the block editor?
Usually not. The block editor, with a good block theme and patterns, handles most business layouts without a page builder. Page builders can add flexibility but often add weight that slows pages. Choose based on your team and performance needs. Heavy builders on simple sites are one of the WordPress website mistakes I see most.
