Transcript
Learning outcomes
We are going to try and answer the question, what is the difference between the block editor and the Site Editor? We will compare the block editor and the Site Editor as well as explore the Site Editor tools. 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.
Block editor versus Site Editor
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 block editor that we are used to? How can we use templates in the Site Editor to create our overall structure?
Let’s take a trip through our dashboard to answer these burning questions and compare the two. The block editor is the foundation of your site’s content and is used to add content to pages and posts. Let’s refresh ourselves on how to add page and post content. In your dashboard, head to pages if you are creating a static page or go to posts for dynamic content, such as a blog post. When you click Add New, you create content for that page or post.
What does the Site Editor allow us to do exactly compared to this? The Site Editor allows us to edit our site cohesively. Pages and posts are only used to add static or dynamic content using blocks. On the other hand, the Site Editor uses blocks to create your site’s overall look and feel using templates. But it also allows us to add and edit pages to ensure a seamless site editing experience. If you’ve installed the block theme like Twenty Twenty-Four, access the Site Editor via Appearance and then click on Editor.
The Site Editor loads your site’s front page for editing. On the left, there’s the site view sidebar. This tool lets you toggle between the key parts of your site, navigation, styles, pages, templates, and patterns.
Navigation
Let’s start with navigation. Here, you can quickly see and tweak all your menus. You can rename them, rearrange menu items, etc.
Styles
When you click on Styles, you have the ability to change the style combination of your theme. When you click on Edit Styles, you can change your entire site’s typography, colors, and layout. If you look down further below, you also have the option to customize the appearance of specific blocks for your whole site. To see how these blocks will change if you edit them, go to your site’s Style Book. As mentioned, you can preview any changes made here.
Pages
Below pages, you can create and edit pages, the same as when you are in the dashboard. This feature allows you to stay in the Site Editor when editing your site or content on a page. When working inside a page in the Site Editor, we add content to the Content block.
Patterns
Next, we’ll make our way to patterns. Below patterns, we have access to a library of patterns. We will be able to create and manage our own patterns. We can view the patterns provided by our theme. Then, we can also create and manage template parts. 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 header and footer.
Templates
But now, let’s focus on templates. When we open templates, let’s take a look at the top menu and run through what these elements allow you to do. The plus icon or Inserter on the top left allows you to add any block or a pattern of blocks to any template you are working on. Next to your Inserter, you have the undo and redo buttons. Next is the list view. This is a super useful tool that allows you to see a list of all 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 at the top is the name of the template.
When you click on the preview button, you will be able to see what your site will look like with the changes applied on desktop, tablet, or mobile. Then, if you click on Save, you can save changes. Next, the settings tab lets you display or hide the template and block settings sidebar. For example, you can use the settings sidebar to style the block further when you select a block. Next to the settings tab, you’ve got the styles tab, another place to access your style settings. And finally, if you click on the three vertical dots, you’ll get access to more options, such as selecting the spotlight mode, etc. Now we’ve had a brief rundown of the menu options. Let’s take a closer look at templates.
At the top, it says “Express the layout of your site with templates”. Templates use blocks to create your site’s overall design by adding a header, footer, or even sidebar. We can see all three at play when we open the page of the sidebar template. We can see the structure being provided by the header, the sidebar, and the footer. Please note that templates can be applied to a single or multiple pages. With that in mind, let’s say we want to add the template that’s applied to our pages, for example. There are a few options provided by our theme here, for example, the default page template or the page with a wide image. But let’s choose the page with no title.
When the template loads, you’ll see an example of what this template looks like without any content. Here is where the list view comes in really handy. 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, as is the footer, is clearly marked when you click on it. In the middle, you’ll see a Group block containing a Post Content block. This is super important. The 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. So remember, we don’t add content to templates. We only modify our header and footer or sidebar.
Let’s go ahead and replace this header with a different header pattern that comes with our theme. We can scroll through the available options. Then I will go ahead and select the centered header with logo pattern. I will also select one of my existing navigation menus named Lifestyle. Once selected, we can go ahead and save. Awesome, the page template is saved. But how do we add this template to a page? We can navigate back to our main dashboard and go to pages. Then, click on the page to which you’d like to apply this template. 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 select Page with no title. And then we can update. Here’s what the page looks like with the default page template. Here it is with the page with no title template applied. You can repeat this for as many pages as you like; the same applies to your posts.
Conclusion
As you have seen, the block editor and the Site Editor work hand in hand. The block editor only allows us to add content to pages and posts. However, the Site Editor gives you the ability to edit your site cohesively. You can edit the look and feel, modify templates, and add content to pages.