Intro to the Site Editor

This video tutorial provides an overview of accessing and using the Site Editor. You can create and launch your entire site within the Site Editor. Learn about all the tools you need to master Site Editing.

Learning outcomes

1. Navigating and using the Site Editor.
2. Styling your site globally and using the Style Book
3. Creating and managing pages via the Site Editor
4. Customizing and adding templates
5. Assigning templates
6. Exploring and utilizing patterns
7. Using the Command Palette

Comprehension questions

1. Have you installed a block theme?
2. Why don’t you need access to the Customizer anymore?
3. What is the difference between a template and a page?

Resources

How to use the WordPress Stylebook with your block theme

Site Editor

Template Editor

Transcript

Introduction

Hi there and welcome to Learn WordPress. In this session, we are taking a closer look at the Site Editor. If you use a block theme and go to Appearance, you will notice the Customizer is nowhere to be found. But don’t fret; you can now do everything in the Site Editor. Create headers, footers and design your entire site. When you click on Editor, you’ll step right into the Site Editor, a powerful tool to seamlessly build and launch your entire website. On the left, there’s the Site View Sidebar. This nifty tool lets you dive into the key parts of your site: Navigation, Styles, Pages, Templates and Patterns. The objective of this tutorial is to gain a deep understanding of these elements.

Navigation

Let’s start at the top with Navigation. Here you can quickly see and tweak all your menus. It’s your command center for menu management. You can make simple edits directly, like reordering or deleting menu items. You can also rename, duplicate, and delete your menus as required. If opened in the editing mode, you can make certain changes without any distractions, and updates will sync across your site. You will notice that the Navigation block is locked in this area. If you would like to style your navigation menu, you will need to open a template or the template part it is part of.

Styles

Global Styles

Next, let’s talk about Styles. When you select Styles, you will be able to browse through a variety of different style combinations that come with your theme. When you click on Edit Styles, you can also browse your styles from here and then change your entire site’s typography, colors, and layout. Let’s see how it works. When you click on Typography, you can manage the typography settings for text, links, headings, captions, and buttons. You can also change the colors for these elements. When you make your way to Layout, you will notice you even have control of elements such as padding and block spacing. If you look down further below, you also have the option to customize the appearance of specific blocks for your whole site.

Style Book

To see how these blocks will change if you edit them, go to your site’s Style Book. You will notice there’s a little eye at the top. If we return to the Site View Sidebar, you will notice you can also access it from here. Select the Style Book. The Style Book allows a user to preview every block that can be inserted into your site. It gives you or provides you an at-a-glance preview of how global styles will affect the display of any block without the user having to insert those blocks into a template. It is important to note a block’s styling can be adjusted right within the Style Book. So let’s update the Buttons block for example. Let’s change the background color, tweak the radius and update the letter case. If you like what you see, you can go ahead and click Save. Please also note that if you make a change to an individual block in your Style Book, it takes precedence over the global styles that you’ve set.

Styles Revisions

While we are here, we also need to talk about Styles Revisions. The Styles Revisions feature adds a visual way to browse changes to your Styles over time. You can easily revert to a previous state if you find a style you prefer or want to revert back to a previous version. You merely have to select the version and then click on Apply. Lastly, it is also worth mentioning when you click on the three vertical dots next to the styles revisions icon, you can add additional CSS if you please, too.

Pages

Below Styles, we can go to Pages and here we can create and publish pages. To add a new page, click on the plus icon, next to Pages and create a draft. Next, let’s open up one of our existing pages, my About page. When you open a page, it is important to remember to add content to the Post Content block. Put another way, the Post Content block is the house or the container for all your content. The second thing to remember is that you can’t customize your header and footer when editing a page. That’s all part of managing templates. If you click on the header, you’ll get a message that says ‘Edit your template to edit this block.’ If you would like to modify the template that this page has been assigned to, click on Edit template on the bottom right of your sidebar settings. This will take you to your page template in this example. Here you can modify your header and your footer. You will not be able to add content to a template. Content gets added to posts and pages.

