There are essentials that describe the minimum number of files you need to make a “valid” block theme. Then there are the essentials of a good block theme. These are the templates, settings, and styles for block themes that are simply non-negotiable at this point.
templates
You can get by with the one index.html
template, more or less like you could with a classic theme, but I also know you can do better than that.
Two template parts that I’ve found essential - and they’re probably not what you think - are a loop.html
and a content.html
template part for either displaying query content or post content.
Combine these with index.html
, single.html
, and page.html
and now you have the bare minimum of what I consider essential. Header and footer? Sure, but you can spend more time thinking about those after your theme actually displays content.
root padding
It’s necessary to add at least a little bit of left and right padding as a root style rule to prevent content from running up against the edge of the screen.
root padding awareness
Along with adding root padding, it is also necessary to enable root padding awareness to allow sections that explicitly want to run up against the edge of the screen to do so.
constrained layouts
Make sure that your templates are built around containers with a constrained layout. In the editor this means enabling the “Inner blocks use content width” setting. In JSON this is {"layout":{"type":"constrained"}}
.
Constrained layouts, combined with root padding and root padding awareness allow for page layouts that do not look completely busted.
layout settings: sizes
You’re able to set a content and wide size setting in theme.json and in my opinion you need both. The content size should be whatever is necessary to achieve a readable line length. The wide size, whatever width you would normally set for section containers.
These settings work by applying max-width to containers. Combined with proper use of root padding, you create useful whitespace along the margins of your layouts at any screen size.
PROTIP: Some blocks, like the cover block, can’t do a constrained layout on their inner blocks even though they probably should. You can manually apply padding using either of the content size custom properties to keep cover block content in line with the rest of a page: e.g. --margins: max(var(--root-padding), calc(50vw - 0.5 * var(--wp--style--global--content-size)));
or, half the difference between the viewport width and the global content size or the root padding, whichever is bigger.
fluid sizes
Two features I consider necessary to leverage are fluid type sizes and custom spacing scale.
My preference here is to combine fluid typography with a spacing scale using em
units, so the spacing adjusts along with changes to the font size, but that is just a preference. Having type that adjusts to screen size, however, is a requirement. Content must remain readable on large screens, and you must prevent over-sized text from breaking layouts on small screens.
now go forth and theme
At this point you have created a motherfucking theme compatible with the WordPress block editor 🎉
From this point we move from essential to required. Now it’s about design choices, and shipping thoughtfully created patterns along with your theme to help users build nice pages fast.