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.
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?
To answer these burning questions, let's take a trip through our dashboard 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 on "Add New", you will create content for that specific page or post.
Compared to this, what does the Site Editor allow us to do exactly?
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 the overall look and feel of your site 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.
Let's start with navigation.
Here you can quickly see and tweak all your menus.
You can rename them, rearrange menu items etc.
When you click on Styles, you have the ability to change the style combination of your theme.
And 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, here you can preview any changes made.
Below pages, you also have the option to 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.
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.
And 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.
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 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 the redo button.
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, as well as 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.
And 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.
So, when you select a block for example, you can use the settings sidebar to style the block further.
Next to the settings tab, you've got the styles tab, which is another place where you can access your style settings.
And finally, if you click on the three vertical dots, you've got 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 in order to create the overall design of your site 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 also note, templates can be applied to a single page 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 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 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 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?
For that, we can navigate back to our main dashboard and go to 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 select page with no title. And then we can update.
Here's how the page looks like with the default page template.
And here it is with the page with no title template applied.
You can repeat this for as many pages as you like and the same applies to your posts.
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.
But the Site Editor gives you the ability to edit your site cohesively.
You can edit the look and feel, modify templates as well as add content to pages.