The block editor works like a Lego set. Every element on your page (a paragraph, an image, a button) is an independent block that you can drag and drop freely. This simplicity completely eliminates bloated code, helping your website load in the blink of an eye.

🔖 Best for: The initial phase of designing your storefront and writing blog posts.

1. Open the workspace

To start designing, select your destination from the left admin menu:

  • Building a storefront (Home, About): Select Pages and click Add New Page.

  • Writing an article: Select Posts and click Add New Post.

The workspace will open, divided into the following 3 main functional areas.

2. Use the top toolbar

Located at the very top of the screen, this is the central navigation hub for quick actions. Here, you can:

  • Click the Plus (+) button in the top left corner to quickly insert content blocks.

  • Use the arrow buttons to Undo or Redo if you make a mistake.

  • Press Ctrl + K (or Cmd + K on Mac) to open the command palette for lightning-fast feature searching.

3. Control page structure

Located in the left column, this panel contains 2 tools that help you see the skeleton of your web page:

  • List View tab: Displays how blocks are nested inside each other. Drag and drop blocks here to rearrange them precisely without accidentally clicking the wrong element on the visual canvas.

  • Outline tab: Automatically monitors and alerts you if your headings are out of order (e.g., placing a smaller H3 tag before a larger H2 tag). Click here to fix your structure for better SEO.

💡 Workspace setup tip: To keep the structure column permanently visible, click the Options button (3 dots in the top right corner) $\rightarrow$ select Preferences → toggle on Always open List View.

4. Customize block settings

Located in the right column, this sidebar is divided into 2 tabs for in-depth customization:

  • Page (or Post) tab: Manages settings for the entire page. Use this to upload a Featured Image, edit the URL slug, and write an excerpt.

  • Block tab: This tab only appears when you click on a specific block. Use it to change the background color, tweak typography, adjust sizing, and add spacing for that exact block.

[Insert Image 1 here]

  • Image requirement: Full workspace screenshot, highlighting the 3 areas: Top Toolbar, List View (left), and Settings Sidebar (right).

  • Alt text: Workspace layout of the block editor.

  • Caption: Mastering these 3 core areas helps you control your website visually and intuitively.

🎯 Next steps: Now that you have mastered the core design tool, it is time to put it into practice to build your system. Choose your next journey: