How To Test FSE (Full Site Editing) In WordPress

Last week, I’d written about Full Site Editing (FSE) in WordPress, and how it was going to put theme design in the hands of ordinary users. Previously, you had to know not just PHP and HTML code, you also had to know where the different parts of your theme design were stored. It was complicated, to say the least. Now with this intuitive interface, you no longer need to have a deep insight into the WordPress theme structure.

So in this tutorial, I’ll show you how to test out the experimental FSE features in WordPress so you can get a running start on the new interface.

Warning: Please don’t test this on a live production site!

Step 1: Download the Gutenberg Plugin

It might surprise many of you to know that WordPress still has a Gutenberg plugin! That’s right – even though Gutenberg has been live for a long time, the WordPress team still uses the plugin to test out change. And this is where Full Site Editing currently lives.

You must download the right plugin, since searching for “Gutenberg” in the plugins directly doesn’t bring up the official one. Here’s what you need to look for:

As you can see, it has pretty poor ratings, thanks to the initial negative reactions to Gutenberg (including myself). But don’t be put off by that. Go ahead and install it.

Step 2: Install the Experimental TT1 Theme

FSE only works with themes that are specially built for it right now. So go to your themes page and search for “TT1” and install it as shown here:

Activate the theme, and you’re done!

Step 3: Enter the Site Editing Interface

Once you’ve done both of the above two steps, you should see a new item in your dashboard saying “Site Editor (beta) as shown here:

This will lead you to the site editing interface.

Step 4: Make Changes and Preview

The blocks-based interface should be familiar to you. As a test, simply make a change to the heading like this:

And save your changes. Now the heading would have changed throughout your site!

That’s pretty cool.

For the next step, add the navigation section:

And I’ve also inserted a new block after the header section with some random text. These changes will propagate everywhere when you make the changes.

Step 5: Select Which Template You Want to Change

By default, Gutenberg starts with editing the index page of your site. But you might want to change the way your single posts and pages look. To switch the editing interface to single pages, click the drop-down box at the top and choose “Browse all templates”.

Now you can choose what you want to edit:

As you can see, you can customize 404 pages, “pages”, and any other templates that the theme has defined. With this, you have complete control over how your site looks. For example, I find that the size of the title on single pages is too large. So a quick change in the site editor is all it takes! No need to go to your “style.css” page and muck around with clumsy CSS that is hard to maintain.

Almost Ready for Primetime

As mentioned, FSE is still in beta. But the features are already good enough to make it a priority for the next WordPress release. FSE should give site owners a lot more control over what their site looks like without having to keep track of which CSS rules they’ve stored, and where. With this, WordPress will directly challenge website builders like Wix that have had this for years but have charged a premium. No more!