As I have written in my last blog post, we recently rebuilt Aino from a classic theme to a Full Site Editing block theme. When you start working with block themes in the WordPress editor, the difference to classic themes becomes obvious pretty quickly.
All elements of a website, like the header, footer and all page templates, can be edited without code in the new Site Editor. Style settings, typography, and color settings can also be edited in the Site Editor via Global Styles.
You can edit Global styles so that your changes will be applied either to the entire website, or just to specific blocks. The result is that users can customize their entire WordPress website in the editor and changes are far less theme dependent. Customizations can be saved as custom Page Templates or Page Template Parts, and these new template will remain available even after switching a theme.
What makes block theme so different?
So, users will see a lot more customization options, but what is changing in block themes under the hood? What does the switch to block themes mean for theme developers? Will building new themes become easier or more complex?
Block Themes versus Block-ready Themes
At this point, we should probably quickly look at the different theme terminologies currently used. Block-ready themes are themes that support the WordPress block editor. They are still classic themes, though, build with PHP files. Users can make style changes in the Customizer.
Block theme files
Block themes on the contrary support the upcoming Full Site Editing features that will become available in the next WordPress updates 5.9 and 6.0. At the moment, we still need the Gutenberg plugin to get access the early stages of Full Site Editing. In block themes, users edit the entire website solely in the WordPress editor. Therefore, block themes are entirely built with blocks.
Block Templates and Block Template Parts
This means that all theme template files are .html files. The template file structure stays the same. You still have an index.html file instead of an index.php file and the file is still used for the main post query.
You also have page, archive, and single.html files. All these template files will be stored inside a block-templates folder.
Template elements that will be used in multiple template files are stored inside the block-templates-parts folder. Here, you can add your header.html and footer.html files. I say files since it’s possible to offer multiple footers and headers in block themes. The users can then go to the Site Editor and choose the footer and header they want to use on a specific page template.
This means using headers and footers with different content and different designs is a lot easier in block themes. We use a simple version of this new feature on our Aino website, so we can have headers with different background colors on different pages of the site.
The theme.json file
The new theme.json file is the most important new file in block themes. It’s like the control room of a theme. Theme developers store all kinds of core theme information in the theme.json. Font families, font sizes, the default color palette, gradients, the default content widths and so on.
It’s also possible to specify default style settings for specific blocks only. For instance, you can set the default font-weight to bold in the Heading block.
Most of the theme.json settings can then be customized by the theme user via the Global Styles settings in the Site Editor. Global styles replace the Customizer settings of classic themes.
The theme.json settings also replace the font-size and color palette settings previously stored in the functions.php of block-ready themes. The functions.php is still available in block themes, but it holds a lot less information.
Global Styles and theme.json options are still very much under development and will be improved in the next WordPress releases. The visual Global Styles are still pretty limited, but improvements are on the way. You can see a few new design ideas and approaches for Global Styles on GitHub.
Since the theme.json file is so new, I will write more on this topic in the next part of my little block theme post series. For now, you can find lots of helpful information on Carolina’s fullsiteediting.com website and in the Block Editor Handbook on WordPress.org.
Ask me questions
Do you have questions regarding block themes and Full Site Editing and all the changes coming up for themes in general? Did you already have a chance to work with a block theme or create a block theme yourself? If so, what is your first impression? Do you like the direction themes and the WordPress editor is heading? Please write me your questions or any feedback in a comment below, I’m excited to hear from you.
Leave a Reply