1.2The Gutenberg editor & blocks
The essentials in 30 seconds
- Gutenberg works with blocks: every heading, paragraph, image, button or column is a self-contained block that you move and configure.
- You insert a block with the + button or by typing / followed by the name (/image, /columns), the regulars' shortcut.
- Patterns insert ready-made layouts; reusable blocks are edited in one place and update everywhere.
Running mini-case — Samir composes the Collections page
Samir has to build the "Collections" page for Atelier Bahja: a banner, three range cards side by side, then a contact box repeated on several pages. He discovers that Gutenberg lets him do everything without code, but he wants to move fast and stay consistent. This section shows him blocks, columns, patterns and the reusable block that will save him from recreating the box on every page.
Sequel to case 1.1 — the content plan is ready, now on to composition.
1. Blocks and columns
In Gutenberg, everything is a block: a heading, a paragraph, an image, a button, a gallery, columns. Each block can be selected, moved by drag and drop and has its own settings in the sidebar. You compose a page like stacking bricks, without writing code. The most useful shortcut: typing / in the content opens the inserter and lets you call a block by name (/image, /button, /columns).
For Hassan's three ranges, Samir inserts a Columns block with three columns, then places an image, a heading and a paragraph in each. On mobile, the columns stack automatically: the page stays readable with no extra setting.
2. Patterns and reusable blocks
Patterns are ready-to-use layouts — banner, pricing grid, testimonials — that you insert in one click then customise. They save considerable time on complex sections and guarantee a professional result.
Reusable blocks (or synced blocks) go further: a block designed once (for example the "Contact us" box) can be reused on several pages. Editing it in one place updates all occurrences. Samir uses this for the workshop's contact details, which must stay identical everywhere.
🔎 Concrete example — Three ranges side by side (Samir's case)
1. Columns block → 3 columns.
2. In each column: image + range heading + paragraph.
3. + button → Patterns → insert a "Our commitments" banner.
4. Contact box → "Create a reusable block".
→ Reuse the box on Collections, About and Contact.Result: a structured page in a few minutes.
Lesson: pattern for layout, reusable block for repeated content.
Section vocabulary
- Gutenberg
- WordPress content editor based on blocks: the modern way to compose posts and pages.
Simple example: Samir builds the Collections page in Gutenberg.
What it is not: going back to the classic editor out of habit.
Reflex: blocks = Gutenberg.
- Block
- A self-contained content unit: paragraph, heading, image, button, columns, gallery.
Simple example: each range takes a column with three blocks.
What it is not: putting everything into a single paragraph block.
Reflex: one element = one block.
- Insertion (+ or /)
- Adding a block via the + button or by typing / followed by the block name.
Simple example: type /columns to insert the grid.
What it is not: looking for each block in a menu without using the shortcut.
Reflex: / + name = quick insertion.
- Pattern
- A ready-to-use layout, inserted in one click then customised.
Simple example: a "Our commitments" banner inserted then adapted to the workshop.
What it is not: recreating every complex section by hand.
Reflex: ready-made section = pattern.
- Reusable block
- A block saved and reused on several pages, updated everywhere from a single place.
Simple example: the same contact box on three pages.
What it is not: copy-pasting the box and forgetting to fix one occurrence.
Reflex: repeated content = synced block.
In practice — Composing a page with blocks
- In a page, insert a heading, a paragraph, an image and a button via + or /.
- Add a two-column Columns block and move the blocks into it.
- Insert a pattern from the Patterns tab, then customise its text and image.
- Create a reusable block "Contact us" and insert it on a second page.
Ready-to-say script — showing block-based composition (30s)
"Your page is built like bricks: a heading, an image, a button. I can also reuse a contact block on several pages: if your number changes, I change it once and it updates everywhere."
Show the reusable block live: it is the most convincing argument.
Copy-paste template — block-based page plan
SECTION 1: banner (heading + image + button)
SECTION 2: columns → 3 ranges (image + heading + text)
SECTION 3: customised "commitments" pattern
REUSABLE BLOCK: contact box
PAGES USING THE BOX: _______________Simple page
Stacking a heading, text and image is enough; no need for columns or patterns.
Rich page
Columns + patterns for polished layout without code.
Repeated content
Reusable block for contact details, opening hours or calls to action.
Taking over an old site
Classic blocks remain editable; migrate the old sections gradually.
✓ Best practices
- Use / to insert a block from the keyboard.
- Go through a pattern before rebuilding a complex section.
- Reserve reusable blocks for genuinely repeated content.
✗ Common pitfalls
- Cramming everything into a single paragraph block.
- Copy-pasting a box onto ten pages.
- Recreating an existing pattern by hand.
Key takeaways
- Everything is a block in Gutenberg.
- / + name inserts a block quickly.
- Patterns save time on complex sections.
- A reusable block updates everywhere.
48h Challenge — apply tomorrow
Reproduce a "three services" section with a Columns block and insert a pattern on a page. Then create a reusable contact block and place it on two pages. 25 minutes.
- I compose a page with blocks and columns.
- I insert a block from the keyboard with /.
- I know when to use a pattern or a reusable block.
Frequently asked questions
Gutenberg or a page builder?
Gutenberg, native and free, is enough for most sites and stays lightweight. Builders such as Elementor offer more visual freedom, at the cost of extra weight and dependency. Learning blocks is the foundation.
Can I get the old classic editor back?
Yes, with the Classic Editor plugin, but that is a transitional choice: Gutenberg is the future of WordPress and the basis of full site editing (FSE, section 2.2). Better to learn blocks.
Is a reusable block really synced?
A classic reusable block is synced: editing its content in one place updates all occurrences. For independent variants, use a pattern or a template instead.
Samir wants to quickly insert an already laid-out "Our commitments" section. Which action is most efficient in Gutenberg?