Site Editor

Use the Site Editor

With the Site Editor, you can design everything on your site — from the header right down to the footer — using blocks.

Before the Site Editor, many fundamental elements of your site’s design (like the header, sidebars, page content, and more) were all determined by your theme. With the Site Editor, you have access to a whole new level of control over how your site looks!

📌

The Site Editor is in beta, meaning it is a brand new feature and evolving every day!

Table of Contents

Video Overview

↑ Table of Contents ↑

When to Use the Site Editor

The Site Editor brings a whole new level of control when editing a WordPress site. While it’s possible to edit your site’s overall structure (i.e. the templates) as well as the content of individual pages and posts, we recommend following this advice:

  1. When you want to edit your site’s overall structure (i.e. areas like headers, footers, and the structural appearance of your pages and posts), use the Site Editor.
  2. When you want to edit the content of your pages (i.e. text, images, embeds, and more), edit those pages individually by going to your dashboard and selecting Pages.
  3. When you want to edit the content of your blog posts (i.e. text, images, embeds, and more), edit those posts individually by going to your dashboard and selecting Posts.

💡

If you have inadvertently added page or post content into the Site Editor, you can transfer the content from the Site Editor into an individual post or page.

↑ Table of Contents ↑

Access the Site Editor

You can use the Site Editor on a growing collection of new themes. Some of the themes where you can use the Site Editor are:

Arbutus, Bennett, Barnett, Blockbase, Calvin, Farrow, Geologist, Jackson, Kerr, Kingsley, Mayland (blocks), Payton, Quadrat, Russell, Seedlet (blocks), Twenty Twenty-Two, Videomaker, and Zoologist.

When you activate a theme that supports the Site Editor, visit Appearance → Editor to access it:

Screenshot showing how to open the site editor from the the Appearance menu.
Access the Site Editor under Appearance in your dashboard

The Site Editor will then load the front page of your site for you to start editing.

↑ Table of Contents ↑

Elements of the Site Editor

The top menu includes several important options, each explained below:

  1. The site icon: Return to your dashboard or switch to editing templates or template parts.
  2. The + block inserter button: Add a new block.
  3. Tools: Choose between editing a block and selecting a block. Choose the Select tool to select individual blocks. Once a block is selected, press the Enter key on your keyboard to return to editing.
  4. Undo: Reverse the most recent action taken.
  5. Redo: Un-reverse an action you reversed using the Undo button.
  6. List View: See a list of all of the blocks that are on the page. This is useful for seeing your page’s structure and editing, moving, and removing blocks.
  7. Templates: The name of the template you are editing. Click this and then click Browse all templates to view all of your site’s templates. Learn more about template editing.
  8. Preview: See what your site looks like with the changes applied.
  9. Save: Save your changes. Learn more about saving.
  10. Settings: Display or hide the Template and Block Settings sidebar menu.
  11. Styles: Customize the appearance of specific blocks for the whole site. Learn more about working with Styles.
  12. More Options: Opens additional settings and tools.

↑ Table of Contents ↑

Save Changes

When you click the Save button to save changes you’ve made in the Site Editor, it will note the places you’ve made changes to. You can choose to save all or just some of them. Note that some changes (like changes to the Header and Footer templates) will apply to all pages of your site that use those templates, and not just the page you were working on.

↑ Table of Contents ↑

Reset Changes

If you have saved changes and want to reset those back to the default style, you can use the Clear Customizations option demonstrated below.

If you haven’t saved the changes yet, you can exit out of the editor and the changes you made will not be saved.

If you have already saved the changes, you can revert those changes. Click the name of the template you’re editing, click the three dots next to the template part you want to reset, and click the Clear customizations option:

Clearing the customizations while in the Site Editor by selecting the three dots to the right of the template part name.

Then, make sure to click Save to save your action of clearing the customizations.

↑ Table of Contents ↑

Theme Blocks

The same blocks that work within the page/post editor are compatible with the Site Editor. You’ll find a list of all those blocks here.

There are also a few notable blocks that are optimized for the Site Editor. We call those Theme Blocks.

An example of this is the Query Loop Block: a powerful block that gives you greater control over the look and feel of your post layout.

Adding a Query Loop Block in the Site Editor to display posts

↑ Table of Contents ↑

Styles

Use Styles in the Site Editor when you want to choose color palettes, fonts, layouts, and more design aspects that affect your site as a whole. Learn how to use Styles:

An arrow is pointing to the Styles button.
The Styles button

↑ Table of Contents ↑

Additional Guides

Here are more helpful resources and tutorials to learn more about all aspects of site editing:

Not quite what you're looking for?

Get Help