Level: Beginner, developer
Estimated reading time: 5 minutes
Full site editing is a collection of new WordPress features that focuses on styling blocks and using blocks for all parts of a website, not only the content area.
WordPress 5.8, released in July 2021, includes the first version of full site editing.
All full site editing features in 5.8 are opt-in and can be enabled by the theme developer.
Features not included in 5.8 require that you first install the Gutenberg plugin.
Key concepts of full site editing
The key concepts of Full Site Editing (FSE) are:
- Templates for full-page layouts, site header, content, and footer areas. (5.8 opt-in )
- A template editor where you can create and edit post- and page templates. (5.8 opt-in)
- A theme configuration file with defaults for global styles. (5.8 opt-in)
- Template parts, which are structural blocks that you can combine into templates.
- An advanced site editor where you can create, preview and edit templates.
- A global styles interface for selecting site wide styles for blocks.
You no longer need to enable full site editing manually. It is enabled once you activate a full site editing theme.
Changes to site creation
You will build the entire page layout using blocks -everything you see on a page is a block.
And yes, it means that you can finally use the cover block as your header image :).
A page can consist of a single template, or, it can be a combination of template parts. You can create, edit and preview templates and template parts in the new site editor:
You can use different template parts for different posts and pages.
The customizer and widget menu items have been removed
Because you build pages using blocks -and nothing but blocks -WordPress hides the menu links to the Customizer and widgets when you activate a full site editing theme.
There are still unanswered questions about the Customizer only settings (like the site icon) and how they can work with full site editing.
This change emphasizes ensuring that the blocks in the editor and front match and that theme developers test their blocks carefully.
Default colors and typography with global styles
In the site editor, you can also find a new sidebar panel named global styles. Here, you can select site-wide defaults both for the website and for different block types.
Changes for theme developers
With full site editing, developers will use HTML templates instead of PHP files and block comments and markup instead of PHP functions.
Example block markup:
<!-- wp:paragraph --> <p>Welcome to the world of blocks.</p> <!-- /wp:paragraph -->
Theme authors can no longer rely on the Customizer for global options.
Instead, global styles and block patterns have more significant roles, and that is why this course also includes lessons about block patterns.
How the site editor and themes work together
When you update or save a design in the site editor or template editor, WordPress saves the changes in the database. The files inside the theme folder are not updated, and the website always uses the saved templates.
WordPress saves the content and markup in two new custom post types: Templates and template parts.
-This also means that if the user has saved a template, and the theme is updated, the update will not be applied unless the user deletes their saved templates. This is a problem that still needs to be solved, and there are similar questions related to switching themes.
Building themes using the site editor
You can create and preview layouts by placing your blocks in the site editor. When the design is ready, export it as a .zip file with HTML files, directly from the editor’s tools and options modal:
The export is not a complete theme, but it contains the markup for the blocks, and you can use it as the base for a new theme.
A new theme configuration file
Both classic themes and block themes can use the new configuration file called theme.json. With this file, theme developers use the JSON format to define defaults for blocks, such as content width, color palettes, background color, text color, padding, and font sizes.
You use this file to:
- Set default values for the global styles interface in the editor.
- Create CSS custom properties used for the blocks in the editor and the front.
Theme.json is not part of the file export from the site editor yet; you need to create it manually.
Lower entry barrier
Full site editing brings many changes. It also lowers the entry barrier for new theme authors.
They no longer have to be concerned with the Customizer, custom widgets, or post meta boxes and can focus more on extending and styling blocks.
Full site editing themes will be easier to build; they will contain fewer files, and less CSS. Experienced theme developers may still find the transition and change of mindset difficult.