Do you know what WordPress Full Site Editing is? Or want to know how you can use it for building WordPress websites? In that case, here’s a full guide for you.
WordPress has come with a set of new features called Full Site Editing (FSE). With WordPress FSE, you can now easily edit your entire site from a single place. Yes, you heard it right! From the navigation to the footer, all of that can be done in one place.
In this article, we’re having a closer look at WordPress Full Site Editing. We’ll be discussing what it is, its features, advantages, and most importantly guide you on how to use it.
So, let’s start it immediately.
WordPress Full Site Editing (FSE) is a collection of new features in WordPress. It brings you a familiar experience along with the certain extensibility of using blocks. Now, you get to use blocks in all parts of your site and not just posts and pages.
Therefore, you’re able to control both the page/post content and global pieces of your site. In simpler terms, you can change your header and footer design while working on the page/post content. That also without leaving the screen and by using the same design tools.
Note that all the WordPress FSE features are available from the WordPress 5.9 version. It was recently released on 25th January 2022 and will continue improving with time.
Moreover, FSE is the second part of the Gutenberg project. The initial part was the Block Editor that was launched in 2018 with the WordPress 5.0 update. Here, it started the concept of using blocks to design layouts of posts and pages only.
Later, some of the FSE features became available from the WordPress 5.8 version. However, you need to use the latest version of the Gutenberg plugin if you want to use those FSE features.
But now, you just need the latest version of WordPress and use a block theme. With that, you’ll get all the features for creating and customizing the site in the Editor. As a result, even non-technical users can show their creativity in building their site.
You’ll get to know about block themes and more features in this guide. To learn more, we also recommend you to read fullsiteesiting.com.
Now, let’s first know about its features in detail in the next section.
WordPress 5.9 comes with many features and functionalities for Full Site Editing. Understanding each of them is necessary to help you with building your site.
So, let’s have a brief description of the major features of FSE.
The site editor is the new Gutenberg-based block theme editor where you can customize your entire WordPress site. Here, you get to directly edit and navigate between multiple templates, template parts, styling options, etc. In addition to that, you get to also build the menu and footer.
So, basically, it’s the place that contains all the FSE features that we’ll be discussing in this features section. Since everything can be done in this editor, the WordPress customizer is no longer required. And indeed it’s not even present now.
Furthermore, it’s a really powerful editor. It allows you to simply drag and drop the elements of the site on the front-end screen. That’s why previewing the site separately is also not necessary. Plus, you can get a preview of different device sizes at the same place.
You may already be familiar with the Gutenberg blocks. For beginners, blocks are the replacement of the WordPress classic editor. But before, you can only use blocks on the page and posts. Some basic blocks include adding images, paragraphs, videos, etc.
Now, there are new WordPress blocks for Full Site Editing. Using them, you can build an entire site. And it also includes global elements like menu, footer, sidebar, logo, and tagline.
So, with WordPress 5.9, you also get some extra and unique blocks to further customize your site. It includes:
Among all of them, here’s a short description of some of the important ones.
Using the navigation block, you can add and edit the navigation menu of your site. So, you’re able to edit the structure as well as the design of the menu.
Now, the navigation block even contains responsive menu options. Also, you get to separately edit your menu from the template editor using the template parts.
A great thing is that you can customize your navigation for the landing page first. Then, it’ll apply to all your pages and posts. After that, you get to make page-specific changes if you want.
Another interesting block in FSE is the query block. It can replicate the classic WP_Query. Moreover, you get to also further customize it to add extra functionality when necessary.
You can use the query block to display post types on a page. So, you’re able to create a separate page to display the popular posts or recent posts using this block. Or you can use it to show some related content at the end of blog posts.
Additionally, when working with the query loop, you can specify exactly what info the block must display. Such as, it can include the post’s title, excerpt, author, date, or featured image.
To conclude, the query block enables you to easily create multiple attractive and complex pages. That also without writing any code so it’s quite helpful.
For more detailed information, you can have a look at the support doc by WordPress on Query Loop block.
Block patterns are a pre-grouped set of blocks that you get to add to your posts and pages. You can find block patterns for footers, headers, pages, buttons, and more.
After you add one, you get to keep your content and then customize it the way you like. With that, you can easily create beautiful content layouts on your site.
Furthermore, there are multiple patterns in the Block Pattern Directory on WordPress.org. And they range from simple text and image combinations to the entire page layouts with multiple sections. Thus, with the use of block patterns, you can quickly create the contents on your site.
For more information, here’s the support article by WordPress on Block Patterns.
Wondering if any WordPress theme will work to use the Full Site Editing features for building a site? To clear that out, no it won’t. You need to use a theme that’s entirely designed from blocks for getting better FSE features.
Those themes that are made using the blocks are called block themes. So, a block theme is a WordPress theme with templates that are built completely with the use of blocks. This also includes the global elements.
With the release of WordPress 5.9, there are already some block themes made specifically to enjoy the FSE features. And we’ll get to know them later.
The Editor also contains a template editor with 2 parts namely templates and template parts. Here, first, we’re talking about templates. Templates are page designs and layouts from the block theme you use. And they are built using blocks.
So, you’re able to add templates to your posts/pages. Also, you can combine your existing content with the new templates. And then give your posts and pages individual designs, headers, footers, and styles.
Therefore, editing or changing the existing templates without doing any code is also possible. On top of that, you’re also able to create your own custom templates. Then save and reuse them.
On the other hand, template parts are unique block types. It’s a container where you can find some blocks organized to build sections of the template.
In a block theme, a template contains many template parts like header and footer. Also, you’re able to add your own site sections as template parts.
Additionally, you can choose the specific template part on the site editor, and edit them individually. As it can support multiple styling options like text color, link color, etc.
Any confusion in between block patterns and template parts? Then, check the support doc by WordPress on comparing patterns, template parts, and reusable blocks.
Global styles is a system that allows you to change the overall style of your site. That too without having to edit each block/page. It means you can change the typography, colors, and layout of the entire pages, posts, and blocks of the site at once.
Also, you’re able to change the appearance of a certain block using the global styling options. And then, it’ll be applied to all those similar blocks on your entire site.
Moreover, when you style an individual block, it’ll override the global styles. So, you can edit and customize the site the way you want. Thus, this makes it easier for you to style the blocks of your site in the editor.
Another exciting function is that there’s a new theme configuration file for developers. This theme.json file is present in the root directory of your theme. So, if you’re a theme developer, then you can use it with both classic and block themes.
Here, you get to define default block settings, content width, fonts, colors and reduce the CSS of the theme. Overall, you’re able to make options for your global style. As a result, one can create their own themes.
Alongside these features, WordPress Full Site Editing also brings you lots of advantages. Here, we’re pointing out some of those benefits for you to know.
Previously, you needed to move back and forth to the customizer, widget, and menu options. And that to customize your site, add or manage the widget, and navigation, respectively. So, moving in between tabs was necessary to make any changes to your WordPress site.
With this new update on WordPress, you don’t have to move here and there between the tabs. You can do all of them in the site editor itself. As a result, making changes to any section of your site becomes simpler, faster, and more efficient.
The previous WordPress versions didn’t have many options to fully customize a site. And for which, different WordPress plugins become necessary to use. Usually, it’s page builder plugins or can be more.
However, these plugins can contain malware that can cause security issues to your site. While some may have additional features that you may not even need.
Now, using FSE, plugins become one less thing that you need to worry about. Since the features to customize the entire site with blocks are in the WordPress core itself.
A great improvement is that the lazy-loading image feature is also built in the WordPress core. So, you may not require to add any image optimizer plugin to do that.
Therefore, you don’t require such third-party plugins. Nor do you need to worry about the issues it can bring.
The site editor contains great styling options and editing features to build a site that matches your brand. And they are professional and intuitive.
The block pattern directory also provides a lot of block patterns. You can copy and paste them to the site editor to include for your site content. And it doesn’t matter whichever theme you use.
Due to this reason, switching different themes to select the best one for your site isn’t a necessary thing to do. You can select any block theme you like, and then edit it to make your unique site.
With WordPress FSE, you get an improved block control system. It means you’re able to control even the small sections of your site with more customization options.
You get to edit all parts of your site from one place without the need for coding. This makes personalizing your site a lot easier. And with the modular design on blocks, you’d receive more precision in making the changes.
For example, on the navigation menu, you can specifically customize the logo of your business. This doesn’t make any changes to the other parts of the header menu.
Another thing is that FSE makes editing your site a lot easier with improvement in the user experience. There are features like templates, template parts, and block patterns. These features enable you to easily add and customize the blocks on your site. Also, you can reuse them later.
The list view of all the components of your site is also very great. Since you can easily place the content where you want to keep with simple drag-and-drop. And you don’t even need a separate preview mode.
Now, we’ve known most of the important things about WordPress Full Site Editing. And we want to say to you that trying, training, and using FSE is much simpler. That’s why it’s time to know how to use it as well.
Here, we’re showing you the steps from setting up the environment to using some of the FSE features.
So, just follow these steps below. And within minutes, you can make your site ready to run.
We’ve already mentioned before that the complete FSE features are available on WordPress 5.9. So, it’s better to download and set up the latest version when creating a site.
However, it’s a really new environment for you to work in. And it’s recommended to create a test site to practice and experiment with the features. So, you’ve 2 choices on what you can do:
Now by setting up WordPress 5.9, your environment is ready to use WordPress FSE features.
Already have a WordPress site? Then, here’s the tutorial on how to check the WordPress version of your site. But the FSE features are only available from the WordPress 5.8 version.
So, in case you’re using this version, then you must add a Gutenberg plugin to your WordPress dashboard. Here’s the guide on installing a WordPress plugin.
After the WordPress installation completes, log in to your WordPress dashboard. Then, you’ll see the user interface of the new WordPress dashboard. Most of the things are the same when you first look at them.
However, there are certain changes too. You can see the changes in some of the menus like Appearance and Tools. And for the WordPress FSE, there’s an Editor submenu on the Appearance menu. It’s actually because you’re using the default theme that has the FSE ability.
If you choose another theme that’s not a block theme, then you’ll get options like the previous versions of WordPress. So, you can see the customizer option again. But with the default FSE theme or any other block theme, you can see the new Editor option.
To design the front-end of your site, you need to add a theme to your WordPress dashboard. Although, note that all the WordPress themes don’t support this new update on FSE.
So, to get a full site editor on your WordPress dashboard, you require a block theme. A theme that supports the modern block-based function by FSE.
Finding such a theme isn’t that hard. There are currently some of them that completely work with the new updates. And many more are yet to come.
Not to mention, there’s already a default theme by WordPress that we mentioned before. It’s called Twenty Twenty-Two. So, it works best for fully creating and editing a site.
If you want to choose another, then simply install and activate the theme on your dashboard. And it’s very simple when you know which one to do.
However, if you need to search the FSE themes first, then go to Appearance > Themes on your dashboard. After that, click on the Add New button.
There, go to the Featured Filter section and select the Full Site Editing option. Lastly, click on the Apply Filters button.
This shows you a list of all the block themes available on WordPress. So, click on the Install and then Activate button of that theme you want to use and move ahead.
Here, for the steps below, we’ll be using the default theme. So, let’s move ahead.
Now, it’s time to use the site editor that contains all the options for editing your site. For that, navigate Appearance > Editor.
Before starting the editing part, it’ll be great to have a quick look at the user interface of the site editor. So, there are 3 major sections in the editor. Each of them is discussed below.
The left-side of the top section contains the following options:
The right side of the top section contains the following options:
This section provides the front-end live preview of your site. Here, you can select an individual block and get a top toolbar option for it. It appears at the top of this section from where you can have basic edit options. Also, you can use the editing settings that are on the top-right section of the editor.
Along with that, you can add any kind of blocks to this editing area. And then customize them. This means you get to visualize the changes occurring on that page in real-time.
We hope that you understand the brief on the site editor’s user interface. Now, let’s move to the editing part.
Editing the body part of a page is similar to how you may have used a page builder plugin. And some parts similar to the previous block editor.
The general steps of editing a block or element are:
Now, we’re showing only an important edit that’s new to you. And it’s making a navigation menu. Thanks to FSE!
With that, you also get the idea of doing the same for other parts of your site.
First of all, create some posts/pages with their content on your dashboard. It’s because some parts of your site including navigation are made using them automatically.
If you’ve already created the pages on your site, then you can see that your navigation is made itself. And it contains the links to all your pages. So, you can just customize them as you want from the Settings.
But you may want to make the navigation the way you like. So, let’s start from the beginning and remove the existing navigation block.
Now, you can see the ‘+’ option in that empty section. So, click on it and write Navigation on the search box. Then, select the Navigation block to insert it.
Here, you get the 3 options to add navigation:
Since we’re making the header for the first time, click the Start empty option. Then, click on the ‘+‘ symbol on that navigation block.
On the Add link option, you can add one item at a time to the header. Then, you need to do the same process for others.
And you can add different things. Here, we’ve added the following blocks.
Also, you can rearrange them using the top toolbar option. After you’re done, click on the Save button to save the changes you made. Here’s the preview of how the navigation looks like.
There are styling options in the Settings and top toolbar for each block. Using them, you get tons of options for every small component of your site.
The steps of customizing any block or element are:
Some of the noticeable styling options to do in the navigation include:
Some amazing styling options to do in images include:
Now, we want to show you how to use the global styling options to easily style your entire site. And that’s a new feature to edit your site.
For that, click the Styles option present in the top-right section of the editor. There, you can see 3 categories. And customizing each of them will make changes to all the pages, posts, and blocks of your site.
Following that, there’s an option where you can customize the appearance of specific blocks. With that, the changes apply to the entire site. To do that, click on that Blocks option.
There, you can find a list of all the blocks in the full site editor. The step to customize each block is the same. For example, to style the Heading block, click on the Heading block option.
Then, you can see the same global styling options as before. Now, you can change the typography, color, and layout of all the heading blocks. Once the styling completes, click on the Save button.
Till today, there are 35+ FSE themes already on the Theme Directory of WordPress. Using an FSE theme is a must if you want to use its features for building your site.
Now, let’s look at some of the best FSE WordPress themes available.
The first one is Twenty Twenty-Two, a brand new default theme featured in WordPress 5.9. With new FSE features on WordPress, this theme is built keeping those functions in mind. Thus, it’s designed to be one of the most flexible default themes ever made for WordPress.
Moreover, it contains a lot of page templates, header options, block patterns, and footer options. Using them, you can easily build your site. And with the range of alternative color schemes, fonts, and other customization options, the site will definitely look unique.
Another colorful multi-purpose theme that’s built using the FSE features is Tove. It’s made with designs to create websites for cafes and restaurants. But with the FSE features, you can use it to make any type of website.
Furthermore, it currently contains 40+ block patterns, 6 header designs, and 7 footer designs. Using them, you can easily build a site in minutes. And able to customize your site to match your brand and needs.
Another FSE theme on our list is a simple yet versatile theme, Clove. It’s a theme designed with the inspiration of nature and retro illustrations. That’s why if you’re an artist or love to create an artistic site, then it’s a great option.
As an FSE WordPress theme, it consists of a set of amazing templates and design settings. And using the global styles, you can manipulate the site design to be just what you want.
In this section, we’re comparing page builders with Full Site Editing. But before that, let’s define them. After going through this article, you already know what WordPress Full Site Editing is.
Next, for those who don’t know, a page builder is usually a WordPress plugin for editing a WordPress site. Example: Elementor, Beaver Builder, etc. It works as an alternative to the default WordPress editor. And contains similar features to what WordPress FSE now provides.
So, let’s look at their comparison under some points.
Page builders offer tons of widgets alongside blocks. The widgets can be for adding social media icons, bullet lists, pricing tables, etc. Whereas FSE contains numerous blocks, and inside them, there are some default widgets only. It’s because the site editor replaces the customizer in WordPress 5.9 when using a block theme.
There are excessive options for editing a site in a page builder plugin. Due to that, adding a page builder plugin to your site may slow it down than usual. In addition to that, page builders also contain heavy markup that impacts the site’s SEO rankings.
However, FSE provides editing features in WordPress 5.9 core. And it uses lightweight code that’s well-optimized. As a result, it won’t impact the site’s performance and SEO.
You can use any WordPress theme when it comes to page builders. Unless it’s not compatible with that theme. On the other hand, you must use a block theme made up of blocks to be able to use WordPress FSE.
As a core feature, you don’t need to worry about compatibility issues in FSE. Every plugin is built to support the Gutenberg blocks. Whereas, one must check the compatibility of other plugins that you may use with the page builder.
Overall, this comparison also shows the benefits that Full Site Editing brings.
And we’re at the end of this article. We hope you were able to understand what WordPress Full Site Editing is after going through it. Along with that, this guide points out the major features and advantages of WordPress FSE. And also the steps on how to use it.
So, make sure to follow them when using the latest WordPress version. With that, you’re now able to use those FSE features for easily creating and customizing your entire site.
In case you’re in a dilemma when trying things out, post down a comment below. We’re always there to help you to find your solutions.