Full Site Editing (FSE) extends the reach of the WordPress block editor beyond just posts and pages, allowing you to edit your entire website. While this is not yet part of WordPress core, it will be soon. In the meantime, you can enable FSE via the official Gutenberg plugin.
You’ll also need to use an FSE compatible theme that specifically supports FSE features, as this is currently an opt-in feature only. Most themes don’t support FSE yet, but this is bound to change once it’s officially released.
FSE is such a paradigm shift it will undoubtedly completely change the way we build websites in the future. It also has big implications for themes like Divi, and for page builders such as Elementor.
In this article, we’ll cover the main concepts of how FSE works. These can be broken down into the following key areas:
- Theme Blocks
- Theme Templates
- Template parts
- Global styles
Let’s start though with what we actually mean by FSE?
What is Full Site Editing?
In the past, Gutenberg has been a tool used mainly to edit posts and pages only, whereas now with FSE it can also be used to edit your whole website (site header, footer, navigation, etc.). It gives you a much easier and more accessible way to control the layout of a website without needing to know any code. It’s a powerful concept.
If you already have some experience of using blocks to build outposts and pages then you’ll be right at home with FSE as the editing process is fundamentally the same. This lowers the barrier to entry for newcomers to FSE so you’ll be able to take advantage of this fantastic new feature right away!
Using Gutenberg Site Building Blocks
After installing the latest version of the Gutenberg plugin, you’ll need to activate an FSE compatible theme. There aren’t that many around at the moment but today we’re using the Tove theme to play around with some of the FSE features.
With these two active you’ll notice that the block editor now contains a new set of dynamic blocks that you can use to build your pages. In Tove, you’ll find the new blocks in the Theme section of the block inserter.
Remember, these are only visible if your theme specifically supports FSE. Once you switch back to another theme they’ll disappear!
These are all the blocks that we’re going to need to build a site with and are extra blocks that you don’t normally use when you’re using Gutenberg. This is because this sort of functionality is usually hard-coded into your theme. But now you have full control over every aspect without having to touch a line of code!
Among the new dynamic blocks available are:
- Query loop
- Post Title
- Post Content
- Post Date
- Post Excerpt
- Post Featured Image
- Log in/out
- Navigation
- Template Part
- Post-Author
- Post Comments
- Post List
- Header
- Prev/next post
One important consideration we haven’t mentioned yet is that as soon as the Tove theme is active you’ll access the WordPress customizer.
For FSE themes the customizer is disabled as we can now edit every aspect of our site solely within Gutenberg.
How FSE Templates Work
Once you’ve activated an FSE theme you’ll be able to edit the site templates. Each template allows you to create a unique layout for a specific area of your site such as single post, single page, 404 page, archive page, and so on.
It’s important to remember that when editing an FSE template you’re designing a layout that will be used on multiple pages, rather than for just a specific page. For example, when editing the single post template, changes will affect the layout of all single posts on your site. This might take a little getting used to but it’s surprising how intuitive it is.
Note: You can actually create different templates for specific pages which allows you to customize one-off pages completely differently to all other pages on your site. However, as this is an introduction to FSE we’ll just keep things simple for now.
You can access the FSE templates in two ways:
- Via the Site Editor WordPress admin main menu link.
- Or from the frontend of your site (need to be logged in) via the WordPress toolbar Edit site link.
Both of these options will enable FSE editing mode and take you to the template editor. To see all available templates click on the black and white WordPress logo at the top left of the screen.
This will open a side panel displaying a list of all the template options available. For example, we have the single post template which is automatically applied to all posts by default.
You also have other templates to choose from, including:
- A Search template used to display search results.
- An Index template, which is only used if no other template is available.
- A Page template used to display individual pages.
A 404 template that displays whenever a page can’t be found. Finally, no plugin is needed to edit the 404 page!
These templates combine to give you the freedom and flexibility to edit your site visually, in real time, and with no coding required! This is a huge step forward for WordPress.
Template Parts
Each FSE template is itself composed of smaller templates, called template parts. These are optional but are commonly used to populate templates with additional content such as headers and footers.
To access them select Template Parts from the main FSE menu. Most likely you’ll see just Header and Footer template parts but this is dependent on your current theme.
Click on a template part to edit it with Gutenberg just like you would for any other template or page. For example, from the Template Parts menu select Headers > header to open the header template part inside the block editor.
This is like having an incredibly powerful header builder built straight into WordPress. For our particular header, we can see exactly how it is structured by clicking on the list view in the Gutenberg editor window.
It’s so easy to create any header layout you like. For example, in the screenshot above, adding in column blocks separates the header into different parts. The site logo block is used in the left-hand column and within the right-hand column, there is a navigation block and a social icons block.
You could change the layout further, swapping the logo to the right, or something else more dramatic. The choice is entirely yours. And once you have the desired layout simply save your changes and view the frontend of your site to see the new layout.
Global styles
These are styles that apply to your entire site. You can think of them as a supercharged version of the WordPress customiser.
To access global style, while you’re in the FSE editor, click on the icon with three dots at the top right of the screen and then on the Global Styles link.
This will open a panel on the right-hand side of your screen containing controls to manage styles for website colors, typography, and layout. These are styles that apply to your entire site.
At the top of the Global Styles panel, there are two tabs, Root and By Block Type. The Root tab is similar to the theme customiser, as it includes options like text colour and background colour of the site.
The By Block Type tab includes a list of all block styles that can be edited. For instance, if you select the Button block, you can style it differently, so that every new button you create on your site will have the same matching style by default.
You can test this out by opening the standard block editor for an existing page (or create a new one) and adding a Button block. This should have the same styles that you just applied via global styles.
Conclusion
WordPress Full Site Editing is going to revolutionize how we build our websites with WordPress and the Gutenberg Block Editor. My predication is that we’ll soon see a big influx of brand new FSE WordPress Themes and additional Blocks designed with Full Site Editing in mind. It’s going to be an exciting year.
Leave a Reply