Writing Pages in Blocks

A page made of pieces

In the new WordPress editor, a page is no longer one long box of text. It is a stack of blocks: a heading, a paragraph, an image, a list, another paragraph.

Most people first use it the way they used the old editor, typing everything in one go and formatting it afterwards. That works, more or less.

But the editor rewards a different habit. Written in units, a page is quicker to edit, easier to read on a phone, and far more likely to come through the next redesign intact.

That habit is worth forming now, while the editor is new to everybody.

One idea per block

A paragraph block works best holding one idea, in one to three sentences, which is roughly what a paragraph on a website should be anyway.

Short blocks can be moved. Each has arrows to shift it up or down, so reordering a page takes seconds rather than cutting and pasting.

A paragraph covering three ideas has to be split before any of them can go where it belongs.

On a phone, where many visitors now read, a long paragraph becomes a column of grey. Short blocks keep the page readable without anybody having to think about it.

The blocks a business page needs

• Paragraph, for one idea at a time.
• Heading, for every heading, at the right level.
• List, for anything that genuinely is a list.
• Image, with alt text describing what it shows.
• Button, for the one thing the page asks visitors to do.
• Reusable blocks, for text that appears on many pages.

The second is the one most often done wrong, and it matters more than it looks.

Headings that are real headings

On older sites, headings were often made by typing a line and making it bold. On screen it looked like a heading. To everything else, it was a paragraph.

Screen readers, used by people who cannot see the page, let listeners jump from heading to heading. A bold paragraph gives them nothing to jump to.

Search engines read headings as the outline of the page. Bold text tells them nothing about structure.

And a theme styles real headings consistently, so changing the theme changes every heading with it. Bold lines stay exactly as they were, and look stranded.

The heading block lets you choose a level. The page title is the top level, so headings within the page start at the second, with the third for points beneath them.

Pasting from a document

Plenty of pages are written in a word processor first and pasted in, and the block editor handles this better than the old one did.

Paste formatted text and it is split into blocks, with headings, lists and paragraphs each becoming the matching block.

But only if the document used real headings. A line made bold in the document arrives as a bold paragraph, so the habit has to start before the editor opens.

Reusable blocks for repeated text

Some text appears on many pages: opening hours, the area you serve, a line about free estimates, a short contact panel.

Typed separately on each page, it drifts. One page gets updated, the rest do not, and the site contradicts itself.

A reusable block fixes this. Write the text once, add it to your reusable blocks from the block's menu, and insert it on any other page. Edit it in one place, and every page using it changes.

That is also its one risk. Editing a reusable block on any page changes it everywhere, so a one-off variation belongs in a copy converted back to an ordinary block.

A worked example

A two-truck landscaping company serves six towns and has a page for each of its services.

Every service page ended with the same paragraph listing the towns, typed separately each time. When the company added a seventh town last spring, it reached four pages out of eleven.

The headings on those pages were bold lines. When the site got a new theme, real headings elsewhere changed to match it; the bold lines did not, and the service pages looked borrowed from another site.

This winter the pages were rewritten in blocks: real headings at the right levels, one idea per paragraph, and the service area turned into a single reusable block.

Adding an eighth town now means editing one block. Every service page shows the same list, because there is only one list.

Leave the styling to the theme

Paragraph blocks offer font sizes, text colours and background colours. They are tempting, and mostly worth leaving alone.

A colour chosen on one paragraph is stored with that paragraph. When the site is redesigned, the theme changes everything around it, and that paragraph stays exactly as it was.

A few dozen such choices across a site become a few dozen small inconsistencies, each of which somebody has to find.

Emphasis belongs in the words and the structure. Colour and size belong in the theme, decided once by whoever designs the site.

Structure that survives a redesign

The block editor stores a page as ordinary web content, with small markers noting where each block begins and ends.

A new theme reads that content directly. Headings stay headings, lists stay lists, and the page arrives in the redesign already structured.

Pages made with some older page builders are stored as that builder's own codes instead. Remove the builder and those codes appear on the page as text, which is why leaving a builder usually means rebuilding pages.

Writing in blocks now is a small investment in the next site, whenever it comes.

The counter-case

Not every page needs converting.

Pages built in a page builder should stay there for now. Half-converting them produces pages that are neither one thing nor the other, and the conversion belongs in a redesign.

A small site with five pages that change once a year gains little from reusable blocks. The habit of real headings still applies; the rest can wait.

And blocks do not write anything. A muddled page in perfect blocks is still a muddled page.

For any page written from now on: one idea per block, real headings, and repeated text kept in one place.

The next page you write

1. Draft it in plain paragraphs first.
2. Give each idea its own paragraph block.
3. Use heading blocks for every heading.
4. Keep heading levels in order.
5. Make hours and service area reusable blocks.
6. Leave colours and sizes to the theme.
7. Preview it on a phone before publishing.

Step three is the one that matters most. Real headings serve screen reader users, search engines and the next redesign at once, and bold text serves none of them.

What the update itself involves is covered in WordPress 5 and the new editor on your site.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.