Going through my routine this week, I skimmed the latest WordPress theme releases and found a new project that supported the block editor. It even shipped a few custom patterns. While the design was nothing extraordinary, it was a solid theme overall. However, after spending the better part of today writing about it, I did not think I could move forward with the story. Something was bugging me.
It was the same thing I have felt with several others as of late. There were too many missed opportunities. The theme had the foundation, the underlying potential, to be more than it was.
The theme had a commercial “pro” version that users could purchase. However, nearly every pro feature relied on old-school tactics of upselling extra theme options. The one exception was a block-related feature that will be free as part of the Global Styles component likely to ship with WordPress later this year.
Where were the custom block styles? Where could a user snag some unique patterns? Extra nav menus, sidebars, color settings, and typography options are becoming less and less of a value-add for end-users. It is probably safe money right now, and I can understand the comfort of not taking too many chances.
Theme authors need to start shifting gears. Upsells need to come in the form of features that will not be available from stock WordPress. Right now, that means building unique block patterns and styles.
Exploring Pattern Ideas
In the last month, I have been tinkering with custom patterns. While I was in the design and development business for over a decade, what I was able to accomplish with the block editor alone — using no custom code — and a well-rounded block-ready theme is merely scratching the surface. We have far better talent in the WordPress community, and I want to see their artistry unleashed.
It all started with the WP Tavern Jukebox podcast — you should check out episodes #1 and #2 if you have not heard them already. Nathan Wrigley, the new host, pushed me enough to put my design-and-dev cap back on to implement some features that he needed. Over the years, I have not worked much with podcasting or any type of audio. This was new territory for me. Ultimately, the podcast inspired me to think about audio patterns.
What is possible with WordPress’s editor today?
I scoured the web for various layouts, looking for modern audio presentations. Numerous concepts were impossible for an end-user to implement from the editor alone. They would need extensive custom block styles from the themes themselves. And, there were several designs that I simply did not think could be done at all, but these typically had plugin-territory elements.
However, I did find ideas that I could run with and make my own. I started with a simple audio file from The Martian soundtrack — I had re-watched the movie the night before and was on a David Bowie kick.
It was simple. Just add Group, Columns, Image, Paragraph, Heading, Audio, and Social Icons blocks. I was happy with the result, and some of my Twitter followers responded positively.
Inspired by the support, I created an alternative layout. It was even simpler by adding Cover, Paragraph, Heading, Audio, and Social Icons blocks.
Based on the original pattern, I built one that used a SoundCloud embed instead of the Audio block. I also created another with some alterations that catered more toward podcasters.
As I dived deeper into this project, the more capable I became at creating layouts. I began to understand what some of the limitations were and piecing everything together around them.
One of the most problematic areas with the editor is that it does not hand over enough spacing control. Therefore, I had to make liberal use of the Spacer block, something I prefer not to use because it relies on pixel units and puts an extra
<div> into the markup. To build some patterns, I had to become a little less of a purist and just use the available tools.
That change in mindset opened some more possibilities. I built a couple more audio-related block patterns. They were, again, simple layouts, but I wanted to make them stand out visually with imagery that end-users could add. The goal is to give users one-click access to pre-designed sections, starting points where people can showcase their own creativity.
The next step was to start thinking beyond audio patterns. There is so much more others can do in that space. I wanted to venture out a bit more.
I have since built several other patterns like the following news-type article header that I would love to use on the Tavern in the future:
I could share more concepts, but this seems like an ideal place to stop. The goal is not to showcase my portfolio of patterns. It is to inspire our theme design community in hopes that they build something far better. I also wanted to show how easy it was to pop out a few patterns. Instead of hours of development time, many ideas were cut down to mere minutes. That is the power the block system provides today.
When I wrote about the block system creating commercial opportunities for theme authors in January, it was a theoretical post. This is a follow-up that puts it into a little more practice (without the actual selling, of course).
Imagine, as a theme company, you are building a freemium theme for musicians. You might want to include a few base patterns for users to choose from. However, there is an endless number of alternatives you could offer as part of a pro package.
I am sure there is already a theme author/company out there right now with a multi-purpose theme concept in mind that will eventually have hundreds of patterns. I can only hope that they have a solid categorization system or offer separate packages or imports.
The block pattern directory is slated to land alongside WordPress 5.8. At first, it will primarily be core patterns. However, others will be encouraged to contribute over time. This is a welcome feature for the platform, but it will never match every theme design perfectly. Each theme has its own design nuances. Each has different methods of solving problems.
The best patterns will come from theme authors themselves, especially when combined with custom block styles, packaged and marketed as part of their theme’s experience. Developers can wait until the entire market catches up or jump ahead of the game.