Custom WordPress Full Site Editing Theme Now Live

This site now uses a custom Full Site Editing (FSE) theme. It started as an experiment, but it came together easier than I expected, and so it’s live on this site now. There is still work to do, as there have been changes to the Block and Site Editors, since I started, and some things are simpler now.

The site design is the one that this site used previously, just to see how it could work up as a FSE theme. I was able to replicate the Custom Genesis child theme I was using before. It’s nearly identical, except that some things, such as the mobile menu are done a bit differently, and I made a few changes that I had wanted to do earlier. I was even able to add the search dropdown from an icon to the header.

Why You May Want To Use Full Site Editing Right Now
(Or at Least Some Features)

Theme.json File

The part of Full Site Editing that I found the most exciting was the theme.json file for adding Global Styles. It makes adding a palette of colors or font sizes or block styles simple to accomplish. Customizing a palette for theme colors and adding font sizes to a theme was fairly difficult before, requiring knowledge of PHP.

You can also use the theme.json to set many of the Global Styles on all the WordPress blocks, so it’s a very powerful file considering it’s simplicity of use. The theme.json will automatically generate CSS from the theme.json for both the front-end and back-end, which simplifies the amount CSS that you need to write.

The best part is that you can use a theme.json file with classic themes right now; you don’t need a Full Site Editing theme or the Gutenberg plugin. So you’ll be able to take advantage of some of the features – color palettes, fonts, and block styles — while you’re still using a classic theme.

And once you add a FSE theme with a theme.json file, you’ll be able to edit the Global Styles to make changes that you want right in the Site Editor. For instance, if you think the body font size is too small or large, you can edit it in the Global Styles and it will override the theme styles. You’ll also be able to add your own custom colors right in the Global Styles panel too.

The interface for the Global Styles in the Site Editor was just updated and now looks like this:

Editing Theme Templates and Template Parts

Another feature that will make FSE themes easier for you to use, especially for simple websites, is the ability to edit the theme headers, footers, and templates, as well as pages and posts.

This means that you can start with a theme, and it’s templates and template parts. But then you’re able to edit the template parts – headers and footers, and customize them with your logo and menu. You can even change the layout, so you could center the logo with the menu below, even if the theme starts with a logo left and menu right. Once you’ve customized the headers and footers, your website will use your customized template part.

It’s the same for the page/post templates. Most Full Site Editing themes have several templates, but if you can work with the block editor, you can customize the layout of the template, so that it’s the way you want it to be. For instance, if the FSE theme shows a Featured Image block above the post title, you’ll be able to move that Featured Image block to below the post title. Then your website will use the template that you edited.

Templates can also be used in Classic Themes right now, as long as you add the Gutenberg plugin. But if your site uses Widgets or a Sidebar, you may want to wait a bit.

Fewer Files and CSS Needed

A Full Site Editing WordPress theme requires a substantially smaller number of files than a classic theme. The WordPress TT1 Blocks theme which is a FSE version of the default Twenty Twenty-One theme has fewer files and the files are also smaller – less functions and CSS.

Why You May Not Want to Use Full Site Editing Quite Yet

Gutenberg Plugin Updates – Meh

The main reason to avoid using a Full Site Editing theme right now is that you also need to have the Gutenberg plugin activated. I’ve not really been a fan of using the Gutenberg plugin on a live site, as it gets updates that you may need to scramble to correct on your live site, if you did things differently than Gutenberg ends up doing them. Once the Gutenberg changes are added to WordPress Core, it’s pretty stable.

For instance, I normally add space below items, such as after blocks and paragraphs and sections, as margin-bottom CSS, and then remove the margin-bottom on the :last-child elements. So that’s the way I coded this FSE theme CSS.

But a Gutenberg update after I made this FSE theme live added a new feature – a blockGap setting, which is automatically added above all blocks.

So all of a sudden, the theme header, body, and footer sections had two extra sets of spacing at the top of each section! And since I had just made the menu fixed to the top of the screen, it took up way too much of the screen. WordPress developers hadn’t removed the blockGap from the :first-child elements when it was first added.

But in the long run, the blockGap setting is extremely useful, making uniform spacing simple. This feature will eventually be added to WordPress, but by then, there will be an opt-out option, so that if you’ve already added spacing with other CSS, it won’t affect your theme.

Navigation Menus are Experimental

As this is being written, WordPress is still working on the Navigation menu features, to make it easier to edit a current menu and add it to a template or template part of a theme. What I found was that one of the choices choices for the menu was to use an existing menu, but to edit that menu, you have to activate the Navigation Experiment in Gutenberg. The other way to create a menu was to just build it item by item in the header for this theme, and that’s the method I used. But for some menus, they are much to complex to do it this way.

Also each update of Gutenberg adds more features for Global Styles. Right now this theme is using too much CSS that is no longer needed, so it will need a redo at some point.

Be Careful What You Edit and Save

You have to pay attention to what you’re editing and updating – whether it’s just post and page content, or the template you’re using or even the headers and footers. Because you can edit them all on the same screen, at the same time now, if you choose to do so.

The image below shows editing a post in the Full Site Editor; you can also edit the header template part and footer template part at the same time as editing the post.

The other thing that seemed a bit awkward to me at first is how to navigate the Site Editor. And I still think there should be a quicker way to get back to the Dashboard than to use the Site Editor back arrows through several screens.

Learn Full Site Editing

There are quite a number of resources for FSE now; some are for designers/developers to build themes, and others are for end users to learn to customize a FSE theme.

Full Site Editing Themes

A number of FSE themes have been added to WordPress.org Theme Repository –
And the list is growing every day. These themes are great to try out on a staging or local site to experiment with Full Site Editing and how it works. There are quite a few new themes, since I first looked at them, so I’ll be trying some more of them soon.

My Favorite Themes to Try:

• TT1 Blocks
• Armando
• Naledi
• Tove
• Hansen

Full Site Editing Resources

• WordPress Full Site Editing by Carolina Nymark has a wonderful set of getting started tutorials for developers and designers. This is what I used to start my FSE theme.

• WP Development Courses has What I Learned Building a Full-Site Editing Theme and also two courses – Building Block-Based Themes and Building Hybrid Themes

• WP Tavern has up-to-date info on new FSE themes and changes coming in Gutenberg and WordPress FSE. Justin Tadlock’s posts are particularly thoughtful and helpful. FSE is also discussed on the podcast, if you prefer listening.

• The Block Editor Handbook on WordPress.org has a section on FSE. This page has some useful links, especially at the very bottom, see the documentation for theme.json.

• Anne McCarthy has some wonderful video resources.

• Gutenberg Times, especially Full-Site-Editing – the Ultimate Resource List, has info on using FSE.
• Rich Tabor also has helpful blog posts on FSE.

• Joe Casabona has an overview in which he builds a 404 Landing Page. He also has a course – Master Full Site Editing – on his website.

While you may not be ready to adopt WordPress Full Site Editing right now, you can take advantage of some features with your current Classic theme – Global Styles by adding a theme.json. Or you can even create your own Templates, if you add the Gutenberg plugin. WordPress 5.9 should be out in December 2021, and hopefully Gutenberg will no longer be required for creating Templates.

Please let me know which Full Site Editing features you want to learn more.