The WordPress Site Editor puts your entire theme layout in one place. Templates, template parts, global styles, block patterns – all editable from a single interface without touching a file. If you are building block themes and still treating the Site Editor as a secondary tool, you are doing more work than you need to. This guide covers how the Site Editor actually works, how to use it to control every layout layer of a block theme, and where it beats the old Customizer approach at every turn.
What the WordPress Site Editor Actually Is
The Site Editor (Appearance > Editor) is the visual management layer for block themes. It replaces the Customizer, the Widgets screen, and the Menus screen with a unified canvas where you edit the theme’s structural HTML, global design tokens, and reusable block compositions in one place.
It is not a page builder. You are not building pages inside it – you are building the scaffolding around pages. The difference matters. When you edit the header template part in the Site Editor, that change applies everywhere the header appears across your entire site. When you edit a template, you are changing the layout structure for every post or page using that template.
The Site Editor works exclusively with block themes. If your theme is a classic PHP theme – even one that supports Gutenberg blocks in post content – the Site Editor shows a limited view and you cannot edit templates or template parts. Full functionality requires a proper block theme with the required file structure.
The Four Main Sections
When you open the Site Editor, the left panel shows four primary areas:
- Templates – The layout wrappers for different content types (single post, archive, homepage, 404, etc.)
- Template Parts – Reusable layout components shared across templates (header, footer, sidebar, post meta)
- Patterns – Saved block compositions you can insert into any template or page
- Styles – Global design tokens: colors, typography, spacing, and block-level style overrides
Each section maps directly to a folder in your theme: /templates/, /parts/, /patterns/, and theme.json respectively. Changes made in the Site Editor write to the database as user customizations, which override the theme files. Reset any section to restore the theme’s defaults.
Navigating the Site Editor Interface
The interface has two distinct modes: the dashboard view and the canvas editor. Understanding the difference saves a lot of confusion when you first start working with it.
Dashboard View
When you open the Site Editor, you land in the dashboard view. This is a list-based overview showing all your templates, template parts, and patterns. You can browse them, see which ones have been customized versus using theme defaults, and reset any customizations back to the original theme files.
The dashboard also shows a live preview of your site on the right side. Clicking any item in the list switches the preview to show that template or template part in context. This is useful for quickly checking how templates look before diving into editing.
Canvas Editor
Clicking “Edit” on any template or template part opens the canvas editor. This is a full-screen block editor view showing the actual template markup as editable blocks. The top bar shows which template or template part you are editing. The left sidebar shows the block list and document settings. The right sidebar shows block-level controls when a block is selected.
One thing that trips up new users: in the canvas editor, page content is shown as a locked placeholder. The wp:post-content block displays a grayed-out area representing where post content will appear. You cannot edit actual post content from inside the Site Editor – that stays in the standard post editor.
Breadcrumb Navigation
The Site Editor uses breadcrumb-style navigation in the top bar. When you are deep in a template, the breadcrumb shows your path: Editor > Templates > Single Post. Clicking any segment takes you back up. This is how you get back to the template list without losing your current location in the interface.
Editing Templates in the Site Editor
Templates define the full-page layout structure for each content type. They sit above the post content layer – they control everything surrounding the content: the header, the sidebar, the footer, the post title placement, the featured image position, and the archive listing structure.
Core Template Types
WordPress recognizes these template types in block themes, following the same template hierarchy rules as classic PHP themes:
| Template File | Used For | Key Blocks |
|---|---|---|
index.html | Fallback for everything – required | post-content, query loop |
single.html | Individual posts | post-title, post-featured-image, post-content, post-terms |
page.html | Static pages | post-title, post-content |
archive.html | Category, tag, date archives | query loop, post-template |
home.html | Blog posts index page | query loop, post-template |
search.html | Search results | search, query loop |
404.html | Not found pages | paragraph, buttons |
front-page.html | Static front page | covers, groups, patterns |
Custom templates for specific post types, categories, or even individual posts follow the same naming conventions as classic themes: single-{post-type}.html, category-{slug}.html, page-{slug}.html. The Site Editor lists all available templates and lets you create new ones from scratch.
How to Edit a Template
From the Site Editor dashboard, go to Templates and select the template you want to edit. Click the pencil icon or “Edit” to open it in the canvas editor. You will see the full page layout as blocks – the header template part, content area, sidebar (if present), and footer template part all visible in sequence.
Add, remove, or rearrange blocks exactly as you would in the post editor. The block inserter, drag handles, and block movers all work the same way. The main difference is that you are editing layout structure, not content. Use the wp:post-content block as a fixed reference point – everything around it is the template layer.
Creating a New Template
Click “Add New Template” in the Templates section. WordPress prompts you to choose what the template applies to: a specific post type, a category, a tag, a specific page or post, or a generic custom template. After naming it, you get an empty canvas with just the content block. Build the layout by adding template parts, post meta blocks, and any structural blocks you need.
Custom templates show up in the Template dropdown when editing posts and pages. Users can switch between available templates per post, giving you multiple layout options without needing separate themes or heavy page builder logic.
Working with Template Parts
Template parts are the reusable building blocks that multiple templates share. The classic examples are the header and footer, but template parts can be anything you want to reuse: a sidebar, a newsletter signup strip, a post meta section, a category navigation bar.
How Template Parts Work
A template part is an HTML file in your theme’s /parts/ directory. For a deep look at how they work under the hood, see our guide on template parts in WordPress block themes. Templates reference the part using the wp:template-part block with a slug attribute matching the filename. When the Site Editor renders a template, it fetches the referenced template part and renders it inline.
The key characteristic of template parts: editing a template part in the Site Editor updates every template that uses it simultaneously. Change your header template part once – every template using that part shows the updated header immediately. No need to update each template individually.
Standard Template Part Areas
WordPress recognizes four standard template part areas that affect how the Site Editor organizes and previews them:
- header – Appears at the top of the page; Site Editor treats it as a sticky top area
- footer – Appears at the bottom; Site Editor renders it below main content
- sidebar – Secondary content column; typically alongside main content
- uncategorized – Default fallback for custom template parts with no defined area
You define the area in your theme.json or in the template part file header comment. Setting the area correctly ensures the Site Editor previews template parts with accurate context.
Editing Template Parts
Open Template Parts from the Site Editor left panel. Select the part you want to edit – the preview shows the component in isolation. Click Edit to open it in the canvas.
For a header, you typically work with the Site Logo block, a Navigation block, and layout blocks (Group, Columns, Row) to arrange them. The Navigation block in the header deserves special attention: it connects to your site’s menus and supports nested dropdowns, mobile responsive toggles, and link styling – all configurable from the block settings panel without writing CSS.
Editing a template part once updates every template that uses it. This is where the Site Editor pays off – a single header change propagates across your entire site instantly.
Creating Custom Template Parts
Use the “Add New Template Part” button to create a new part from the dashboard. Give it a name and select the area. The new part starts empty in the canvas editor. Build it with blocks, then reference it in templates using the wp:template-part block with the matching slug.
A practical pattern for block themes: create a dedicated post-meta template part that displays author, date, categories, and reading time. Reference this part in both single.html and any archive loop templates. When you want to change how post meta displays across the site, edit one file.
Managing Global Styles from the Site Editor
Global Styles is the design token system for block themes. It controls colors, typography, spacing, and per-block style overrides across the entire site. Everything here maps to your theme.json file – the Site Editor is a visual interface over that data. For the full reference on what you can configure, see the guide on configuring global styles in theme.json for consistent block theme design.
Open Global Styles by clicking the circle icon in the top-right corner of the Site Editor canvas. The Styles panel slides in from the right, showing three main sections: Colors, Typography, and Layout.
Colors
The Colors section shows your theme’s registered color palette, gradient presets, and duotone presets from theme.json. You can edit individual colors here – changes update the corresponding CSS custom properties site-wide.
Below the palette, you set global defaults for text color, background color, and link color. These defaults cascade to all blocks unless a block-level override exists. If your theme’s base text is too light or the link hover color does not match the brand, fix it here rather than in a stylesheet.
Typography
Typography settings let you set global font families and sizes without code. If you have registered fluid font sizes in theme.json, the Site Editor shows the clamp ranges. You can set different font families for body text and headings, adjust line height, and configure letter spacing – all applied globally through CSS custom properties.
Block-Level Style Overrides
This is the most powerful part of Global Styles: you can set style defaults per block type. Click “Blocks” in the Styles panel to see a list of all registered blocks. Select any block to set its default colors, typography, spacing, border, and dimension settings.
For example: set the default Heading block font family to your display font, the default Paragraph font to your body font, the default Button background to your primary brand color, and the default Code block background to a dark surface. Every instance of those blocks across the site inherits these defaults without extra CSS.
Browsing Style Variations
If your theme ships with style variations, they show up in the Styles panel under “Browse Styles.” Click any variation to preview it live on the canvas. Click “Apply” to activate it. This is the same mechanism your theme’s end users see – the Site Editor is both the developer tool and the user-facing design control panel.
Creating and Managing Block Patterns
Block patterns are pre-built block compositions you can insert into any template, template part, or post. The Site Editor gives you a Patterns section where you can browse, create, and manage them without exporting PHP registration code manually. If you are building patterns from scratch in your theme files, see the complete guide to creating custom block patterns in WordPress block themes.
Pattern Types in the Site Editor
The Patterns section shows three categories:
- Theme patterns – Patterns shipped with your theme’s
/patterns/directory, read-only in the Site Editor - My Patterns – User-created patterns saved to the database, fully editable in the Site Editor
- Synced patterns – Patterns where changes propagate everywhere the pattern is used (like template parts, but for page content)
Creating a Pattern from Scratch
Click “Add New Pattern” in the Patterns section. Give it a name and a category. The canvas opens empty. Build the pattern from blocks – a hero section, a features grid, a testimonials layout, a CTA strip. When you save, WordPress stores the block markup in the database as a custom post type (wp_block).
To use the pattern in a template, open the template in canvas mode and click the block inserter. Switch to the Patterns tab. Your saved pattern appears under “My Patterns.” Insert it wherever you need it.
Synced vs Unsynced Patterns
The synced toggle is the critical distinction. A synced pattern works like a template part for page content – edit the source pattern and all instances update. An unsynced pattern is a starting composition: each instance is an independent copy that you can customize after inserting.
Use synced patterns for elements that must stay consistent across many pages: a site-wide CTA block, a newsletter signup section, a footer legal text strip. Use unsynced patterns as layout starter templates where each page gets a customized version.
Previewing Changes Across Pages
One of the Site Editor’s underused features is the ability to preview your template or global style changes against real content before saving. This is especially useful when testing layout changes that might break differently across post types.
The Preview Panel
In the canvas editor, the top bar has a “Preview” button. Clicking it opens a dropdown showing your site’s actual pages and posts. Select any post or page to render the current template against that content in the canvas. You can check how a single post template renders for a long post, a short post, a post with no featured image, or a post with many categories – all without publishing or switching tabs.
Device Preview
The preview toolbar also includes desktop, tablet, and mobile viewport toggles. Use these to check your template layout at different breakpoints. Block themes rely on CSS Grid and Flexbox for layout, so most block compositions are responsive by default – but testing with real content at mobile viewport sizes catches overflow issues and navigation problems before users do.
Save vs Publish Flow
The Site Editor save flow is different from post editing. When you make changes, a “Save” button appears in the top bar. Clicking it shows a summary of all pending changes across templates, template parts, and global styles – displayed as a grouped list before you confirm. This batch save behavior means you can make changes across multiple templates in one session and review everything before committing.
If you want to discard changes, click the “X” next to any pending change in the save panel to remove just that item. Or use the reset option on individual templates to restore the theme default.
Best Practices for Block Theme Development with the Site Editor
The Site Editor is a powerful tool, but using it without a clear workflow creates messy separation between file-based and database-based customizations. These practices keep your theme development clean.
Keep Theme Defaults in Files, User Customizations in the Database
Your theme’s /templates/, /parts/, and theme.json files are the source of truth for the base design. When you make changes in the Site Editor during development, export them back to theme files using the “Reset to defaults” flow in reverse: make the change in the Site Editor, inspect the resulting HTML in the browser via DevTools or the REST API, copy it back to the theme file.
Do not ship a theme where all the layout work lives in the database and the theme files are empty stubs. Anyone installing the theme on a fresh site gets empty templates. The database customizations belong to the site, not the theme.
Use the Site Editor to Prototype, Code to Ship
The Site Editor’s visual canvas is excellent for prototyping template layouts quickly. Build the structure visually, get the spacing and hierarchy right, then read the generated block markup through the REST API or the editor’s code view and write it to your theme files. This is faster than writing block HTML from scratch and gives you an accurate preview while you work.
Lock Blocks in Templates to Prevent User Errors
If you are building a theme for clients who will use the Site Editor, use block locking to prevent accidental deletion of structural blocks. Select any block in the canvas editor, open the three-dot menu, and choose “Lock.” You can prevent movement, deletion, or both. Structural blocks like the header template part, the content area, and the footer should typically be locked from deletion.
Test Template Changes Against Multiple Content Types
Always use the preview panel to test templates against real content. Check your single post template against posts with long titles, short titles, no featured image, and multiple categories. Check your archive template with 3 posts and with 50 posts. Edge cases that look fine in the canvas editor often break with real content.
Site Editor vs the Customizer – A Direct Comparison
The Customizer still exists in WordPress for classic themes, but the Site Editor replaces it entirely for block themes. If you are deciding between updating a classic theme or building a new block theme, this comparison covers the practical differences.
| Feature | Customizer | Site Editor |
|---|---|---|
| Template editing | No – PHP only | Yes – full visual editing |
| Template part editing | No | Yes |
| Global style tokens | Limited (theme options) | Full – colors, typography, spacing, per-block defaults |
| Live preview | Separate iframe | Inline canvas with real content |
| Block pattern management | No | Yes – create, edit, sync patterns |
| Menu management | Yes | Via Navigation block in template parts |
| Widget management | Yes | Via blocks in template parts and patterns |
| Style variations | No | Yes – visual switcher with live preview |
| Per-page template assignment | Limited | Yes – any custom template per post or page |
| Code-free layout changes | Minimal | Extensive |
The Customizer’s advantage is familiarity – it is present in every WordPress installation and many classic themes built extensive options panels inside it. But those option panels are theme-specific and non-transferable. The Site Editor’s Global Styles system is standardized across all block themes. Skills transfer between themes.
What the Customizer Still Does That the Site Editor Does Not
The Customizer handles a few things the Site Editor does not cover directly:
- Static front page settings – Still managed via Customizer > Homepage Settings (though accessible in Settings > Reading too)
- Site identity (site title, tagline, site icon) – Available in Site Editor via the Site Title and Site Tagline blocks, but also still in Customizer
- Classic theme support options – Any theme with custom Customizer panels for options like header image, background image, or theme-specific settings keeps those in the Customizer
For block themes built without Customizer options panels, the Site Editor handles everything the Customizer previously covered – and significantly more.
Common Site Editor Workflows for Block Theme Developers
To make the above concrete, here are the common task flows you will use regularly when building and maintaining block themes with the Site Editor.
Adding a Site-Wide Announcement Bar
Create a new template part called “announcement-bar” with area set to “header.” Build the bar content – a Group block with a background color, a Paragraph or Heading block for the message. Open the header template part in the Site Editor and add wp:template-part {"slug":"announcement-bar"} above the main navigation Group. Save. The announcement bar now appears at the top of every page that uses the header template part.
Creating a No-Sidebar Blog Template
If your theme includes a sidebar by default in the single post template, you can create a no-sidebar variant without touching PHP. In the Site Editor, duplicate the single.html template. Open the duplicate, remove the sidebar column, adjust the main content column to full width, and name the template “Wide Post.” Assign this template to any post that needs the wider layout from the post editor’s Template panel.
Updating Footer Copyright Year Without Editing Files
Open the footer template part in the Site Editor. Find the copyright text in the Paragraph block. Update the year. Save. Done. No FTP, no file editor, no child theme needed. This is the workflow your clients will appreciate most when you explain why you built a block theme instead of a classic theme.
Exporting Site Editor Changes Back to Theme Files
When you have prototyped a layout in the Site Editor and want to ship it as part of the theme, you need to export the database changes back to files. WordPress provides a built-in export for this.
Go to Appearance > Editor > Tools > Export. WordPress generates a ZIP file containing your theme files updated with all current Site Editor customizations. Extract the ZIP, copy the updated /templates/ and /parts/ HTML files and the updated theme.json back into your theme directory, and commit to version control.
After exporting, reset the Site Editor customizations (Editor > Tools > Reset > Reset all) to clear the database copies. Your theme files now serve as the source of truth, and the database is clean. This workflow keeps the development cycle clear: prototype in Site Editor, export to files, version control the files, reset the database.
Start Building Better Block Theme Layouts
The Site Editor is the complete layout control panel for block themes. Templates, template parts, global styles, and patterns – all editable from one interface, all tied to the theme file structure through a predictable sync model. The more you use it in your development workflow, the faster theme prototyping gets and the less CSS you end up writing to override core block defaults.
This article is part of the Full Site Editing Mastery series on brndle.com. The next article covers advanced theme.json configuration for fine-grained control over block settings and global design tokens across your entire theme.
Build Better Block Themes with brndle
brndle covers Full Site Editing, theme.json, block patterns, and block theme development from the ground up. Browse the full resource library for in-depth guides on every part of the block theme development workflow.