Introduction to the Site Editor

I wrote this introduction to the Site Editor using WordPress version 6.2 and Gutenberg version 15.7.0. If you are using different versions, there may be differences both in the interface and the functionality.

Level: ,

Estimated reading time: 10 minutes

Last updated

Accessing the Site Editor

You can open the Site Editor from the WordPress Admin area under Appearance > Editor:

The link to the editor under the Appearance menu in the WordPress admin area.

Or, from the Edit site link in the top bar on the front of the website:

The link to the editor in the WordPress admin bar is between the site title and the comments.

When you open the Site Editor, you will see a preview of your website. The menu on the left side is called the Navigation sidebar. From this menu, you can preview your content, select a style variation, and manage your templates and template parts.

The menu items will vary from site to site. The Navigation menu is available if your site has a menu, and the Site Editor may hide the Styles menu if there are no style variations or custom styles.

The Site Editor with the dark grey Navigation sidebar and a preview of the website, using the active theme.

The Navigation menu shows the blocks in your most recent menu. This can include the Site logo block, page lists, links to posts, and external links.

You can update the menu and move or remove items by selecting the Options menu (three dots). You can also select and drag blocks to move them.

Each menu item has an option that opens a modal. The options vary depending on the block type. Options include moving up and down and removing the block from the menu,

Clicking on a link to a post or page will open the page preview and allow you to edit that page:


Under the Styles menu, you can select between the theme’s style variations.
To save your style variation choice, select the Save button at the bottom of the sidebar.
By selecting Edit (the Pen icon), you open the Site Editor with the Styles sidebar opened:

Templates and template parts

The template and template part interfaces work similarly, so I will only show the templates in this lesson. When you open the templates sidebar, you will find a list of existing templates.

  • The arrow icon will take you back to the previous sidebar menu.
  • You can use the plus icon to add new templates.
  • And the link “Manage all templates” at the bottom of the sidebar takes you to the detailed templates screen.
The templates sidebar has a list of template names. Selecting the template changes the preview and opens the next template specific sidebar.

Selecting a template from the list opens that template in the preview. Clicking anywhere on the preview or using the Edit button (the pen icon) will open the template in the Site Editor:

The template specific sidebar shows the template name and description. It has an edit and a save button.

Manage all templates

The detailed templates screen shows a table with information about the templates. In the “Added by” column, you can learn if the template was added by the theme or a user. You can also see if the template has been customized.
In the screenshot below, the 404 template was added by the theme and has been customized, while the Author: admin template was added by a user.

You can use the options menu behind the three dots to clear your customizations, like resetting templates to the default.

The detailed templates screen with the navigation sidebar on the left, and a table with information about the templates on the right.

You can only delete templates that are added by users. Custom page templates, which are templates that you can assign to a post or page, can be both deleted and renamed:

The option to rename a custom template opens in a modal with the heading "Rename", a text input field, followed by a cancel button and a save button.

Creating new templates

Users can create templates by selecting the “Add New” buttons in the detailed templates screen or the sidebar. You can also create custom page templates from the block editor.

Selecting the "Add new template" button opens a modal with a list of templates that can be created.

The list of available templates depends on which templates already exist. For example, your site can only have one Front Page template and one 404 template but infinite custom page and post templates. If you have plugins that add custom post types, they may also show in this list.

If you want to create a template that can be used by multiple posts, select the custom template option, not the single post option.

Site Editor features

Now it is time to enter the Site Editor. Click anywhere in the preview to open the editor.
The Site Editor has many features you may recognize from the block editor. There are several sidebars, and you can work with the sidebars closed or opened. In the screenshot, I have opened the list view and the Styles sidebar.

Starting from the top left: Clicking on the site icon or WordPress logo will open the navigation sidebar and the site preview. Next, we have the toolbar with the inserter, where you can select blocks, patterns, and media. We have the undo and redo and the list view.

Learn more about the list view in the official documentation.

At the top center of the editor, you will find the name of the current template. In this case, Home. Clicking on the template name will display the description of the template and a button that takes you to the screen where you can manage your templates.

And on the right-hand side, you have the View link and the save button, the options menu, and the block settings sidebar.

There is a second sidebar that is only available in the Site Editor: Styles. In this sidebar, you can change the default styles for the website (the body) and blocks.

A screenshot of the full Site Editor interface with the Navigation Sidebar closed. Instead, the list view and the Styles sidebar are opened, and the content can be edited.

Styles sidebar

The Styles sidebar has options nested in several levels of panels. I will start at the top of the first panel.

Browse styles (Style variations)

Under “Browse styles,” you will find the theme’s style variations. If your active theme does not have style variations, this option will not be available. The variations are the same that the Site Editor displays under Styles in the Navigation Sidebar.

In this view, the site is zoomed out so that you can see the full page without needing to scroll:

When browsing the style variations, the chosen style is temporarily applied and is previewed with the content of the current page.

Default styles for the website

Below Browse styles, there are three panels: Typography, Colors, and Layout. Options in these panels affect the whole website. For example, this is where you change the background color of the body and select a default font family and font sizes for your texts.

Default block styles

You can also select default styles for blocks. Click on “Blocks” in the bottom panel of the Styles sidebar:

The "Blocks" button is the last item in the Styles sidebar.

In the next panel, select or search for the block type you want to edit:

The blocks are listed below a short description and a search input field.
Blocks are listed with the most commonly used blocks first.

Blocks have different options available. Most text-based blocks have options for colors and typography, and many have options for spacing in the Layout panel:

The three panels of the heading block are Typography, Colors, and Layout.

Style priority

When you change site styles or block styles, you may run into a scenario where your changes are not applied to the block. This happens when the block already has an individual style. Either a style a user adds or as part of a template or block pattern.

Styles override each other:

  • First, we have the basic styles that WordPress adds.
  • Then we have the styles that the theme developer has added in the theme.json configuration file.
  • Next, we have styles from the first three panels in Styles sidebar.
  • In turn, the block styles overwrite those styles:
    • The Typography > Text is overwritten by Paragraph block > Typography.
    • Typography > Headings is overwritten by Heading block > Typography
  • All these styles are overwritten by styles on individual blocks.

So if you add a paragraph block and change that to red, then go into Styles, Blocks, Paragraph, color, and change the default to blue, that block will still be red. But the next paragraph that you add will be blue.

Resetting Styles

If you need to reset your style changes, you can select the Style actions menu at the top of the styles Sidebar and select “Reset to defaults”:

The reset to defaults option.

Custom CSS

There are two different Custom CSS fields in the Styles sidebar: One for the site and one for each block. You can open the site-wide Additional CSS field from the Style actions menu.

You access the block-specific CSS input field from the bottom of the block panel. This CSS field works differently than the site-wide CSS option because you add the CSS without a selector. WordPress automatically adds the CSS to the correct block.

Style Book

The Style Book adds examples of blocks to the editor so that you do not have to create demo content for testing your block styles. You can open it by clicking on the eye icon at the top of the Styles sidebar.

The Style Book displays blocks per category: Text, Media, Design, Widgets, and Theme.

The Style Book screen with the text category selected. The text category is showing copies of headings in different levels, and the paragraph block.