Ananta Code Academy
 Continue to Day 10
MODULE 01 · FOUNDATIONS

The Block Editor in Depth

You've published a Post and a Page — now let's actually understand the block editor you used to build them.

Day 9 of 30 Beginner ~20 min
01 · OVERVIEW

Everything Is a Block

WordPress's editor — known as the Block Editor, or "Gutenberg" — treats every piece of content as an individual, self-contained block. A paragraph is a block. An image is a block. A heading, a button, a list — all blocks, each with its own settings.

Once this clicks, building a page stops feeling like writing in a text box and starts feeling like assembling pieces on a canvas.

02 · COMMON BLOCK TYPES

The Blocks You'll Reach for Most

There are dozens of block types, but a small handful cover almost everything you'll build in this course.

BLOCK WHAT IT'S FOR
Paragraph

Standard body text — the default block when you just start typing.
Heading

Section titles, with adjustable levels (H2, H3, etc.) for structure.
Image

A single image, pulled from your Media Library or uploaded fresh.
List

Bulleted or numbered lists.
Columns

Splits content into side-by-side sections — useful for layout.
Button

A styled, clickable link — commonly used for calls to action.
SHORTCUT

Type "/" at the start of a new line to open a quick block search — faster than clicking the "+" icon once you get used to it.

03 · WHAT A BLOCK ACTUALLY IS

Behind the Visual Canvas

Every block you place is stored as structured content behind the scenes — not just as loose text.

block-markup.txt 
<!-- What a Paragraph block stores -->
wp:paragraph
  content: "Welcome to my site."
  align:   left
<!-- Each block keeps its own settings, separate from the rest -->
04 · BUILDING WITH BLOCKS

Step-by-Step: Assembling a Layout

Try this inside a new Draft to get comfortable moving between block types.

  • Add a Heading block — type "/" then "heading," or click "+" and search for it.
  • Add a Paragraph block below it — press Enter after the heading to create one automatically.
  • Insert an Image block — click "+", choose Image, then upload or select from the Media Library.
  • Use the block toolbar to reposition it — the up/down arrows move a block without dragging.
  • Open List View — the icon in the top-left toolbar shows every block on the page as an outline.
    • 05 · VISUAL CANVAS VS. LIST VIEW

    Two Ways to See the Same Content

    As pages get longer, switching views becomes genuinely useful rather than just a nice-to-have.

    VISUAL CANVAS What visitors will actually see — good for writing and fine-tuning individual blocks.
    LIST VIEW A structural outline of every block, nested and ordered — good for reorganizing a long page at a glance.
    06 · LAYOUT CHECKS

    Confirming Your Layout Holds Up

    STATUS CHECK
    BLOCK ORDER List View shows blocks in the exact order they'll render on the page.
    MOBILE PREVIEW Use the Preview dropdown to check how Columns and images reflow on smaller screens.
    EMPTY BLOCKS Unused blocks left behind can show blank space — delete any you're not using.
    07 · BREAKDOWN

    Breaking Down What You Just Learned

    1

    BlocksEvery element on a page — text, images, buttons — is an individual, editable block.

    2

    Block toolbarAppears above a selected block, with formatting and positioning controls.

    3

    The "/" shortcutThe fastest way to insert a new block without touching the mouse.

    4

    List ViewA structural outline that makes reorganizing long pages far easier.

    5

    ColumnsLets you place blocks side by side for more advanced layouts.

    08 · TRY IT

    Try It Yourself

    EXERCISE

    Insert a Columns block with two columns, then place a short Paragraph in each side. Notice how each column behaves as its own independent container.

    09 · TODAY'S PRACTICE

    Build a Multi-Block Page

    HANDS-ON EXERCISE

    Practice assembling a real layout

    This exercise combines everything from today into one page you'll actually be proud of.

    1. Create a new Page and add a Heading block as the title of the section.
    2. Add a Paragraph block with a short introduction underneath it.
    3. Add an Image block using a photo from your Media Library.
    4. Add a Columns block with two Paragraph blocks side by side.
    5. Open List View to confirm the block order matches what you intended, then publish.
    10 · RECAP

    Recap

    BLOCKS

    Every piece of content is its own independently editable block.

    BLOCK TOOLBAR

    Formatting and positioning controls tied to the selected block.

    LIST VIEW

    A structural outline for reorganizing long pages quickly.

    COLUMNS

    Places blocks side by side for more advanced layouts.

    11 · SUMMARY

    Key Takeaways

    • The block editor treats every element on a page as its own independent block.
    • Type "/" to quickly insert a new block without leaving the keyboard.
    • List View gives a structural outline that's easier to reorganize than the visual canvas.
    • Columns blocks let you place content side by side for richer layouts.
    • Always preview and check List View before publishing a multi-block page.
    Course Overview