Getting Started with the WordPress Block Editor: A Practical First-Use Guide

Learn how to use the WordPress block editor step by step, from opening a new page or post to adding blocks, layouts, and saving your work safely.

Why the WordPress Block Editor Matters

The WordPress block editor (sometimes called Gutenberg) is the default way to create and edit content in modern WordPress. Instead of one big text box, your page is built from individual “blocks” for paragraphs, images, headings, buttons, and more.Source

If you’re new to WordPress, this guide will walk you through your very first editing session so you can confidently create and update content without breaking your site.

How to Open the Block Editor

You use the same editor for both pages and posts. The only difference is how WordPress treats them in your site structure.Source

Open a New Page

1. In the left admin menu, go to Dashboard ? Pages ? Add New.
2. A new screen opens: this is the block editor workspace for a page.

Open a New Post

1. In the left admin menu, go to Dashboard ? Posts ? Add New.
2. You’ll see the same editor layout, but this time you’re creating a blog post.

What You Should See

• A large title field at the top that says something like Add title.
• A big empty area below where you’ll add blocks (your content canvas).
• A top toolbar with buttons such as Save draft, Preview, and Publish.
• A right-hand sidebar with two tabs: Post (or Page) and Block.

Understanding the Block Editor Layout

The editor workspace has three main areas: the top toolbar, the content area, and the settings sidebar.Source

Top Toolbar Basics

From left to right you’ll typically see:

• W / Site icon – returns you to the list of pages or posts.
• + (Add block) – opens the block inserter to add new content blocks.
• Undo / Redo – step backward or forward through recent changes.
• List View – shows a structured outline of all blocks on the page.
• Save draft – saves your work without publishing.
• Preview – opens a preview of how the page will look on the front end.
• Publish / Update – makes a new page live or saves changes to an existing one.

Content Area

This is where you actually build your page. Each piece of content is its own block that you can:

• Insert (paragraphs, images, headings, lists, buttons, etc.).
• Reorder by dragging or using up/down arrows.
• Style individually (alignment, colors, spacing, and more).

Settings Sidebar

The right sidebar has two main tabs:

• Post / Page – controls the entire page or post (status, visibility, featured image, template, etc.).
• Block – shows settings for whichever block is currently selected (font size, color, link, etc.).

Adding Your First Blocks

Blocks are the building units of your content. WordPress includes common blocks for text, media, layout, and more.Source

Step-by-Step: Add a Title and Paragraph

1. Click in the Add title field and type a clear page or post title (for example, About Our Company).
2. Press Enter. WordPress automatically creates a Paragraph block below the title.
3. Type your introductory text. This is your first content block.

Insert Other Common Blocks

1. Hover under an existing block until you see a small + button, or click the big + in the top toolbar.
2. In the block inserter panel, search for or select a block type, such as:
   • Heading – for section titles.
   • Image – to add a photo from your Media Library or upload a new one.
   • List – for bullet or numbered lists.
   • Buttons – to create call-to-action buttons.
3. Once inserted, type or configure the content for that block.

What You Should See

• Each block shows its own mini-toolbar when selected (alignment, bold/italic, link, etc.).
• The right sidebar switches to the Block tab with options specific to that block.
• You can drag blocks using the six-dot handle on the left or move them with the up/down arrows.

Using Headings and Layout for Readable Pages

Good structure makes your content easier to scan and helps search engines understand your page.

Heading Levels

• Use H1 for the page title (WordPress handles this automatically).
• Use H2 for main sections, and H3 for subsections under those.
• Avoid skipping levels (for example, don’t jump from H2 straight to H4).

Simple Layout Blocks to Try

• Columns – place content side by side (e.g., text on the left, image on the right).
• Group – wrap several blocks together so you can move or style them as a unit.
• Spacer – add vertical space between sections.

Saving, Previewing, and Publishing Safely

WordPress automatically saves revisions and autosaves while you work, so you can roll back changes if needed.Source

Save Draft and Preview

1. Click Save draft in the top toolbar to save your work without making it public.
2. Click Preview and choose a device type (Desktop, Tablet, Mobile) to see how the page will look.
3. Close the preview tab to return to the editor.

Publish or Update

1. When you’re ready for the page to go live, click Publish.
2. Review the visibility and URL settings if prompted, then confirm.
3. For existing content, the button will say Update instead of Publish.

Restoring an Earlier Version

1. In the right sidebar under the Post or Page tab, look for Revisions.
2. Click Revisions to open a comparison screen.
3. Use the slider or Previous/Next buttons to browse earlier versions.
4. Click Restore This Revision if you want to roll back.

How the Block Editor Relates to User Roles

Not every user will see the same options in the block editor. What you can do depends on your WordPress user role and its capabilities.Source

Typical Access Levels

• Administrator – can create, edit, and publish any content, and manage site-wide settings.
• Editor – can publish and manage posts and pages, including those created by other users.
• Author – can publish and manage only their own posts.
• Contributor – can write and edit their own posts but cannot publish them.
• Subscriber – usually can only manage their profile and does not use the editor.

If you don’t see a button or setting mentioned in this guide, your role may not have that capability. Ask your site administrator if you need additional access.

When You’ll Use Elementor Instead

On many Compass Production builds, you’ll use the block editor for everyday content updates (blog posts, simple pages) and Elementor for more complex layouts.

Common Pattern

• Block editor – best for text-heavy pages, blog posts, and quick edits.
• Elementor – best for highly designed landing pages, homepages, and layouts with advanced design elements.

If a page was built with Elementor, you’ll usually see an Edit with Elementor button at the top of the editor screen. Use that instead of the default editor to avoid breaking the layout.

Quick Practice Checklist

To get comfortable with the block editor, create a private practice page and try the following:

• Create a new page via Dashboard ? Pages ? Add New.
• Add a title and at least three Heading blocks (H2) for sections.
• Under each heading, add a Paragraph and a List block.
• Insert at least one Image block from your Media Library.
• Wrap a few related blocks in a Group block and change its background color.
• Use Preview to check the page on desktop and mobile.
• Publish the page with Visibility set to Private so only logged-in users can see it.

After a few practice runs, the block editor will feel much more intuitive, and you’ll be able to update your site content quickly and safely.