Understanding the Page Editor vs. Site Editor

Full Site Editing is a new experience that allows you the freedom to build every aspect of your WordPress site, from the header all the way down to the footer, using the power of blocks within the Site Editor feature. But what is the Site Editor? How does it differ from the page and post editor we’re used to? This workshop will explore the main differences between the page editor and the Site Editor.

Learning outcomes

1. Explaining the difference between the page/post editor and the Site Editor.
2. Creating and editing templates within the Site Editor.
3. Assigning a template to a page or post.

Comprehension questions

1. How can we use templates in the Site Editor to create our overall site structure?
2. Will you use the Site Editor to create content for your website?

Transcript

Hi there, and welcome to Learn WordPress. In this session, we’ll explore the tools that come along as part of the Full Site Editing experience. We’ll also compare the capabilities of the Site Editor to the existing page and post editor. And by the end, we’ll feel confident in using both things together to create our entire site layout. Without further ado, let’s begin.

Full Site Editing allows you the freedom to build every aspect of your WordPress site, from the header all the way down to the footer using the power of blocks within the site editor feature. But what is the Site Editor? How does it differ from the page and post editor we’re used to? How can we use templates in the Site Editor to create our overall site structure? To answer those burning questions, let’s take a trip through our dashboard and compare the two.

The page and post editor are the foundation of your site content. Let’s first refresh ourselves on how to add page and post content. In your dashboard, head to Pages if you’re creating a static page, or Posts for your blog posts. From here, by clicking on Add New, you’ll begin creating your content for that individual page or post. It doesn’t repeat anywhere else and belongs only to that page or post. Compared to this, what does the Site Editor allow us to do exactly? Where pages and posts are used to create actual content just for that page using blocks, the Site Editor also uses blocks to create the overall look and feel of your site using templates.

If you’ve installed a block theme on your site, like Twenty Twenty-two for example, you can access the Site Editor by visiting Appearance, and then Editor in your dashboard. The Site Editor will then load the front page of your site for you to start editing. From here, you can click on the WordPress icon in the top left-hand corner to open the List View on the left and switch between your homepage, templates and template parts that make up the structure of your site. A quick note on template parts. These are reusable groups of blocks that you can use to create repeated parts of your template, like the navigation menu, for instance, but we’ll focus on the template editor for this session.

Before diving into templates, let’s take a look at the top menu of the Site Editor now and run through what these elements allow you to do. The site icon allows you to switch between templates and template parts as we previously mentioned. The plus icon block inserter button allows you to add a new block to whichever template you’re working on currently. With the pencil icon you can choose between editing your current block and selecting a new block. Choose the select tool to select individual blocks. Once the block is selected, press the Enter key on your keyboard to return to editing. Undo will reverse the most recent action taken while redo restores an action you reversed using the undo button.

Next is List View. This is a super useful tool that allows you to see a list of all of the blocks that are on your page. This is great for seeing your page’s structure and editing, moving and removing blocks. In the middle is the name of the template you’re editing. Click this and then click Browse All templates to view all of your site’s templates. Preview allows you to see what your site looks like with the changes applied and Save allows you to save your changes. Coming towards the end here, Settings lets you display or hide the template and block setting sidebar menu like this. Styles, this is where you can edit the style of your entire site, including the fonts or typography, overall colour scheme, and even the appearance of individual blocks if you’d like, and finally, more options. This opens additional settings and tools like exporting your template blocks.

Now we’ve had a brief rundown of the menu options. Let’s take a look at templates. As we covered, templates also use blocks in order to create the overall design of your site. Templates can be applied to a single page or multiple pages in order to create the structure or layout of that page, including the header and footer. With that in mind, let’s say we want to add the template that’s applied to our pages. In the Site Editor, click on the site icon, and then templates. There are a few options here. But let’s choose the page with a Large header. When the template loads, you’ll see an example of what this template looks like without any content. Here’s where the List View comes in really handy. Go ahead and click it, and the sidebar on the left will show you how the blocks that make up this template are structured. Here, you can see the components that make up this page template. The header is clearly marked when you click on it, as is the footer.

In the middle, you’ll see a Group block that contains a Post Content block within it. This is super important. The Post Content block is what allows the content of your page or post to appear in this template. Think of this block as the container for whatever you wrote in your pages or posts section. Without a container, your page content won’t have anywhere to be displayed. Let’s say you’d like to add a navigation menu to the top of your site and a site logo to the bottom. In the List View, click on the parent block. Here that’s called Header dark large. Once it’s selected, you can add a block to your header by clicking the plus icon at the top or in your template preview. Search for your navigation block, select it and choose a menu for it to display. You’ll see that the navigation block has also been added to the List View, we can repeat this process for the footer. Click the parent footer group in the List View and add a new block. This time, we’re choosing the Logo block. Once you’ve added the blocks you’d like to your header and your footer sections, you can preview how it will look on a live page or save those changes when you’re ready. Note that there’s a mention of header and footer template parts here. Make sure those are both checked since we’ve edited them both, and click Save again.

Amazing, the page template is saved, but how do we add this template to our pages? For that, we can navigate back to our main dashboard, click on Dashboard and then Pages. Then click on the page you’d like to apply this template to. In your sidebar to the right, you’ll see a template header. Go ahead and click on that. This drop-down menu lists all of the templates you currently have saved. In this case, let’s choose the page template with a large header that we were just editing and then update in the top right-hand corner. Here’s how the page looks with the default template, and here it is with the page template applied. You can repeat this for as many pages as you like, and the same applies to your posts too.

So how can we best sum up the purpose of the Site Editor when we compare it to our page and post editors? When you want to edit your site’s overall structure, headers, footers, and the structural appearance of your pages and posts, use the Site Editor. When you want to edit the content of your pages, text, images, embeds, and more, you can edit those pages individually by going to your dashboard and selecting pages. When you want to edit the content of your blog posts, texts, images, embeds and more, edit those posts individually by going to your posts section. So remember, the Site Editor is your structure, and the page and post editor is your content. You now have the power to use the Site Editor tools to help build your entire site. Have fun, and you can explore learn.wordpress.org for more courses, social learning spaces and workshops.