Full site editing, or “site editing” in short, is an umbrella term for a collection of new WordPress features that focus on using blocks for all parts of a website, not only the content area.
With the new site editing features added to WordPress, you use blocks to create everything from page layouts, site headers that are synced across your site, and smart collections of block patterns that you can reuse.
It includes a new set of blocks that are meant for editing your site, rather than just editing content. Ranging from the site title and the featured image, to blocks that show the comments form or let a user log in or out of your site.
Blocks can be styled with site-wide global defaults, individually in the editor, or with the new theme.json configuration file.
What is the state of full site editing, and can I use it in production?
WordPress first added support for the new template editor in version 5.8 in 2021. Since then, each WordPress release has included new features, improvements, and bug fixes related to site editing. There have been plenty of new blocks, new options, and many performance enhancements.
My definite answer is that you can absolutely use block themes and site editing for production, but it also depends greatly on what you are building and who you are building for. There is a learning curve for developers, designers, and users. As I mentioned previously, what I really want you to get out of this website and these lessons is for you to learn enough to decide if these features will work for you and your projects.
Key concepts of full site editing
The key concepts of full site editing are:
- The Site Editor interface, where you can create, preview, edit, and remove templates, template parts, patterns, pages, and more.
- A Styles interface for selecting default styles for the website and individual blocks.
- Templates for full-page layouts, including site header, content, and footer areas.
- Template parts, which are structural blocks that you can reuse within templates.
- Block patterns with unique design elements for different types of pages and sites.
- Blocks for site building, such as site title and site logo.
- Theme.json, the new theme configuration file with default styles and settings for blocks.
- Style variations that let users choose from different pre-made designs for a single theme.
- Managing which blocks and block options are available to users, including block locking.
- A Block Bindings API that uses blocks to display dynamic data.
Finally, one important aspect is the deliberate focus on improving the performance of your WordPress site.
These features are closely tied together. You can use some of the features on their own, even with a classic PHP-based 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 and block patterns. You can create, edit and preview templates and much more in the new Site Editor:
Removal of the customizer and widget menu links
Because you build pages using blocks -and nothing but blocks -WordPress hides the menu links to the Customizer and widgets when you activate a theme that is built for the Site Editor.
-The Customizer menu item is automatically re-enabled when you activate a plugin that uses it.
This change emphasizes ensuring that the blocks in the editor and front match and that theme and plugin developers test their blocks and block styles carefully.
Default colors and typography with global styles
In the Site Editor, you will find a new sidebar panel named Styles. In this panel, you can select default colors, typography (including font families), width, and spacing for the website and different block types. This is also where you can add custom CSS.
Changes for theme developers
With full site editing, developers will primarily use HTML templates instead of PHP files and HTML comments and block 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, so I have also included lessons about block patterns.
How the Site Editor and themes work together
When you update or save a design in the Site Editor, WordPress saves the changes in the database. The files inside the theme folder are not updated, and the website uses the templates from the database.
WordPress saves the content, markup, and styles in custom post types:
- Template (
wp_template) - Template part (
wp_template_part) - Styles (
wp_global_styles) - Navigation menus (
wp_navigation) - Synced block patterns (and formerly reusable blocks)
(wp_block)
If the user has saved changes to a template and the theme is updated, WordPress will not apply the update unless the user resets their customizations.
Theme.json — A new theme configuration file
Another key concept of full site editing is the new theme configuration file called theme.json.
Both classic themes and block themes can take advantage of theme.json.
With this file, theme developers use JSON to define defaults like content width, color palettes and gradients, background color, text color, padding, font families, and font sizes.
You use this file to:
- Enable and disable features like gradients or the paragraph drop cap.
- Set default values for the Styles interface in the editor.
- Create CSS custom properties used to style the blocks in the editor and the front of the website.
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 directly from the editor’s tools and options modal:
The export contains a copy of the active theme with the changes applied, and you can use it as a base for a new theme.
The WordPress community has also created tools to help with theme creation, like the Create Block Theme plugin and the block theme generator on this site.
Lower entry barrier
Full site editing brings many changes. It also lowers the entry barrier for designers and beginner theme developers. 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. There are no widget area limitations because blocks can be placed anywhere.
Block themes will be easier to build; they will contain fewer files and less custom CSS and JavaScript.
Challenges
One of the challenges with full site editing is the change of mindset of building themes with blocks as our components instead of PHP.
Another challenge is wanting to do more, pushing the limits of what is currently possible with FSE, and setting expectations.
Full site editing is production-ready and it works especially well paired with custom block development. But you need to think carefully about if it is suitable for the projects you are working on.
In November 2022, the WordPress project announced that “full” would be dropped from the name to make the features more user-friendly.
On this website, I will use both “full site editing” and “site editing” as an umbrella term that encompasses all the related features.
When I use the term “Site Editor”, I refer to the the site editing screen in the WordPress admin area, the editor where you edit templates.