Templates

That brings us to our next topic, namely templates. Templates provide the structure for how your content is displayed. When you select templates, you will notice there’s a range of templates that come with your theme, built-in templates. For example, the page template that displays a single page, the index template that displays posts or the single post template that displays the layout of single posts. To modify a template, click on the template on the right or if you select the template, you can click on Edit at the top right of your template list view. When you click on the plus icon next to templates, you will be able to add a variety of new templates, even a custom template that can be applied to any post or page. Let’s open the page template to gain a better understanding of how a template works.

A template provides structure. A template usually includes a header template part and a footer template part. As mentioned, we add content to a page or post and only use templates to modify the layout or design of the page, namely the header, footer, and even sidebar. You can even create a template with no header or footer if you wish to. The Site Editor, therefore, makes a clear distinction between editing the template and a page. You can modify your header and footer within the template. One of the options you also have is to click on the three vertical dots and select Replace header. Then, you will be able to replace your current header with one of your existing header template parts or header patterns that come with your theme. Another option you have is to select your header and then click on Edit. This will allow you to modify your header or footer within Template Editing Mode without any other distractions.

Since we have looked at the page template, let’s visit a page assigned to this template to see what it looks like from the front end. If we look at the About page, we can see the content that was added to the page, as well as the footer and the header. If you would like to assign a different template to this page, you can make your way to the Dashboard, select the relevant page, in this case, the About page, and in the settings sidebar we will notice that this page has been assigned to the page template. When you click on the name, you will see a drop-down, and here, you can assign a different template to this page. I have created a custom template with a unique header and footer that I want to assign to this page. So once I’ve done that, I can click update and preview on the front end. Now we can see that this About page has a new design and layout.

Patterns

My Patterns

Finally, let’s talk about patterns. Below templates, we have access to a library of patterns. Below My patterns, we are able to create and manage our own custom synced and non-synced patterns. Below that, we can view the patterns provided by our theme and then we can also create and manage our header, footer, and general template parts. Template parts are essentially patterns as they are synced reusable components that can be used across your site. Let’s start with My patterns. To create your own custom pattern, click on the Inserter next to Patterns and then select Create Pattern. After naming it, you can select to sync the pattern. As it says below, editing the original pattern will also update anywhere it is used. You can also toggle this off if you prefer to have a non-synced pattern. Non-synced patterns are just regular patterns that can be edited independently. When you return to your custom pattern area, you will notice that synced patterns have a purple icon and non-synced patterns don’t.

Patterns that come with your theme

Next, you will notice that the patterns that come with your theme are locked and you are therefore not able to edit them. But, when you click on the three horizontal dots below a pattern, you will be able to copy it to your My Patterns area.

Template Part Patterns

At the bottom, we can also create and manage our header, footer, and general template parts. You have two options here. You can create custom headers and footers or customize template part patterns that come with your theme. To create your own template part, click on the plus icon at the top next to patterns and select Create a template part. When you add a new template part, you have an option between General, Header and Footer template parts. General template parts are not tied to any particular area, and remember to give them a descriptive name. When you open up a template part from here, you will be able to modify and edit your template part in template editing mode without any distractions. Or you can open up the relevant template and in this case, my custom template, and then you can modify your header or footer template part from within the template and as shown earlier on you can easily replace one of your headers or footers with a pattern or an existing template part from the library.

Command Palette

To end off, I also want to highlight an extremely helpful feature called the Command Palette that will save you loads of time and help you move around your Site Editor more effectively. The Command Palette allows you to swiftly complete tasks and navigate within the Site Editor. You can, for example, type in “new” to create a page or template or just the name of the area where you want to go, for example, “pattern” to manage all my patterns. You can access the Command Palette by using the shortcut “Command K” on Mac or “Control K” on Windows. You will also find it in the Site View Sidebar by clicking on the search icon. Or you can merely click on the title bar.

Conclusion

That is our brief overview of what you are able to achieve using the Site Editor. Visit Learn WordPress for more tutorials and training material.