The next big shift for WordPress, nearly as monumental as the block editor itself, is a concept known as full site editing.

Full site editing (FSE) is very much still experimental, but the concepts are clearly in view. Imagine being able to change your site’s header, footer, single, and even archive templates, with minimal effort-all within the block editor. That’s the promise behind full site editing.

Diving in a bit deeper you’ll see the nature of a WordPress theme changes quite significantly with the introduction of full site editing. Let’s jump in and uncover everything you need to know about full site editing.

Themes will be block-based

Block-based WordPress themes are best described as an interplay of HTML structure, content blocks and a few styles.

Below is a first look at the upcoming TwentyTwentyOne theme, imagined as a block-based theme. There’s quite a long way to go, but the idea is there.

Moving forward, WordPress themes will be much simpler, comprising of a functions.php file, stylesheet, theme.json file, and a few HTML files. Those HTML files will employ block grammar to generate blocks within various areas of a page, including headers, footers, and sidebars.

theme
|__ style.css
|__ functions.php
|__ index.php
|__ experimental-theme.json
|__ block-templates
    |__ index.html
    |__ single.html
    |__ archive.html
    |__ ...
|__ block-template-parts
    |__ header.html
    |__ footer.html
    |__ sidebar.html
    |__ ...

There’s a whole guide on creating a block-based theme in the Block Editor Handbook. It’s worth a look, however we are very much in an experimental phase here. I actually had a difficult time coming up with something substantial myself when attempting to make the Tabor theme block based.

The theme.json file is awesome

This new file will be an essential part of a theme in the near future. This is the intermediate between the theme’s stylistic presentation vs. the editor’s stylistic settings; where a WordPress theme will declare colors, fonts, font sizes, gradients, and even spacing units.

The theme.json file may also dive a bit deeper, applying default block settings, like this:

{
  "global": {
    "settings": {
      "color": {
        "palette": [
          {
            "slug": "strong-magenta",
            "color": "#a156b4"
          },
          {
            "slug": "very-dark-grey",
            "color": "rgb(131, 12, 8)"
          }
        ],
        "gradients": [
          {
            "slug": "blush-bordeaux",
            "gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)"
          },
          {
            "slug": "blush-light-purple",
            "gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)"
          },
        ]
      },
      "typography": {
        "fontSizes": [
          {
            "slug": "normal",
            "size": 16
          },
          {
            "slug": "big",
            "size": 32
          }
        ]
      }
    }
  }
}

All of the styles added to the experimental-theme.json file will be morphed into CSS Custom Properties and enqueued automatically for use within the editor and on the front-end.

Learn more about the upcoming theme.json file here.

Current full site editing theme experiments

There exists a GitHub repository for attempting to build block-based themes, aptly called Theme Experiments. This codebase is a culmination of efforts from committers on the front lines of full site editing.

The repository contains sub-directories of different themes, of which are generally block-based. If you download the repo locally, simply add it to your wp-content/themes/ directory and all the themes will be available to you, including the recent addition of the TwentyTwentyOne theme.

You’ll also need to install the Gutenberg plugin, an activate the “Full Site Editing” experiment within the Gutenberg > Experiments admin panel.

There’s no better time than now to get our hands dirty and try building block-based themes in support of full site editing, and this repo is a great place to start.

An outlook

If you start playing around with the Theme Experiments repo, you’ll see first hand that that full site editing is still very much in development. I don’t expect it’ll be in production until mid-to-late next year; there’s still a lot to iron out.

Until then, we can test the available experimental block-based themes, try building block-based themes of our own, and give feedback to the folks working hard to deliver full site editing to the world.

In all, full site editing will be revolutionary change to an already revolutionary editor. I honestly look forward to it.