Site Editor

The Site Editor is a new feature that allows block editor users to build their entire site with blocks, including using a few new theme blocks, and customize it using a new styling system. It is only available to content creators who are using a Block theme. When you are using the Site Editor, most changes here are made across your entire site.

How to access this feature

You will need to use a Block theme in order to have access to this feature. After activating a Block theme on your site, you will see the options under your Appearance menu change to show the option “Editor (beta)”. By selecting this option, you are opening the Site Editor system:

Top ↑

How to use the site editor

How to edit Styles

When using the Site Editor, you will find Style settings for your website and blocks
in the Administration Screen > Appearance > Editor (beta). From there, you’ll see the Styles icon available next to the block settings sidebar. Styles will be available to use regardless of what template or template part you are editing. 

In the Styles section, you can change site-wide settings for colors and typography. You can also change the site-wide appearance of blocks.

For more information about using Styles, please see the support article Styles Overview.

How to customize your content

With the Site Editor, you’ll be able to use all of the blocks you are used to having access to along with a brand new set of blocks called Theme blocks. These blocks allow you to do everything from create menus with the Navigation Block to display and edit your Site Title and more. You can see a full list of Theme blocks here.

How to browse between templates and template parts

After going to Appearance > Editor (beta), you will be taken to the template your homepage uses with the option to switch between different templates and template parts. In order to switch what you’re viewing, simply click on the WordPress icon. You will then be able to select between going back to your Dashboard, your list of templates, your list of template parts, or back to editing what your home page displays.

How to manage Templates

Templates are groups of blocks combined to create a design for a webpage. You can create custom templates or use templates provided by the theme or a plugin. When you make changes to a template, the editor updates the blocks on all pages/posts that use the template. A template for a post or page displays your content with the post content block.

For more information about Templates, please see the support article Template Editor.

How to manage Template parts

A Template part is a block for managing different areas of your webpage that help set structure for reusable items like a Footer or Header. They are primarily meant to be used for site structure.

For more information about Template parts, please see the support article Template Part.

How to return to your dashboard

To go back to your dashboard, simply click the WordPress icon to open the Site Editor navigation and select the “Dashboard” option. This will take you back to your wp-admin dashboard.

Top ↑

How to update what your homepage displays

Your homepage can show a list of your latest blog posts or a static page with custom content. Which setting you use depends on the templates that are included in your theme. To view the list of templates, go to the Administration Screen > Appearance > Editor (beta) > Templates.

• If your theme does not have a Home or Front page template, select the Add New button and create a new Front Page.
• If your theme has a Front Page template, click on the link with the template name to open the editor.
• If your theme has a Home template, you can edit the template or set what you want to appear in the Administration Screen > Settings > Reading.

To learn how to select a static page for your homepage, please see the support article Creating a Static Front Page.

Top ↑

How to customize your homepage

Latest Blog Posts

To customize your blog, go to Administration Screen > Appearance > Editor (beta). The editor will open to your homepage, and you can start editing.

Block themes display lists of blog posts with the Query Loop block and the Post Template block.
The support article for the Query Loop Block explains how to configure the block.

When you add a block inside the post template block, it is repeated for every post in the list. The Post Title and Post Featured Image, Post Author, Post Date, Post Category, and Post tags are examples of blocks that you can use to customize your blog.

Static page

If you have selected a static page for your home page, and you want it to have a different design than other pages, you need to assign it a different template.

Follow these steps to assign an existing template:

1. From your wp-admin dashboard, head to Pages > All Pages.
2. From the list of pages, select the option to edit page you have set as your home page.
3. Once in the editor, open the settings sidebar.
4. Under “Template”, you can then select whatever Template you want your home page to use.
5. When you’re done, select “Update” to save the changes.

Follow these steps to create a new template:

1. From your wp-admin dashboard, head to Pages > All Pages.
2. From the list of pages, select the option to edit page you have set as your home page.
3. Once in the editor, open the settings sidebar.
4. Under “Template”, select New.
5. This will
6. When you’re done, select “Update” to save the changes.

Please note that if you add a Front Page template in the Site Editor, it will always be used as the front page regardless of what setting you choose under Admin > Settings > Reading. You will need to either customize that template to your liking or remove it to then adjust the homepage settings again.

Top ↑

How to update your site icon

Block themes include the ability to use the Site Logo block which has built within it an option to set your Site Logo as your Site Icon. For context, the Site Logo simply displays whatever logo you set for your site whereas your Site Icon is also known as a favicon and it is used to help identify your website. To learn more about setting your Site Icon or favicon, please see the support article Creating a Favicon.

Follow the steps below to use the same image for the Site Logo and Site Icon:

1. Head to Appearance > Editor (beta). This will open up your homepage.
2. Either find your Site Logo block added by your theme or add it to yourself wherever you’d like. Detailed instructions for adding blocks can be found here.
3. From there, you’ll see the option to upload or select an image to use from your Media Library.
4. After choosing an image and while still selecting the Site Logo block, open the block settings sidebar (uses the cog icon).
5. Under the settings for the Site Logo block, toggle on the option to “Use as site icon”.
6. Save your changes.

Top ↑

Tools

The following are tools that might be helpful to explore when using the Site Editor.

Using List View

List View helps you navigate between layers of content and nested blocks.  Think of it as the ultimate tool to navigate block complexity, select exactly what you need, and easily view all of the blocks that make up your content at once. It’s a very helpful tool when you’re trying to edit your entire site.

For more information about List View, please see the support article List View.

Using block patterns

Block Patterns are a collection of predefined blocks that you can insert into posts and pages and then customize with your own content. While there are standard patterns you can use with any WordPress installation, they are also often bundled into block themes.

For more information about block patterns, please see the support article Block Pattern.

Exporting templates and template parts

Similar to the Tools > Export option, there is an option to export what you create from within the Site Editor. This will only export your templates and template parts for now.

Follow these steps to export your templates and template parts:

1. Open the Site Editor by going to Appearance > Editor (beta).
2. Select the three dot menu next to your Styles and Block settings options.
3. Under Tools, select Export.
4. The export will then begin and you will receive a downloaded zip file of your templates and template parts.

Top ↑

Resource Links

• Learn WordPress course on Simple Site Design with Full Site Editing