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.
Table of contents
Accessing the Site Editor
You can open the Site Editor from the WordPress Admin area under Appearance > Editor:
Or, from the Edit site link in the top bar on the front of the website:
Navigation sidebar
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.
Navigation
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.
Clicking on a link to a post or page will open the page preview and allow you to edit that page:
Styles
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.
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:
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.
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:
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.
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.
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:
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:
In the next panel, select or search for the block type you want to edit:
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:
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”:
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.
