Topics
The Site Editor allows you to design the entire site including the header, footer, and everything in between, with blocks. It gives you greater control over how your site looks.
The Site Editor is only available when you install and activate a Block theme on your site.
How to access the Site Editor
To work with the Site Editor, you need to use a block theme on your site. A block theme is a theme that uses blocks for all parts of a site, including navigation menus, header, content, and site footer. All blocks that are available in the WordPress Block Editor can be used in the Site Editor. A set of blocks called Theme blocks are specifically built for the Site Editor.
You can find block themes in the WordPress theme directory by selecting Full Site Editing in the feature filter:
Once you install and activate a Block theme on your site, go to Appearance > Editor (beta) to open the Site Editor.
The Site Editor workspace
The Site Editor loads the home page of your site (based on what you have set in the Reading Settings) for you to start editing.
The top menu in the Site Editor includes the following options:
- The site icon (or the W icon, if no site icon is set for the site): Return to the dashboard or switch to editing templates or template parts. If you choose to return to the dashboard, it will prompt you to save the changes or leave the Site Editor without saving the changes.
- The + Block inserter button: Add a new block, block pattern, or reusable block (if the site has reusable blocks) to the Site Editor.
- Tools: Switch between editing a block and selecting a block. Choose the Select tool (or press the Escape key on your keyboard) to select individual blocks. Once a block is selected, press the Enter key on your keyboard to return to editing.
- Undo: Undo the most recent action taken.
- Redo: Redo an action you reversed using the Undo button.
- List View: See a list of all of the blocks that are on the page and easily navigate between the blocks on your page. This is useful for seeing the page’s structure and editing, moving and removing blocks.
- Templates: The name of the template you are editing.
- Click the down arrow, next to the name of the template to open a drop-down menu.
- Under Areas, you can find all the template parts in the current template.
- Click the three-dot icon next to the template part and click ‘Edit’ to edit that selected template part.
- You can click ‘Browse all templates’ to view all of your site’s templates.
- You can click ‘Clear customizations’ to restore the template to the default state (you will lose all the changes you made to that template).
- Preview: See what your site looks like with the changes applied.
- Save: Save the changes you made in the Site Editor.
- When you click the Save button, you will get a list of all the templates and template parts where you have made changes.
- 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.
- Settings: Show or hide the Template and Block Settings sidebar menu.
- Styles: Browse style variations available for the theme you have, set the typography, color palettes, and layout for the entire site, or customize the appearance of specific blocks for the whole site.
- Click the three-dot menu icon in the right corner in the Styles panel to Reset to defaults or Watch the Welcome Guide.
- More Options: Click the three-dot menu to open additional settings and tools.
View: Display or hide the top toolbar in the editor. When you enable this option, block toolbars are pinned to the top of the WordPress block editor (right under the top toolbar) instead of appearing directly above the block.
With spotlight mode, all blocks are greyed out except for the one you’re working on so that you can focus on a single block at a time.
Editor: By default, you will be in the Visual editor. Switch to the Code editor to view the entire page in HTML code editor.
Plugins: Here, you can switch between the Settings and Styles in the Site Editor Sidebar panel.
Tools: Here, you can download your theme with the updated templates and styles, learn keyboard shortcuts, visit the Site Editor welcome guide, copy all content on the post/page, or view additional support articles.
Preferences: Use the Preferences menu to customize the editing experience and hange how you interact with blocks.
How to use the Site Editor
To edit the site’s styles
You can use the Site Editor to customize the styles for the entire website and for the blocks. Styles settings are available regardless of what template or template part you are editing.
- Go to Appearance > Editor (beta).
- Click the Styles icon next to the block settings sidebar.
In the Styles section, you can change the color palettes and typography, and layout. These changes are applicable across the entire site.
You can also change the appearance of blocks which are also applicable across the whole site.
You can browse the style variations available for the theme you have.
To reset the changes you made, click the three-dot menu icon in the right corner and select Reset to defaults.
Learn more about Styles in this support article: Styles overview.
To customize the site’s layout
You can use the Site Editor to build the structure and layout of your entire site, using blocks. Eg: areas like headers, footers, and the structural appearance of your site’s posts and pages.
All blocks that are available in the WordPress Block Editor can be used in the Site Editor. A set of blocks called Theme blocks are specifically built for the Site Editor.
Examples: the Query Loop Block allows you to customize the look and feel of your post layout, the Navigation Block lets you customize the site’s navigation menu, the Site Title Block helps to customize the Site Title, and more.
Check out the full list of Theme blocks.
To browse the templates and template parts
From the Site Editor, you can easily browse the templates and templates parts available for your site.
- Go to Appearance > Editor (beta) to open the Site Editor.
- Click on the WordPress icon (or Site icon if you have set one) to open the Site Editor left navigation.
- Click on ‘Templates’ to view the list of templates available for your site.
- Click on ‘Template Parts’ to view the list of template parts.
To manage the site’s templates
WordPress uses templates to create the layout and structure for specific page types on your site. For example:
- The Home template is used to display the site’s home page if your site is set up to display the latest posts on the home page.
- The Index template is used to display the index page of all the blog posts.
- The Page template is used to display the site’s pages if no specific templates are assigned to the page.
- Many block themes offer other built-in templates like the Single Post template to customize the layout of single blog posts, the 404 template to customize the layout of the 404 error page, the Search template to customize the layout of the search results page, and the Archive template for categories/archives page, etc.
Block themes come with a set of templates that you can edit directly in the Site Editor. You can edit these templates and create custom layouts, using blocks.
The Site Editor displays the limited number of template choices that you can add to your site. Custom templates cannot be created from the Site Editor. For this, you have to use the Template Editor via the WordPress Block Editor.
When you make changes to a template, the editor updates the blocks on all pages/posts that use the template. These changes take precedence over your theme’s bundled template files.
From the Appearance > Editor (beta), click the WordPress icon (or Site icon if you have set one) to open the Site Editor left navigation.
Click ‘Templates’ to view the list of templates available including those that came bundled with your block theme and the custom ones you created from the Template Editor via the WordPress Block Editor.
- Click ‘Add New’ button in the top right corner to show a drop-down menu with a list of all new templates you can create for your site. Select one from the list. This will take you to the Template Editor where you can customize the selected template.
- Front Page – to display the home page of your site if your site is set up to display a regular page for the home page.
- Author – to display all the posts written by a single author.
- Category – to display the posts in a category.
- Date – to display the posts on the specific date.
- Tag – to display posts based on a tag.
- Taxonomy – to display posts from a specific taxonomy term.
- Click on any of the templates in the list to edit the template in the Template Editor. From here you can customize the layout of the selected template.
- When changes are made to templates that came bundled with your block theme, you will see the option to clear customizations.
- Click the three-dot menu icon to open a drop-down menu and select ‘Clear customizations’. This will reset the template to the default state and you will lose the changes you made to that template.
- This option is only available for the templates that you have already customized.
- For the custom templates that you created via the WordPress Block Editor., you will see options to rename and delete the template.
- Click the three-dot menu icon to open a drop-down menu and select ‘Rename’ or ‘Delete’. The custom template is updated accordingly.
- This option is only available for the custom templates that you created.
Learn more about Templates in this support article: Template Editor.
To manage the template parts
A Template part is a block for managing the repeating global areas of the site such as a Header, Footer, Sidebar, etc. They are primarily meant to define the site structure and can be reused. You can also create custom Template Parts that can be reused through the templates.
When you change the blocks inside a Template Part, these changes are applied to every Template that uses that Template Part. These changes take precedence over your theme’s bundled template files.
From the Appearance > Editor (beta), click the WordPress icon (or Site icon if you have set one) to open the Site Editor left navigation. Click ‘Template Parts’ to view the list of template parts created for your theme.
- Click on any of the template parts in the list to open the Template Editor. From here you can customize the layout of the selected template part.
- Click the three-dot menu icon to open a drop-down menu and select ‘Clear customizations’. This will reset the template part to the default state and you will lose the changes you made to that template part.
- This option is only available for the template parts that you have already customized.
- Click ‘Add New’ button in the top right corner to create a new Template Part.
- In the dialog box, give a name for the Template Part.
- Pick the Area this template part will be used on – General, Header, Footer.
- Click ‘Create’ to open the Template Editor where you can customize the Template Part using blocks.
Learn more about Template Parts in this support article: Template Part.
How to return to the Dashboard
To go back to your dashboard, click the WordPress icon (or Site icon if you have set one) to open the Site Editor left navigation. Select the “Dashboard” option. This will take you back to your WordPress dashboard. You will be prompted to save the changes you have made in the Site Editor before leaving.
How to export templates and styles
You can export your theme with the changes you made in the Site Editor including the templates, template parts and style settings, similar to the Tools > Export option.
- Open the Site Editor by going to Appearance > Editor (beta).
- Select the three-dot menu icon next to your Styles settings option.
- Under Tools, select Export. This will begin the export process and you will receive a downloaded zip file of your thee with the templates and template parts included.
Useful tools when using the Site Editor
The following tools are helpful when using the Site Editor.
List View
List View helps you navigate complex block layouts and nested block structures. You can select exactly which block you need, and get a quick overview of the block layout on the page you are working on. You can easily select multiple blocks and edit, move or group them.
Learn more about List View in this support article: List View.
Block Patterns
Block Patterns are a collection of predefined blocks that you can insert into posts and pages. You can then customize them further. WordPress comes with a set of standard Block Patterns. You can also find Block Patterns bundled with the block themes.
Learn more about Block Patterns in this support article: Block Pattern..
Resource Links
- Additional guide to using Site Editor
- Simple Site Design with Full Site Editing
- Intro into the Site Editor and Template Editor
Changelog:
- Updated 2022-05-17
- Reworking the content & updating videos/screenshots for 6.0
- Created 2022-01-05
Was this article helpful? How could it be improved?
You must be logged in to submit feedback.