The Block Editor — originally codenamed Gutenberg — is how modern WordPress writes content. Every post, every page, every product description in WooCommerce is built from blocks: paragraphs, headings, images, buttons, columns, galleries, quotes, embeds. For UK business owners arriving from the Classic Editor or from other CMS platforms, the block model is a small mental shift that pays back quickly. This guide covers what blocks are, how to add and arrange them, the shortcuts that turn editing from tedious into fast, and the block-editor features most users miss (patterns, reusable blocks, the command palette, the code view).
What the Block Editor is · How the editor is laid out · Adding blocks · Common block types · Moving and arranging blocks · Block toolbar and settings · Keyboard shortcuts · Saving, previewing and publishing · Reusable blocks and patterns · Code editor and HTML view · Frequently asked questions
The Block Editor is the default content editor introduced in WordPress 5.0 (December 2018), replacing the older Classic Editor. Instead of a single rich-text field, you compose content out of discrete blocks — each a self-contained element with its own settings, styling and behaviour.
A paragraph is a block. A heading is a block. An image is a block. A button is a block. A three-column layout is a block containing three column blocks, each containing more blocks. Blocks stack vertically and nest inside each other where appropriate.
The advantage is twofold. First, you get visual editing: the content area looks like the published page (well, close to it). Second, every element is individually configurable without touching HTML — change a paragraph's font size, a column's background colour, a button's border radius through dropdowns and sliders.
For users coming from Elementor, Divi or other third-party page builders, the Block Editor now covers 80–90% of the same use cases using native WordPress rather than a heavy page-builder layer.
Three regions:
Switch via the options menu (three dots, top-right).
Two fast ways.
Click the blue + in the top-left toolbar, or the + that appears between existing blocks. A panel opens with all available blocks organised by category: Text, Media, Design, Widgets, Theme, Embeds.
Search at the top narrows to specific blocks by name. Hover any block for a preview.
On an empty block (or press Enter to create a new line), type / followed by part of the block name. /image, /heading, /columns, /table. A dropdown of matches appears as you type; Enter inserts the highlighted block.
The slash command is faster than the inserter once you know block names, and it keeps your hands on the keyboard.
The Block Inserter includes a Patterns tab with pre-designed layouts combining multiple blocks. Hero section, testimonial block, feature grid, call-to-action, pricing table — ready-made layouts you insert as a starting point and customise. See the patterns guide.
| Block | Category | Use |
|---|---|---|
| Paragraph | Text | Body text — default when you just start typing |
| Heading | Text | H1–H6 for structure |
| Image | Media | Single image from library or upload |
| Gallery | Media | Multiple images in a responsive grid |
| List | Text | Bulleted or numbered |
| Quote | Text | Styled blockquote for testimonials or pulled quotes |
| Buttons | Design | One or more CTA buttons with colours and links |
| Columns | Design | 2, 3 or custom multi-column layouts |
| Cover | Media | Full-width hero with image/video background and overlay text |
| Spacer | Design | Vertical whitespace between blocks |
| Table | Text | Structured data tables |
| Video | Media | Upload or embed |
| Audio | Media | Upload or embed for podcasts or music |
| File | Media | Downloadable attachment (PDF, ZIP) |
| Custom HTML | Widgets | Raw HTML for embeds or custom markup |
| Shortcode | Widgets | Run a shortcode from a plugin (e.g. [wpforms id=\"1\"]) |
Plugins add their own blocks. WooCommerce adds product grids, single product, cart, checkout. Contact form plugins add form blocks. SEO plugins add FAQ schema and How-To blocks.
Hover over the six-dot grip icon on the left of the block toolbar. Click and drag to move the block. Works best when reordering blocks a long way apart — less so for swapping adjacent blocks.
The up and down arrows in the toolbar nudge one position at a time. Faster than dragging for small moves.
Top toolbar, list view icon. Shows every block on the page as a hierarchical outline. Click a block to jump to it; drag in the list to reorder. Essential on long pages with nested blocks.
Hold Shift and click multiple blocks, choose Group from the toolbar. The grouped blocks become a single unit that can be moved, styled and repositioned together. Perfect for sections that belong together (hero with heading + paragraph + button).
When a block is selected, a floating toolbar appears above it.
For deeper customisation:
| Shortcut | Action |
|---|---|
| / | Quick block search on an empty line |
| Ctrl+Shift+D | Duplicate the selected block |
| Ctrl+Z / Ctrl+Shift+Z | Undo / Redo |
| Ctrl+K | Insert or edit a hyperlink |
| Ctrl+/ | Open Command Palette |
| Ctrl+A | Select all in current block; repeat to select all blocks |
| Ctrl+B / Ctrl+I | Bold / Italic |
| Shift+Click | Select multiple blocks |
| Ctrl+Shift+H | Show the full shortcut list |
On Mac, swap Ctrl for Cmd.
Ctrl+/ (or Cmd+/). A search bar that executes commands — "Open document settings", "Add new image", "Insert Columns block", "Toggle fullscreen". Similar to the command palette in VS Code. Faster than navigating menus once you learn a few commands.
Top-right controls:
Every save creates a revision. Click Revisions in the settings sidebar to compare any two versions side-by-side and restore an earlier one if needed. Invaluable when a change goes wrong or an editor overwrites your work.
Two mechanisms for saving and reusing content.
A block (or group) saved once and inserted anywhere. Edit the reusable block once and every instance updates. Useful for CTAs, staff bios, pricing boxes — anything appearing on many pages that you want to keep consistent.
Create: select block(s), toolbar more-options, Create Reusable block. Name it, save.
Pre-designed layouts. Unlike reusable blocks, patterns are inserted as independent copies — changing a pattern after insertion does not affect other pages using the same pattern. Use patterns as starting points to customise per page.
Browse under the Patterns tab in the Block Inserter. Save your own patterns: select blocks, more-options, Create Pattern.
Two ways to access raw HTML.
Block toolbar three dots > Edit as HTML. Switches that single block to an HTML view while the rest of the editor stays visual. Useful for fine-tuning a single block.
Options menu (top-right three dots) > Code editor. Switches the entire page to raw HTML. You see the WordPress block markup (HTML comments demarcate each block) and can edit directly.
Useful for copy/paste of complex HTML or for fixing blocks that have broken. Careful — breaking the block markup comments can corrupt blocks.
Can I use the Classic Editor instead of the Block Editor?
Yes, by installing the Classic Editor plugin (free, officially maintained). Supported until at least 2026, but the WordPress direction is clearly block-first; new users should learn the Block Editor rather than defaulting to Classic.
Why do I see different block options than my colleague?
Different themes register different block styles and template parts. Different plugins add different blocks. A site with WooCommerce shows more blocks than a bare WordPress site.
How do I convert a Classic Editor post to blocks?
Open the post in the Block Editor. WordPress wraps the old content in a single Classic block. Click it, toolbar three dots, Convert to blocks. WordPress parses the HTML into individual blocks.
Can I edit a post on mobile?
Yes, but limited. The Block Editor is functional on tablets and acceptable on phones for small edits. For substantial editing, the official WordPress mobile app provides a block-aware editor tuned for touch.
Why did my formatting disappear when I saved?
Usually because the formatting was invalid HTML (e.g. an orphaned tag). WordPress sanitises invalid markup on save. Check the code editor for corrupted tags; rebuild the block if needed.
Can I copy blocks between posts?
Yes. Select block(s), Ctrl+C. Open the other post, paste. The blocks are recreated with the same content and settings.
What is the difference between a block and a pattern?
A block is a single unit (paragraph, image). A pattern is a pre-designed combination of blocks (hero, pricing table). Patterns are inserted as independent copies; reusable blocks are linked instances that update together.
How do I add custom CSS to a specific block?
Settings sidebar > Block > Advanced > Additional CSS classes. Enter a class, then style it in Appearance > Customise > Additional CSS or the Full Site Editor's Styles section.
Can I lock a block so editors cannot move it?
Yes. Block toolbar three dots > Lock. Choose whether to prevent movement, removal, editing or all three. Useful for template pages where the structure should not change but content should.
Why does the editor feel slow on long posts?
Loading 500+ blocks into one editor taxes the browser. For very long posts, split into smaller pieces or consider using Reusable Blocks to reduce rendered block count. Modern Chrome / Firefox on reasonable hardware handles most posts fine.
Launch your WordPress site on smartxhosting.uk
UK hosting with the Plesk WordPress Toolkit, LiteSpeed Cache, Redis object caching, free Let’s Encrypt SSL, free CDN and daily backups — from £2/month.
View WordPress hosting plans →