I released a new block theme today! It’s called Davis Blocks, and as the name implies, it’s a block theme recreation of my Davis theme.
I released my first block theme, Tove, in September last year. I’m still pretty happy with how Tove looks, and it’s been really cool to see what people have been able to build with it. I’m not happy with how Tove is built, though. Mostly due to the amount of custom CSS included in the theme.
Tove enqueues four CSS files:
- shared.css (7 K). Element styles and some custom helper classes, enqueued both in the editor and on the front-end.
- blocks.css (37 K). Styling for blocks and custom block styles, enqueued both in the editor and on the front-end.
- front-end.css (5 K). Front-end specific styles, including element styles and styling for alignments.
- editor.css (3 K). Editor specific styles.
The promise of block themes is that eventually, themes won’t need to include any custom CSS at all. A basic theme, without any custom block styles, should be able to get by just by using theme.json. Core is not there just yet – there are a couple of blocking issues, like alignment styles – but it’s getting pretty close.
Tove, with 52 K of custom CSS, is not even in the vicinity of that goal. Some of that CSS was necessary to create a functional block theme back in September last year (some of it still is), but most of it was me wanting to tweak the way the Site Editor handles things like alignments and margins, and style elements beyond what was possible with theme.json. Given the amount of custom CSS and how often there are changes to the markup, classes and CSS output for block themes, Tove will be a nightmare to maintain long-term. I didn’t want to repeat that mistake with whatever block theme I made next.
That’s when I thought of Davis.
Davis has always been one of my favorite themes. When I built it back in 2016, I wanted to create a theme that was as small as possible while still being useful. It also had to follow all of the rules on the WordPress.org theme directory. The result was a theme with just three PHP files and 17 K of CSS. Despite the small footprint, I think it’s still a good blogging theme for users who mostly publish text-heavy content.
I realized I wanted to do the same thing I had done with Davis, but as a block theme. So why not just recreate Davis as a block theme?
Most of the block themes released so far, including Tove, are geared towards building complex sites for businesses and organisations. Davis is a classic blogging theme with an emphasis on typography and long-form articles. It seemed like there was a space in the theme directory for a block theme like that. And since it is a block theme, users could always build on that simple foundation to create more complex layouts in the Site Editor.
Building Davis Blocks
I started work on Davis Blocks on Friday last week, just before a train ride to my parents. I’m always at my most effecient when working on trains. Tove was the starting point, but I ripped out almost everything, starting with the four CSS files. I took inspiration from the Wei theme by Rich Tabor on how to structure a block theme with as small of a footprint as possible.
Work progressed pretty fast during the weekend. The Site Editor has gotten a lot easier to work with since I created Tove, largely thanks to the new and improved List View. The fact that Davis has a pretty simple structure didn’t hurt either.
The next Monday, I submitted Davis Blocks to the theme directory. On the night between Tuesday and Wednesday, it went live.
My goal was to create as small of a block theme as possible. So how small is Davis Blocks? It contains:
- No JavaScript
- Less than 50 lines of PHP
- Less than 250 lines of CSS
- Less than 350 lines of theme.json
Davis Blocks has six template files – 404, Archive, Index, Page, Search and Single – and three template parts: Header, Footer, and Loop. Loop is included on the Archive, Index and Search templates to output the loop with post previews. The theme doesn’t include any block patterns at all. With the progress being made on the WordPress.org pattern directory, bundling block patterns in the theme folder felt like a step in the wrong direction.
All in all, the theme weighs about 248 K. 80 percent of that is the PT Serif font files and the theme screenshot.
The CSS in Davis Blocks
Since one of the goals with Davis Blocks was to include as little custom CSS as possible, it’s worth taking some time to look at the 250-isch lines of custom CSS that actually made it into the theme.
That CSS can be divided into five categories:
- Structural fixes. Primarily the CSS that give alignments an outer margin on smaller displays. It’s the same solution used by Twenty Twenty-Two, and is required until this issue is fixed. I think it’s pretty bonkers that it hasn’t been fixed yet, given how fundamental this is to creating responsive block themes.
- Overwriting Core styles. For example, the calendar block, the table block and the caption in the image block all have different colors set by Core that cause color contrast issues when the user modifies the theme colors in Global Styles. The theme needs to overwrite those styles to either inherit the color from the text color or to use one of the color variables defined in theme.json. A lot of theming headaches (when creating both classic and block themes) could be fixed by Core simply reducing the amount of CSS output out of the box. Who thought it was a good idea to set the text color of all image block captions to
#555, forcing every single theme to overwrite it? - Styling elements missing in theme.json. Some elements, like the buttons in the file block and search block, can’t be styled with theme.json settings yet (issue 1, issue 2). For them to match the theme and have color contrast, themes must include custom CSS. The same goes for button hover styles (issue) and link styles (issue). The Post Comments Form block barely has any settings for the elements it contains yet, so I include some CSS to make that look consistent with the theme as well.
- Block styles. Davis Blocks includes a custom block style – Diamonds – for the separator block, and custom block styles require custom CSS for styling. There’s been some discussions about allowing block styles to be specified in theme.json with different color and typography settings for different block styles, but more complex block styles (like the Davis Blocks separator, which has styled pseudo elements) will probably always require some CSS.
- Nice to have styles. Not all of the CSS in Davis Blocks is strictly necessary. As an example, I include CSS to give headings a larger top margin than bottom margin when they’re not the first element in their container, overwriting the Core blockGap styles for group children. I also tweak the default padding of group blocks with a background.
I’m hoping I’ll be able to remove more of the CSS included in Davis Blocks as progress is made on the issues mentioned above. There’s still some ways to go before block themes can get by without any custom CSS at all.
If you want to give Davis Blocks a try, you can download it from WordPress.org or install it through Appearance → Themes → Add New in your WordPress administration panel. I hope you like it!