The Complete Guide to Full Site Editing [+Insights from WCEU 2022 Speaker Darren Ethier]

WordPress full site editing is a new group of features that radically transforms how you'll use and customize WordPress themes.

If you use a block-enabled theme, you'll be able to customize every part of your site using blocks, which gives you full, code-free customization without needing to install a page builder plugin.

However, full site editing is still a brand new feature in 2022 and new features are still being added in every release. For that reason, you might not be sure how to get started.

To help you understand what full site editing is and how you can use it, we created this full guide to WordPress full site editing, which includes insights from Darren Ethier’s session "The future of commerce in WordPress with Full Site Editing". Here's everything that we'll cover:

• What is full site editing in WordPress?
  • Benefits of full site editing
• What can you do with full site editing?
• How does full site editing work?
• How to use full site editing
  • To create a header
  • To customize a single post template
  • To customize a blog listing template
  • To manage global theme and block styles

If you've been using WordPress for a bit, you're probably familiar with the WordPress block editor, AKA Gutenberg. Before full site editing, the block editor was mainly used to create blog posts and content pages. With full site editing, you can also use blocks to design your actual theme templates, which gives you 100% control over your site and how all of your content displays.

This is huge for website owners today, according to Darren Ethier, a Product Lead of the Store Editing group at WooCommerce who presented at WCEU 2022. He said that people today want to personalize their websites with colors, graphics, and interactions (animations). To do that, they usually start with a theme and want to make it their own via customization options.

“As people are looking for platforms, they want to be able to do the personalization and customization themselves,” Ethier said.

In the past, users have relied on a variety of tools, including themes, the Classic editor, short codes, custom code, the WordPress Customizer, and third-party page builders, to do this personalization and customization.

Then, in 2018, Gutenberg was released. Ethier described it as “a native no-code visual canvas built into WordPress for everyone to use.” This introduced a host of benefits for everyone, especially those in commerce, according to Ethier. Let’s take a look at those below.

Benefits of WordPress Full Site Editing

In his session, “The future of commerce in WordPress with Full Site Editing,” Ethier focused on three major benefits of WordPress Full Site Editing. We’ll take a closer look at those below.

1. Common Language for Expressive Content and Controls

One of the greatest advantages of Gutenberg is that it provides a common language for expressive content and controls, according to Ethier. “This is powerful because the downside of third-party page builders is that everyone has a different way to do it, what tools to use, how the interface looks,” he said. This makes it difficult to switch to another page builder, even if users get frustrated with their current one, because they have to basically learn a new solution from scratch.

FSE changes that because it has a common interface, code, and documentation, Ethier explained. That makes it easier for people to focus on creating.

2. Adaptive Interfaces

On WordPress, people want to build exactly what they want and have a simple way to do so. But “simple” is subjective and applies to who is using the platform and what they’re trying to do, Ethier said.

“When talking about simple customizations, who is using the interface matters,” he explained. “If a new user, you can tailor the onboarding, and focus on block patterns. For power users, you can focus on controlling the inner layout and custom blocks.”

3. Contextual Configuration

Building websites and stores online is complex. Part of this complexity is because a lot of configuration takes place out of context of what it impacts, according to Ethier.

“For example, if you’re configuring payment options, you can’t immediately see how that affects your site. FSE changes that,” he said. “Checkout page settings and layout can take place right in the sidebar.”

WordPress Full Site Editing Is a Work in Progress

It's important to understand that, as of May 2022, WordPress full site editing is still a work in progress. Some parts of full site editing are still in beta, such as the Site Editor.

Additionally, the core team is still working on adding new features in each major release. For example, WordPress 6.0 brought a ton of improvements, including more targeted template conditions, more flexible style controls, and a bunch of new theme blocks.

Future releases will continue to build on these foundations, adding and improving features to make full site editing even more helpful.

In the meantime, Ethier recommends learning Gutenberg deeply. “If going to get to the promised land of what wordpress can do, you need to figure it out and get to the ‘aha!’ moments ourselves,” he said. He also stresses how important it is for users to share what’s working, what’s not, and what they want to do with Gutenberg and FSE in GitHub, Slack, and other channels where “people are listening.”

What can you do with full site editing?

