Full site editing for theme developers
The content of this page is directed towards theme developers.
Estimated reading time: 5 minutes
Full site editing is a collection of new WordPress features that gives you the ability to use blocks outside the content.
The first version of full site editing is included in WordPress 5.8, released in July 2021.
All full site editing features in 5.8 are opt-in and needs to be enabled by the theme developer.
Features not included in 5.8 requires you to first install the Gutenberg plugin.
Key concepts of full site editing
The key concepts of FSE (Full Site Editing) are:
- Templates for full page layouts including 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 that sets defaults for global styles. (5.8 opt-in)
- Template parts that are structural blocks that can be combined into templates.
- An advanced site editor where you can create, preview, and edit any kind of template.
- 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 the pages are built using blocks -and nothing but blocks, the menu links to the Customizer and widgets are removed when a full site editing theme is active.
There are still unanswered questions about the Customizer only settings (like the site icon) and how we can make them work with full site editing.
This puts an emphasis on making sure 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 important roles and that is why this course also includes lessons about block patterns.
How the site editor and themes work together
When a design is updated and saved in the site editor, the changes are saved in the WordPress database. The files inside the theme folder are not changed, and changes made to the files are not reflected on the website; the saved templates are used instead.
The content and markup are saved in two new custom post types: Templates and template parts.
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 can be used as the base for a new theme.
A new theme configuration file
Both classic themes and block themes will be able to use a new configuration file called theme.json. With this file, theme developers use JSON format to define defaults for blocks.
Such as site width, color palettes, background color, text color, padding and font sizes.
The file is used 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.
With version 10.6 of Gutenberg, the experimental-theme.json file was renamed to theme.json and the version 1.0 format is considered stable.
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.
Having said that, existing theme developers may still find the transition and change of mindset difficult.
Right now, there is no clear path for how to convert a classic PHP based theme to a block theme.