Full Site Editing Themes WordPress

Lessons learned building our first block theme for Full Site Editing

The last few weeks we have been busy converting our Aino theme to a Full Site Editing block theme. We decided to take the leap now even though quite a few of the Full Site Editing features are still in development and we currently still need the Gutenberg plugin to use block themes.

Our main reason to work on the transition now was the release of WordPress 5.8. This release is definitely the starting point for Full Site Editing. And since we built Aino for the sole reason of being prepared for this new future of WordPress, we were quickly convinced that we should start now and not later.

Themes and Full Site Editing, what will change?

It’s important to understand that themes will change tremendously with the new Full Site Editing (FSE) features. From the technical side, theme files will no longer be PHP files but HTML files instead. Most of the Full Site Editing features will be controlled via the new theme.json file and not via the functions.php and the Customizer.

The theme.json file

The theme.json file allows theme authors to specify the theme’s universal color palette, the theme’s font families and font sizes. These settings are called ‘Global Styles’ settings.

But the theme.json file is capable of much more. Theme.json is the new control center of WordPress themes.

A theme can also define individual block settings via theme.json. For example, a theme author can specify which font the Heading block should have and define a custom color palette for the Button block.

Global Styles are brand new and are replacing many of the Customizer theme options, which brings me to the next big challenge we faced when moving towards a FSE block theme. The Customizer will be phased out and is and is no longer available to block themes.

Replacing the Customizer

Yes, you heard right, block themes work without the Customizer and the Customizer is not active once a block theme is is use. It’s the goal to make all WordPress settings available within the editor.

In the end, working around the Customizer was easier than expected. We had to drop a few of our original Aino design settings for now. In the future, we will integrate these design options directly via block styles.

As described above all color settings are managed via Global Styles. Typical theme options like adjusting the Footer copyright text can now be edited directly in the Templates and Template Parts. This also applies for Menus, e.g. the Header navigation and Footer links.

What’s great is that block theme users can save multiple Footer and Headers. We already make use of that on the Aino website so we can have Headers in different colors. I wrote a tutorial explaining how to customize Headers in a block theme on the Aino blog.

You can also customize your website’s logo and site title in block themes via the Site Editor. New Site Title and Site Logo blocks are available.

At the moment you can only define one logo image in the Site Logo block. So unfortunately it’s currently not possible to use logos in different colors. This will probably change in future updates. As a workaround, you can use the Image block with a link to your homepage as an alternative to the Site Logo block.

A favicon can be added using a Favicon plugin. A plugin has the advantage that you have much finer icon settings. You can include optimized favicons for different browsers and devices.

The Home and Blog page can be assigned via Settings/General.

Aino doesn’t have Widget areas. The Footer widget areas can now directly be edited in the Site Editor. We have prepared multiple Footer patterns and more will follow.

Templates and Template Parts

Block themes have Templates and Template Parts. Classic themes had PHP page templates and template parts.

One big advantage of block themes is that theme users can now customize Templates and Template Parts via the visual Site Editor. It’s even possible to create custom Page Templates that are not dependent on a theme. You can switch a theme and still have your saved custom Page Templates available. This makes the new block theme generation so much more flexible.

The Aino Blog (index) page in the Site Editor.

You can choose which layout you want to use for your blog or blog archive page in the Site Editor. You can add patterns to Templates or choose from several different Templates and Template Parts. The option to make multiple Template Parts available in a theme is especially exciting for the Header and Footer Template Parts.

Conclusion

We want to offer our theme users these more flexible, lighter WordPress block themes as soon as possible. Therefore we believe we can’t wait until everything is perfectly ready, but instead we want to be part of the development and help shape the future of block themes. The next two WordPress releases, 5.9 and 6.0, will pretty much change the way we use themes in WordPress.

Behind the scenes we are also working on a solution on how to prepare our most popular classic themes like Zuki or Uku for this new WordPress block theme era. We plan to use Aino as a base and take the chance to update our classic theme designs along the way. But more about that soon.

Converting Aino to a block theme was our first big step towards this new WordPress theme era. We feel this was important so we and our theme users can now explore block themes more deeply. From here we can learn and add new features step by step.

If you have feedback and questions for us or want to know more about block themes, Full Site Editing and the future of WordPress themes in general, please write us a comment below. We are looking forward to hearing from you.

We also want to thank all of you, who support our Aino project so diligently already. Your messages, bug reports, suggestions for improvements and your amazing feedback help us so much.

Join the conversation

Leave a Reply

Your email address will not be published. Required fields are marked *