The eventual goal for full site editing is that you'll be able to fully customize your entire WordPress site using the Gutenberg editor.

Here are some specific examples of what you can design with full site editing:

• Header - create a custom header for your website, including the ability to dynamically pull in menu items.
• Footer - design a custom footer for your site. As with the header, you can also dynamically insert content, such as pulling in a list of your site's menu items.
• Single templates - create the templates that individual posts, pages, or custom post types use.
• Archive templates - create the templates that list your blog posts or custom post types. For example, your "blog page" that lists all of your recent blog posts.
• "Utility" pages - for example, your site's 404 page, which displays when a user tries to access content that doesn't exist.

You can also easily change the styles across your entire theme using global styles.

How does full site editing work?

Now that you know what WordPress full site editing is, let's go over how to use full site editing to customize your WordPress site.

In this first section, we'll discuss some basics of using full site editing, including the following:

• Site requirements to use full site editing
• The most important concepts you need to understand

Then, in the next section, we'll look at some specific use cases for WordPress full site editing, including using it to create a custom header and blog post template.

Basic Requirements for WordPress Full Site Editing

In order to access the full site editing features, your site needs to meet two basic requirements.

First, you must be using WordPress 5.9 or later. Earlier versions of WordPress don't include the full site editing features. WordPress 5.9 was released on January 25, 2022, so you should be good to go as long as you've updated your site since then.

Second, you need to be using a block-enabled WordPress theme that supports full site editing. A lot of existing popular WordPress themes don't offer full site editing support as of May 2022, so this is the most likely barrier to you being able to access full site editing.

To find themes that support full site editing, you can use the Full Site Editing feature filter at the WordPress.org theme directory. Click here to view the full list of themes.

For our example screenshots, we're going to use the default Twenty Twenty-Two theme, which offers complete full site editing support.

Key Concepts in the Site Editor

Next, let's go over a few key concepts for full site editing. That way, you'll have some helpful context when we get into the step-by-step tutorials.

Site Editor

The Site Editor is the main editor where you'll work with full site editing. As long as you're using a block-enabled theme (see above), you can open it by going to Appearance → Site Editor.

By default, you'll see the template for your site's homepage:

To access other templates, you can click the WordPress logo in the top-left corner. These templates are divided into two types:

• Templates
• Template parts

Templates

A template is the full layout for an individual webpage on your site. It includes a header, content, a footer, and so on.

Here are the two main types of WordPress templates:

• Single - this displays the content for a single piece of content. For example, a single blog post, a single page, or a single piece of content from a custom post type that you've created.
• Archive - this is the page that lists content. For example, your main blog webpage lists all of your blog posts. You'll also have other webpages that list all of the posts in a certain category or from a certain author.

You'll also have other more niche templates, such as your homepage (a special type of "single" template), your 404 page, your search results page, and so on.

Template Parts

A template part is what it sounds like - it's part of an overall template.

The two most common examples of template parts are your header and your footer. You would never have a page that displays just your site's header. However, your header will always be there as part of the template that also includes the content.

By saving these designs as template parts, you can quickly reuse them in other templates. For example, instead of needing to recreate your header from scratch every time you create a new single template, you can just choose one of your header template parts.

Additionally, if you ever update that header template part in the future, those changes will automatically apply to every single template that uses that template part.

Template Editor

The Template editor is pretty much the same as the Site Editor, but with a slight tweak. It lets you create new post templates that you can assign to individual posts.

You can open it from inside the content editor when you're creating/editing a post:

Once you create the template, you'll be able to assign it on a post-by-post basis using the drop-down.

Styles

The Styles editor lets you control two aspects of your site's styles:

• Global styles - these let you customize the design across your entire site. For example, you can change your primary colors, your typography, etc.
• Block-specific styles - these let you customize the default style of your site's blocks. For example, editing the default design of the Button block. You can always override these defaults.

Theme blocks

Theme blocks are special editor blocks that play an essential role in full site editing. You can add and style them just like any other block.

However, the unique thing is that they let you dynamically pull in information from your site.

For example, let's say that you want to create the template that all of your blog posts will use. To do that, you'll get special theme blocks to insert a post's title, content, author, and so on.

When you add the post title block to your template, it will dynamically insert the actual post title for each post that uses that template.

How to Create a Custom WordPress Header With Full Site Editing

