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 new WordPress feature that gives you the ability to use blocks outside the content.
The key concepts of FSE (Full Site Editing) are:
- Templates and template parts that combine blocks into full pages.
- A new site editor where you can view and edit all sections of a page, not only the content sections.
- Global styles that lets you select defaults for the website and all instances of a block.
Full site editing and global styles are both experimental features and require you to first install the Gutenberg plugin.
From Gutenberg version 9.3.0, 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 areas have been removed
Because the pages are built using blocks -and nothing but blocks, both the Customizer and widgets are removed when full site editing is enabled.
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.
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.
In November 2020 when this lesson is written, the features are still limited to colors, font size and line height. -And only for some blocks.
There are plans to support these options in more blocks.
The available options will likely be extended to include:
- Font family
- Padding and margin
These features are still being developed and may change.
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. This means that a block-based layout can be reused, even when you install a different theme.
This puts an emphasis on making sure that the blocks in the editor and front match and that theme developers test their blocks carefully.
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
Block-based themes use a new configuration file called experimental-theme.json. With this file, theme developers use JSON format to define defaults for blocks. Such as background color, text color, and font size.
The file is used to:
- Set default values for the global styles sidebar in the editor.
- Create CSS variables used for the blocks in the editor and the front.
The role of the theme.json file continues to evolve with every new version of Gutenberg. What is clear is that it will have a major part in future theme development.
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 full site editing theme. Theme authors will be able to add support for full site editing to existing themes on a per template basis.