Getting started with the block editor
A beginner's guide to the WordPress block editor (Gutenberg) — how to write, add content, and publish pages and posts.
- Time
- 8 minutes
- Difficulty
- Beginner
The block editor is the main tool you'll use to write and design content in WordPress. It replaced the older editor in 2018, and it's much more powerful — once you understand how it works.
This guide explains the basics so you can edit pages and write posts with confidence.
Quick summary
The block editor works by putting every piece of content into its own "block." A paragraph is a block. An image is a block. A heading is a block. You add, move, and style blocks to build your page. It's a bit like digital building blocks. Once you get the hang of it, it's quite easy to use.
What is a "block"?
In the block editor, everything on a page is a separate block. Think of blocks as content containers — each one holds one type of content:
- A Paragraph block holds text
- An Image block holds a photo
- A Heading block holds a title or subheading
- A Buttons block holds one or more clickable buttons
- A List block holds bullet points or numbered lists
You build a page by stacking blocks on top of each other. You can add as many as you need, rearrange them, and style each one individually.
Opening the block editor
The block editor opens automatically when you click on a page or post to edit it.
Go to your dashboard. Log in to WordPress, usually at yoursite.com/wp-admin.
Click Pages or Posts in the left sidebar, depending on what you want to edit.
Click on the title of the page or post you want to edit. The block editor opens.
Alternatively, browse to a page on your live site while logged in, then click Edit Page in the admin bar.
The editor layout
The block editor has three main areas:
| Area | Location | Purpose |
|---|---|---|
| Top toolbar | Fixed bar at the top | Save, publish, undo, redo, and view options |
| Content canvas | The large central area | Where you write and edit content |
| Settings panel | Collapsible panel on the right | Settings for the selected block or the whole page |
Adding a block
There are several ways to add a new block:
Option 1: Click the + button Click the + (Block Inserter) button at the top left of the editor to open a panel showing all available blocks. Click any block to insert it. You can also click an Add block (+) button in the content area: it opens a shorter list, usually with a search box, and Browse all opens the full panel.
Option 2: Slash command
Start a new, empty paragraph (press Enter at the end of a paragraph) and type / (forward slash). A list of blocks appears. Keep typing the name of the block you want — for example, /image — and press Enter to insert it.
Option 3: Press Enter At the end of a paragraph block, pressing Enter creates a new paragraph block below it.
Working with text (Paragraph blocks)
Paragraph blocks are the most common block. To edit text in a paragraph block:
Click on the text you want to edit. The block becomes active and you can type.
Select text by clicking and dragging, just like in any word processor.
Use the block toolbar that appears above the selected block to make text bold, italic, add a link, and more.
Adding a heading
Headings help organize your content and are important for accessibility and SEO.
Click the + button where you want to insert the heading.
Search for "Heading" in the block inserter and click it.
Type your heading text.
Choose the heading level (H2, H3, H4 and so on) from the block toolbar above the block, or from the settings panel on the right. H2 is the most common for main section titles on a page.
Adding an image
Click the + button where you want the image to appear.
Search for "Image" in the block inserter and click it.
Choose how to add the image. You can upload a new image from your computer, select one from your media library, or insert from a URL.
Add alt text. In the right-hand settings panel, there's a field for "Alternative text." Always fill this in — it describes the image for screen readers and helps with SEO. See image sizes, cropping & alt text.
Moving blocks
You can rearrange blocks in two ways:
- Drag and drop — click a block to select it, then click and hold the six-dot drag handle in the block toolbar, and drag the block up or down.
- Arrow buttons — click a block to select it, then use the up and down arrow icons in the block toolbar to move it one position at a time.
Saving and publishing
After making changes to a page that's already published, click the Save button in the top-right corner (older WordPress versions call it Update). Your changes go live immediately.
Easy to miss
WordPress autosaves your work regularly (every 60 seconds by default), but autosave never publishes your changes and doesn't overwrite a page that's already live. Always click Save or Publish to actually save your work to the live site.
Undoing mistakes
Pressed the wrong key or deleted something by accident? Don't panic.
- Press Ctrl+Z (Windows) or Cmd+Z (Mac) to undo your last action.
- You can undo multiple steps in a row.
- For bigger mistakes, WordPress also keeps a full revision history. See undo mistakes with revisions.
Common questions
My editor looks different — I see a simple text area, not blocks.
You might be using the Classic Editor, which is an older editing interface sometimes installed as a plugin. See Classic editor vs block editor to understand the difference.
I accidentally deleted a block. Can I get it back?
Yes. Press Ctrl+Z (Windows) or Cmd+Z (Mac) immediately to undo the deletion. If you've saved since then, check the revision history — see undo mistakes with revisions.
What are all those other blocks in the block inserter?
There are many block types — for embeds, tables, columns, buttons, and more. See working with blocks and the most useful blocks, explained for a guided tour.
I want to add HTML or custom code. Can I do that?
Yes, there's a Custom HTML block. However, adding code incorrectly can break your page. Unless you're comfortable with HTML, please ask Chykalophia to help with any custom code.
Can I preview my changes before publishing?
Yes. Click the View button near the top-right (it shows a device icon, such as a computer screen), then choose Preview in new tab to see how your page will look to visitors. Your changes aren't published until you click Save or Publish.
Related guides
- Classic editor vs block editor
- Working with blocks
- The most useful blocks, explained
- How to edit a page
- Undo mistakes with revisions
- Drafts, previews, and publishing
Need a hand?
Learn more
Last updated