Now that you know the basics of how full site editing works, let's start getting into how to perform specific actions with it, starting with creating a custom header for your site.

But before that, we just want to remind you: if you are not using a block-enabled WordPress theme, you will not be able to follow this tutorial.

Again, you can find block-enabled themes by using the Full Site Editing filter at WordPress.org.

1. Open the header template in the Site Editor.

To begin, open the Site Editor by going to Appearance → Site Editor.

Then, open the Template Parts list. From here, you can either edit the existing header template or create a new one by clicking Add New:

2. Edit header content.

Now, you can set up the design of your header using theme blocks. Here are the blocks that you'll most likely want to use:

• Site Logo
• Site Title
• Navigation

You can add these blocks just like you would any other block and customize them using the settings in the sidebar:

3. Edit your navigation.

The Navigation block deserves special mention because it's how you'll set up menus on your site. You can think of it as the replacement for the old menu system that you would access at Appearance → Menus.

Once you select the Navigation block, you can choose Select Menus on the toolbar and then create a new menu. 

From there, you'll get access to another special set of blocks in the block inserter that let you add content to your menu. For example, you can insert links to certain posts or pages that you want to feature in your navigation.

You can also add a submenu to create dropdown menus:

Note - the Navigation block works sort of as a reusable block, which you'll see in a second.

4. Save your template.

Once you're happy with the design of your header, you can save your template. When you click Save, you'll be prompted to choose which changes to update. This could include both the header template and the navigation menu.

How to Customize Your Single Post Template With Full Site Editing

Now that you have a custom header, let's look at how you can customize a single template.

A "single" template is the template that an individual piece of content uses. For example, an individual blog post (your "single post template"), an individual page (your "single page template), or even a custom post type that you've created.

Here's how it works…

1. Create or edit the template.

To begin, open the Site Editor and go to the Templates list. Then, edit the default Single Post template (or, you can create a new template).

2. Add or edit content using theme blocks.

Now, you can control the design of your template using the special theme blocks.

You can work exactly as if you were designing an individual page in the content editor. The only difference is that you're using the theme blocks to dynamically insert content instead of adding the content itself.

For example, you'll add the Post Title block where you want the title to appear, the Post Content block where you want the content to appear, and so on.

You can also mix in regular blocks as needed. For example, you can create multi-column designs using the Columns block.

3. Save your template.

When you're finished, save the template. As with your header, you'll be able to choose which content to save.

How to Customize Your Archive Template With Full Site Editing

Finally, let's take a quick look at how to customize your "archive" template.

An "archive" is a page that lists all of your posts. For example, your main blog page or the page that lists all of the posts in a certain category. The main difference between an archive template and a single template is that you'll rely on the Query Loop block to insert content in your archive.

The Query Loop block performs two main functions:

1. It lets you choose what content to display. For example, you could display the "10 most recent blog posts" or the "5 most recent blog posts in Category A".
2. It lets you control what design/layout to use when displaying each post. In WordPress terms, it lets you control the design of "the loop".

1. Create or edit your archive template.

To begin, create or edit your Archive template like you did the Single template above.

2. Add a query loop to set up the design.

Next, add the Query Loop block where you want your blog listing to appear. You can either choose a premade pattern (the simplest option) or design your own layout from a blank canvas:

If you want to customize the layout, you can do so by using theme blocks inside the Query Loop block:

3. Select what content to display.

To control what content to "list" or "loop through", you can select the main Query Loop block. This will give you a query builder in the sidebar where you can target certain post types, categories, authors, keywords, and so on:

4. Save your archive template.

To finish things out, make sure to save your archive template.

How to Change Global or Block Styles

To control styles in full site editing, you can open the Styles editor from inside the Site Editor. This will give you options for typography, colors, and layouts.

You can also choose the Blocks option to customize the default styles for individual blocks.

For example, if you open the block styles, you'll get a list of all your site's blocks. When you choose a block, you'll get settings to customize the colors, typography, and layout for just that block:

Get Started With WordPress Full Site Editing Today

WordPress full site editing gives you the power to customize 100% of your site and its templates using blocks and Gutenberg. In 2022, it’s still a work in progress, but FSE already has all of the functionality that you need to build and customize your site with blocks.