Block Editor (Gutenberg) Deep Dive

Before 2018, WordPress used a single large text box (the Classic Editor) with formatting buttons, similar to an old-school word processor. Gutenberg, introduced in WordPress 5.0, broke content into individual blocks — paragraphs, images, columns, buttons, embeds — each independently editable and stylable.

Why Gutenberg replaced the old classic editor

This block model is not just a visual editor upgrade — it is the foundation for Full Site Editing, where even your header, footer, and page templates become editable blocks, not just post content.

Real-life example: The Classic Editor is one long scroll of paper. Gutenberg is a set of labeled index cards you can rearrange, resize, and restyle individually — much easier to build a varied, magazine-style layout.

Core blocks worth mastering

A handful of blocks cover 90% of real content needs: Paragraph and Heading for text, Image and Gallery for visuals, Columns for side-by-side layouts, Button for calls to action, and Group for wrapping several blocks together with shared background or spacing.

The / (forward slash) shortcut is the fastest way to insert any block — type / followed by a block name inside the editor to search and insert without touching the mouse.

Group — wraps blocks together for shared spacing/background
Columns — side-by-side layout, great for feature comparisons
Cover — full-width image or color block with overlaid text
Query Loop — pulls in a dynamic list of your latest posts (advanced but powerful)

Tip: Those HTML comments () are how WordPress remembers which HTML belongs to which block. Never manually break this structure by editing raw HTML unless you know what you are doing.

What blocks look like under the hood (post_content)

<!-- wp:heading -->
<h2 class="wp-block-heading">Why choose Rishtaara?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We teach practical, real-life examples — not just theory.</p>
<!-- /wp:paragraph -->

Reusable blocks and patterns — the productivity unlock

A Reusable Block (now called a “Synced Pattern”) lets you build something once — like a call-to-action box or a course promo banner — and reuse it across many posts. Editing the original updates every place it is used.

Block Patterns, by contrast, are just starting-point layouts you can insert and then freely customize per page, without staying synced to the original.

Real-life example: A Synced Pattern is a rubber stamp — change the stamp design once, and every future stamp (and even past ones, since it's synced) updates. A regular Pattern is a photocopy — you can scribble on your copy without affecting the original.

Synced pattern — one edit updates everywhere it's used (great for a shared banner)
Unsynced pattern — a reusable starting layout you can customize freely per use
Use synced patterns for site-wide elements like a newsletter signup box