Getting Started with the WordPress Block Editor and Site Editor for New Site Owners

Learn how to use the WordPress Block Editor for content and the Site Editor for global design so you can safely update pages, posts, headers, and footers yourself.

Why the Block Editor and Site Editor Matter

Modern WordPress gives you two main editing areas:

• Block Editor – for writing and laying out individual pages and posts.
• Site Editor – for controlling global pieces like headers, footers, and templates (on block themes).

Both are built around “blocks” – reusable content pieces like paragraphs, images, buttons, and navigation. This block-based approach is now the default way to create and publish content in WordPress.Source

Key Concepts Before You Click Anything

Pages vs. Posts (What You Edit)

• Pages – timeless content like Home, About, Services, Contact.
• Posts – dated, blog-style entries that appear in a feed and archives.

Both use the Block Editor, but they behave differently in navigation and archives.Source

Block Editor vs. Site Editor (Where You Edit)

• Block Editor – opens when you add or edit a Page or Post. Changes affect only that one piece of content.
• Site Editor – opens from Appearance ? Editor (on block themes). Changes can affect every page that uses a template or global part like the header or footer.Source

As a rule of thumb: use the Block Editor for words and images inside a page; use the Site Editor for layout pieces that repeat across the site.

Tour of the WordPress Block Editor

How to Open the Block Editor

1. Log in to your site.
2. In the left menu, go to Dashboard ? Pages ? All Pages.
3. Hover a page title and click Edit (or click Add New to create a new page).

The Block Editor will open in fullscreen mode on most sites.Source

What You Should See (Block Editor)

• A top toolbar with buttons for undo/redo, document overview, preview, and publish/update.
• A large content area in the center with your page title at the top.
• A sidebar on the right (toggle with the gear icon) with tabs for Page and Block settings.
• A + icon (block inserter) to add new blocks.

Basic Editing Steps

1. Edit text
   • Click into any text block and type to change the content.
   • Use the small floating toolbar above the block to set bold, italic, alignment, and links.
2. Add a new block
   • Click the + icon where you want new content.
   • Choose a block like Paragraph, Heading, Image, or Buttons.
3. Reorder blocks
   • Hover a block and use the up/down arrows to move it.
   • Or drag the six-dot handle to reposition it.
4. Adjust block settings
   • Select a block, then open the right sidebar (gear icon).
   • Use the Block tab to change color, spacing, typography, and other options.
5. Save your work
   • Click Save draft to save without publishing.
   • Click Preview to see how it looks on the front end.
   • Click Publish (for new content) or Update (for existing content) to make changes live.

Tour of the WordPress Site Editor

The Site Editor lets you design your entire site with blocks: headers, footers, templates, and some global styles.Source

How to Open the Site Editor

1. From the Dashboard, go to Appearance ? Editor.
2. If your theme supports it, you’ll see a preview of your home template and a left sidebar with Navigation, Templates, and Patterns (template parts).

What You Should See (Site Editor)

• A top bar with the site title, undo/redo, and a Save button.
• A left sidebar listing Templates and Patterns (header, footer, etc.).
• The main canvas showing your site layout, with blocks you can select and edit.
• A Styles icon (half-filled circle) to change site-wide colors and typography.

Editing a Global Header or Footer

1. Go to Appearance ? Editor.
2. In the left sidebar, click Patterns (or Template Parts) and choose Header or Footer.
3. Click the area you want to change (for example, the navigation menu or logo block).
4. Edit text, links, or layout just like in the Block Editor.
5. Click Save. WordPress will show a summary of what’s changing (e.g., “Header” template part). Confirm to apply.

Because headers and footers are template parts, your changes will appear across all pages that use that template.Source

Editing a Page Template

1. In the Site Editor, click Templates in the left sidebar.
2. Select a template such as Single (for posts) or Page.
3. Edit the layout blocks (for example, move the title above the featured image, or adjust spacing).
4. Click Save to update the template for all content that uses it.

Safe First Tasks for New Site Owners

Good Places to Practice

• Create a private “Sandbox” page in Dashboard ? Pages ? Add New and set its visibility to Private.
• Use the Block Editor there to practice adding headings, images, lists, and buttons.
• In the Site Editor, duplicate an existing template and experiment on the copy before changing the live one.

Changes to Avoid at First

• Deleting header or footer blocks in the Site Editor.
• Removing Query Loop or Post Content blocks from templates (these control how posts and pages display).
• Switching themes without understanding how block themes and classic themes differ.

Using Patterns and Layout Tools

Block Patterns for Faster Layouts

Block Patterns are predesigned groups of blocks you can drop into a page or template, then customize. They’re available in both the Block Editor and Site Editor.Source

1. In the Block Editor, click the + icon.
2. Switch to the Patterns tab.
3. Browse categories like Call to Action or Columns.
4. Click a pattern to insert it, then edit the text and images.

Global Styles Overview

The Styles panel in the Site Editor lets you set default colors, typography, and spacing for your whole site, and for individual block types.Source

1. Open Appearance ? Editor.
2. Click the Styles icon (half-filled circle).
3. Adjust Typography, Colors, and Layout for the site or for specific blocks.
4. Use Preview and small changes first; then click Save when you’re happy.

Simple Workflow You Can Reuse

1. Decide what you’re changing
   • Content on one page or post ? use the Block Editor.
   • Something that appears everywhere (header, footer, blog layout) ? use the Site Editor.
2. Practice first
   • Use a private practice page or duplicate template.
3. Make small edits
   • Change one section at a time and preview before saving.
4. Save and review
   • After publishing or updating, open the live page in a new tab and confirm everything looks right on desktop and mobile.

Once you’re comfortable with this flow, you’ll be able to update your own content and layouts confidently without breaking your site.