A guide to WordPress Full Site Editing (FSE)
So we are sure you are all familiar with the revolution that came with the introduction of Blocks to WordPress and how easy it made adding new content to Posts and Pages. The switch away from using the WYSIWYG editor was a welcome change. But are you aware of WordPress’s FSE (Full Site Editing) feature?
The great benefit of WordPress FSE is that once you have your WordPress FSE theme development you can make alterations to the theme design and templates on the fly.
What is WordPress FSE?
The Full Site Editing functionality is a natural evolution, an amalgam, of the previous widget areas and template functionality that exists. It allows the website owner or developer to construct both new page Templates and reusable sections, called Patterns, from the backend without recourse to coding. It has the same drag and drop, easy to use, interface that you will be used to with blocks. Indeed the building blocks are… blocks.
The thing to remember about FSE is it is not so much about managing page content, you are not going to use it to write your blog article for example. FSE is about managing repeated content throughout the site. So, for example, you could have a different header on your home page to your general site pages. Or you could have a different template for your services page to that of a testimonial page. Creating Patterns means that you can reuse a section/pattern (a collection of blocks) across different pages, e.g. a testimonial slider or different Templates. But you will still add your individual page, post or product content as normal via those admin pages.
Now firstly it should be said that not all themes can use WordPress FSE. The latest versions of WordPress ship with the theme Twenty Twenty-Four which is a FSE theme. Yours may not be compatible so please do not go exploring these features on your live website.
FSE Editor components
Accessing the FSE interface if you have an FSE theme active can be done via the left hand menu under Appearance > Editor. This will take you to the home of your FSE components. Note that you will loose the Customizer link from this sub-menu as it will be superseded by the FSE editor.
The different sections are: Navigation, Styles, Pages, Templates and Patterns. On the right you have the Blog home template.
Patterns
So the best place to start is with Patterns. These are collections of blocks. They also include Parts. Parts are Headers, Footers and Sidebars, for example. Parts are layout components that really emulate the layout components of a basic web page. i.e. the Header. It is possible to create multiple different template parts. As with most FSE components you have 2 options, Edit or Duplicate. Best practice is obviously to Duplicate then edit the Part that way you are not going to mess with your existing theme.
Alternatively you have the option to create a new pattern.
When you duplicate a part or pattern you will have the option to choose a category for it. This makes finding those parts and patterns easier when editing your theme. The Twenty Twenty-Four theme ships with 40 patterns, all categorised.
Once you edit or create a new part or pattern you can add blocks to it the same way you have been using blocks to add page content. The difference is you can add these patterns to Templates or even on the block editor of Pages and Posts.
Templates
Templates serve the same purpose as they do in non-FSE themes. You are able to create different layouts, e.g. two column or one column and these can then be assigned to a particular page or post. And, as with all WordPress themes you have standard templates: Page, Single, Archive, Search etc.. The main difference is that you can create more from the backend and mix up there use depending on the functionality of the pages.
As with Patterns, you can create a new Template from Appearance > Editor > Templates, or duplicate and existing one and edit that. This on-the-fly development allows you to develop new look page templates for sections of your website, incorporating different Patterns, like a different header or different re-usable blocks.
Additionally, like the existing template system, there are default templates that you can create for specific types of content in your theme files. So you can create a specific template for a specific Category page, all from the back end. Just click the “Add New Template” button.
Navigation
So the navigation section deal with your menus. So gone is the original menu manager in the Appearance section and in comes the Navigation block manager.
The Navigation manager, once clicked, takes you to a list of Navigation blocks. If you only have one Navigation block then you will be taken straight to that Navigation block though which will list all the link items.
Once you are in a Navigation block you will see a list of link items and also the 3-dot button y=will give you the option to Rename, Edit, Duplicate or Delete. Just for ease of use and a consistent feel to navigating the navigation block interface we would suggest giving your menus some sensible names (the default name for the menu that ships with Twenty Twenty-Four is “Navigation”) and also duplicating this initial one so that the actual top link to the navigation blocks goes to a list of navigation blocks rather than simply just entering the one you have.
To Add links to a navigation block click on the “Edit” link and from there you will get the standard block editing interface.
The easiest way to add to your navigation block in a FSE WordPress theme is to simply use the block editing sidebar on the right-hand side. Clicking on the “+” button you can add additional links. The drag and drop functionality allows you to order them.
Clicking on an existing link item opens up the block settings for that link e.g. link, text, title attribute and Rel attribute.
So these navigation blocks can then be used as reusable elements as part of your Patterns on your website.
Styles
The Styles section is very interesting. A Style is json file existing in the theme that can be used to specify a set of global styles for the theme e.g. colours, fonts etc… You can have multiple Styles associated with a theme and selecting the one you want to use from the Styles interface will apply that to the blocks of your theme.
From a development point of view this can be very handy to globally update styling of your theme with no real impact or down time. You don’t need to change the theme just upload a new style file to your theme. Additionally you can edit styles so you can update an existing style on your theme.
So if you have the default Twenty Twenty-Four WordPress FSE theme running on your test site you can see that it ships with a number of theme Styles. selecting a Style and clicking the edit button then allows you to edit features that are listed in the Style.
There are lot of things that you can edit the styles for. You have the standard section of Typography, Colours, Shadows and Layouts (widths for the Content and Wide Layout options). But also you can select any of the blocks and add global styles to those. you can also add some custom css styling in the Additional CSS section.
Styles therefore add the ability for you to style the blocks on the website globally as well as for individual blocks in a Page, Pattern or Template.
Pages
The last section in the FSE interface we are not really going to discuss much as it is essentially an alternative point of navigation for individual pages on your site that you can access via the FSE interface.
The advantages of a WordPress FSE theme
So we hope that we have given you a brief insight into how powerful having a WordPress FSE theme is. It really does give the website owner Full Site Editing capabilities over templates, reusable content and global styles.
The only issue is that all themes are not equal, you will need a theme that is specifically a block based theme. If you have Brand identity then obviously off-the-shelf solutions are not really going to exist for you. We also, as always, suggest that even if you do go for an off-the-shelf theme that you create a child theme for your site rather than using the theme directly.
So, in essence, what we are saying is that once you have your theme set up for you then you can manage the styling and layout of your website easily but you will still need professional web design agencies like iDigLocal to build that theme for you in the first place.
So if you fancy switching to a WordPress FSE theme then please get in touch and see how we can help.