The Block Editor

By the end of this lesson you will build a neat page out of blocks: headings, paragraphs, images, columns and buttons. You will know how to move and style blocks, reuse designs with patterns, and read the hidden markup WordPress saves.

The block editor is sometimes called Gutenberg, after the project that built it. It replaced the old single text box in WordPress 5.0, and it is now used everywhere in WordPress.

What is a block?

A block is one piece of content: a paragraph, a heading, an image, a button, a table, a video. You build a page by stacking blocks, like building a wall with bricks or arranging items in a tiffin box, one compartment at a time.

Each block has its own settings. A paragraph can be large or small. An image can have a caption. A button can link anywhere. Because every block is separate, you can move one without disturbing the others.

The editor screen

When you open Pages > Add New Page, you see four main areas:

The sidebar has two tabs. The Page (or Post) tab holds things like status, slug and featured image. The Block tab holds settings for whatever block you clicked.

Adding blocks: three ways

Way 1: the inserter. Click the blue + at the top left. Search for "image" and click Image.

Way 2: the slash command. In an empty line, type / followed by a block name, such as /heading or /button, and press Enter. This is the fastest way once you know block names.

Way 3: Markdown-style shortcuts. Type ## (two hashes and a space) at the start of a line and it becomes a level-2 heading. Type - and it becomes a list. Type 1. for a numbered list.

Build a simple page, step by step

Let us build a "Why Choose Us" page for Bright Future Coaching in Rohtak.

Step 1: Create a new page titled "Why Choose Us".

Step 2: Type /heading, press Enter and type "Small batches, personal attention".

Step 3: Press Enter. You get a paragraph. Type: "Each batch has at most 20 students, so every doubt gets answered."

Step 4: Type /columns and choose the 33 / 33 / 33 layout. In each column add a heading and a short paragraph: "Experienced teachers", "Weekly tests", "Parent updates".

Step 5: Below the columns, type /buttons. Type "Book a free demo class" and use the link icon to link it to your Contact page.

Step 6: Click Preview at the top, then Preview in new tab. You should see a heading, a line of text, three neat columns and a button.

Moving and styling blocks

Click any block to select it. The block toolbar shows:

• up and down arrows (or a drag handle) to move the block
• a transform button to change, say, a paragraph into a heading or a list
• alignment buttons such as left, centre, wide and full width
• the three-dot menu for duplicate, copy, group, lock and delete

Styling lives in the Block tab of the sidebar. Depending on the block and theme, you can change text colour, background, typography, padding and margins. Try giving your columns a light background and some padding.

Layout blocks: Group, Row, Stack and Grid

To arrange blocks, put them inside a container block:

Select several blocks (Shift+click), then choose Group from the toolbar to wrap them. Think of a Group as a thali plate that holds several bowls: move the plate and all the bowls move together.

List View and document overview

On long pages, clicking the right block is hard. Open List View from the top toolbar (the icon with three lines). It shows every block as an outline, with nested blocks indented, like the table of contents in a textbook. Click a name to select that block, or drag names to reorder.

Patterns: ready-made groups of blocks

A pattern is a ready-made group of blocks, such as a pricing table or a testimonial section. Open the inserter, click the Patterns tab and browse by category. Click one to insert it, then change the text and images.

You can also save your own:

1. Step 1: Select a group of blocks you built, such as your three-column section.
2. Step 2: Open the three-dot menu and choose Create pattern.
3. Step 3: Name it "Three features" and decide whether it is synced.

A synced pattern is the same everywhere: edit it once and every page that uses it changes. Use this for something like your centre's phone and address block. An unsynced pattern is just a starting copy that you can change on each page. Synced patterns were called "reusable blocks" in older versions.

What WordPress actually saves

Behind the friendly screen, WordPress saves normal HTML with special comments that mark where each block starts and ends. Open the three-dot menu at the top right and choose Code editor to see it. Your heading and button look like this:

<!-- wp:heading -->
<h2 class="wp-block-heading">Small batches, personal attention</h2>
<!-- /wp:heading -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="/contact/">Book a free demo class</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

The <!-- wp:... --> comments are invisible to visitors, but the editor uses them to rebuild your blocks next time. Settings appear as small JSON inside the comment, for example a centred paragraph:

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Admissions open for the 2027 batch.</p>
<!-- /wp:paragraph -->

You rarely type this by hand, but you will write it in theme templates and patterns in the developer lessons.

Advanced: register a pattern in code

Theme and plugin developers can add patterns that appear in the inserter for every user. This PHP registers a simple call-to-action pattern:

<?php
add_action( 'init', function () {
    register_block_pattern( 'brightfuture/demo-cta', [
        'title'      => 'Free demo class call to action',
        'categories' => [ 'call-to-action' ],
        'content'    => '<!-- wp:paragraph {"align":"center"} --><p class="has-text-align-center">Try a free demo class this Saturday.</p><!-- /wp:paragraph -->',
    ] );
} );

After this code runs (in a plugin or a theme's functions.php), the pattern shows in the inserter under Call to Action.

Older code

Common mistakes

• Pressing Enter for spacing. Empty paragraphs make messy pages. Use the Spacer block or padding settings instead.
• Pasting from Word with strange formatting. Paste with Ctrl+Shift+V to paste plain text, then format with blocks.
• Editing a synced pattern by accident. Changes appear on every page using it. Detach it first if you want a one-off change.
• Using headings for big text. Pick heading levels by structure (H2, then H3), not by size. Change size in typography settings.

Key points

• A page is built from blocks; each block has its own toolbar and sidebar settings.
• Add blocks with the inserter, the / slash command or Markdown-style shortcuts.
• Group, Row, Stack, Grid and Columns arrange blocks; List View helps on long pages.
• Patterns are reusable designs; synced patterns update everywhere at once.
• WordPress saves HTML with <!-- wp:... --> comments that describe each block.

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Meera Sharma</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Physics, 12 years of teaching classes 11 and 12.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->