What is full site editing?

What is full site editing?
The site editing features are a collection of new WordPress features that focus on styling and editing blocks and using blocks for all parts of a website, not only the content area.

This includes the Site Editor screen and the Styles settings sidebar, block patterns, block templates and template parts, and the theme.json configuration file.

WordPress first added support for the new template editor in version 5.8, released in July 2021. Additional features were added in WordPress 5.9 in January 2022, and in 6.0 in May 2022.
WordPress 6.1 was released in November 2022 and included new advanced features and many improvements to template creation and block settings.

Level: Beginner, developer

Estimated reading time: 7 minutes

Last updated

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.
  • A Styles interface for selecting default styles for the website and individual blocks.
  • The template editor, where you can create and edit post- and page templates.
  • Templates for full-page layouts, including site header, content, and footer areas.
  • Template parts, which are structural blocks that you can re-use 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, a theme configuration file with default styles and settings for blocks.
  • Managing which blocks and block options that are available to users, including block locking.

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 template parts in the new Site Editor:

The Site Editor is enabled when you activate a full site editing theme. The navigation sidebar on the left side has links to lists of templates and template parts.
The Styles sidebar on the right side expands options for typography, colors and layout.
The Site Editor with the navigation sidebar on the left side and the Styles sidebar on the right.
The Site Editor template list shows all the templates that are added by the full site editing theme, as well as user created templates.
List of templates in Twenty Twenty-Two.

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. Here, you can select default colors, typography, and spacing for the website and different block types:

On the first screen of the Styles sidebar you can expand options for the websites (body or root) colors, typography and styles. or you can open a list of block types, from which you can select an individual block to add styles to.
Select between styling the website and styling blocks.
In the Styles colors panel you can find the palettes (default, theme palette, and palettes added by the user) and a list of elements: Background, text and links.
Selecting one of the elements opens a modal with a color picker.
The color settings show the current palette,
the background color, text- and link color.

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 or template 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 four new custom post types:

  • Template (wp_template)
  • Template part (wp_template_part).
  • Styles (wp_global_styles)
  • Navigation menus (wp_navigation)

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.

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:

Export the theme file

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.

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 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.

Lower entry barrier

Full site editing brings many changes. It also lowers the entry barrier for designers and new 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.

Full site editing 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 we need to think carefully about if it is suitable for the projects we are working on.

In November 2022, the WordPress project announced that the word “full” would be dropped from the name, to try 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 am referring to the site editing screen in the WordPress admin area.