Blockbase WordPress theme as seen from the site editor.
Any WordPress company that builds and maintains themes worth its salt is already doing at least some preliminary work as WordPress inches ever closer to bundling its upcoming block theme system. Automattic’s Theme Team is no exception. Ben Dwyer announced the team’s new Blockbase parent theme on the Theme Shaper blog yesterday. It includes support for global styles and block templating.
The theme is based on the classic, block-editor-ready Blank Canvas project that Automattic launched in January. Until a few days ago, it was even named Blank Canvas Blocks. I have been checking in on the team’s work in the past couple of months, waiting to see how Blockbase and Mayland Blocks, a child theme based on the team’s original Mayland, were coming along.
The team has built a well-rounded system that should keep them from overhauling each block theme they create for WordPress.com every time there is a change. For theme authors who have yet to dip their toes into the block-theme pond, it might also be the starting point they need.
The Holy Grail of some block theme designers will be creating a project with little more than a theme.json file. The goal: let WordPress generate all the CSS via setting and style configurations. It will never be possible for all theme authors to achieve their design goals through this — most will need at least some custom CSS. And, whether such a goal is A Good Thing remains to be seen.
Nevertheless, the future of theme design will lean on JSON-configured and generated styles. Blockbase leverages this system to create a standardized set of guideposts for its eventual child themes. This ensures that creators are not continually updating their themes as block styling rapidly evolves.
Blockbase serves as a bridge between what is currently possible to configure via a theme.json file and what will be possible in the future.
It is the modern-day Underscores (_s) for blocks, and the WordPress theme design community will need such a project moving forward. They will need a starting point and educational tool, and Blockbase is just that.
The latest version of the Gutenberg plugin only covers a fraction of what it and, eventually, WordPress will handle in the coming months and years. However, it does allow theme authors to add custom settings via the settings.custom key, creating their own CSS variables that are automatically output in the site’s head. The Theme Team used this feature to their advantage. Where Gutenberg does not currently support a setting, Blockbase has a custom theme.json parameter. The theme then uses the generated CSS variables in its stylesheet. As Gutenberg and WordPress eventually support more of these settings out of the box, the team can simply remove unneeded code.
The theme is not altogether unopinionated. “Blockbase is intended to be a representation of all the theme style settings that we believe should eventually live in Global Styles and be configurable by users,” wrote Dwyer. Block theme development could still change in unexpected ways as the system continues to be refined, and the theme will need to change along with it. Bumps in the road should be expected.
It is a project that soon-to-be and current block themers can learn from. While it is currently available via GitHub, Dwyer said the team can investigate making it a npm package if there is enough interest.
One of the most unique things the theme does is work with the theme.json settings via PHP. In Blockbase’s functions.php file, it plucks out font-family names registered in the JSON file. It then automatically loads their associated stylesheets from the Google Fonts API. While it is not documented in the code (it should be), I am taking an educated guess that the goal is to allow child theme authors to declare fonts in their own theme.json files and for Blockbase to handle the loading.
The code is relatively simple. It is the technique that matters.
As developers grapple with the changing nature of WordPress theme architecture, they will need to find new solutions for some of the old problems they previously solved in a PHP-only world. With most theme configuration moving to JSON and templates to HTML, it can be easy to feel like they are losing that dynamic nature of PHP. It was something reliable, and developers have spent years honing custom systems around the old WordPress.
The new WordPress delivers a more robust set of design tools out of the box, but it can seem a bit foreign. That is why seeing real-world code examples of how others are handling these features is a vital step in transitioning more theme authors to block-based development.
This may be a small code sampling, but I am impressed by the clever thinking. In my journey to learn more about how block themes work, I often find myself hitting a brick wall, fighting against the system. This code works with it instead of against it.
I do not often write several paragraphs about one function that spans a mere 21 lines of code, but I am still a developer at heart and love seeing elegantly simple solutions. It is not about the font-loading technique; it is about solving problems. This code will undoubtedly be copied many thousands of times over in the coming years and modified for many more thousands of uses. If you are a theme developer and do not see it yet, you will.
Like this:
Like Loading…
