Last Thursday, Automattic announced its new Spearhead theme to WordPress.com users, which primarily focuses on podcasters. However, the team has marketed it toward content creators in general. It is a child theme of the company’s recently-released Seedlet theme. Cece Yu originally created the design for the Spearhead podcast, which is currently in use on the website.
Spearhead is not just a theme for WordPress.com users. Self-hosted WordPress users can expect availability in the future. “Adding Spearhead to the themes directory is on our to-do list,” said Jeff Ong, a designer at Automattic. “Just haven’t gotten round to it yet.”
For self-hosted users who want to give the child theme a spin right now, Automattic hosts all of its free themes in a GitHub mono-repository. The Spearhead theme is located in its own /spearhead sub-directory.
The announcement post said that the theme is fully block powered. This would be better reworded to say that it is a block-first WordPress theme. When full-site editing lands in core WordPress, we can start saying that themes are fully powered by blocks. Until then, it is just the content that is made of blocks. And, Spearhead’s parent theme is a prime example of a solid block-first theme. I imagine it will be the springboard of many upcoming themes from Automattic’s theme designers, whether that is in the form of a building child themes or using it as a starter.
Given Spearhead’s podcast roots, the development team wrote a small function to locate an Audio block from the post content and present it on the blog and other archive-type pages below the excerpt. In the past, this sort of feature was difficult to achieve because of little-to-no standardization on audio output. However, the block system makes it possible with just a few lines of code.
Automatic Dark Mode Support
One of the more interesting aspects of Spearhead is its support for users who are browsing the web in dark mode. This setting is located in various locations based on the user’s operating system. However, when enabled by the user, the theme automatically detects this and switches its color scheme.
This system uses the prefers-color-scheme CSS media feature to style for dark mode. This feature is generally supported by most modern web browsers. For browsers and operating systems without dark/light mode support, users will see the default light color scheme for the theme.
I generally prefer light color schemes, but this is one of the few dark color schemes that is at least comparable or maybe better than the light one. Far too often, I find dark schemes unreadable for long-form content, but the development team took care to select a palette that works well for whatever the site visitor chooses.
Custom Block Patterns
Spearhead removes the three patterns registered by the Seedlet parent theme. It then registers four of its own patterns:
- Related Posts
- Archive Page
- Podcast Links
- Podcast Links List
The Related Posts pattern requires the Jetpack plugin to be installed. Currently, the theme does not check if the plugin is active before registering the pattern. Presumably, this is because Jetpack features are available on all WordPress.com sites. However, the development team will need to address this before submitting it to the WordPress.org theme directory.
The Archive pattern allows users to create an archive page on their site. It displays a search form, the latest posts, and the site’s categories. It is not quite as fully featured as a complete archive plugin. However, it does replace what is often the traditional archive page template shipped with many themes. The use of a pattern is a nice shift that gives users more flexibility to change the output than what is possible with page templates.
It will be interesting to see if more theme authors follow suit and reevaluate their theme’s page templates. Transitioning to a block pattern may be a better option in many cases.
The Podcast Links pattern outputs a Navigation block with links to sites that host podcasts. End-users will want to update the link URLs. The Podcast Links List pattern is similar. Surprisingly, it is not actually a list. It is a paragraph of links and does not have the same prefix text.
Looks like a pretty nice theme for simple portfolio type sites.