Exploring the First Block Patterns to Land in the WordPress Theme Directory

For months, I have eagerly awaited the official release of WordPress 5.5, an update that promised to put the long-awaited block patterns system into the hands of theme designers. I may sound like a broken record at this point, but patterns have the potential to revolutionize WordPress theme development, even more so than the upcoming full-site editing.

The feature should drastically change how developers create WordPress themes. If used to its full potential, theme authors can rid themselves of dozens of theme options and drop most of their page templates. They can focus less on programming and more on designing, which is what themes are really all about.

To understand why patterns are so revolutionary, you must understand the underlying issue that it solves for theme authors and, ultimately, end-users. Throughout all of WordPress’s theming history, there has been a single overarching issue that has caused untold numbers of issues. This is an issue that has been the root cause of multiple guidelines added to the WordPress.org theme review system.

This single issue can almost exclusively trace its roots back to the big question: how can theme authors build custom homepages and easily allow end-users to recreate them?

Whether it is a slider or columns of info boxes or a call-to-action section, WordPress has never truly provided a solution that theme authors could rely on. To be fair, many developers have built creative and unique systems around the limitations of the platform. However, those systems were specific to a single theme or a set of themes from a single company. There was no standard. There was nothing that would guide theme designers to simply design whatever interesting thing they had in their minds and allow users to simply fill in the content.

While I say that the homepage of the site is the underlying issue here, the problem is really extended to any page on the site. The homepage design is a bit like the theme author’s signature. It allows designers to showcase their talents and draw users in. And for over a decade, theme authors have tried a thousand different methods just to get this one page right.

Patterns are so much more. The system does not require that theme authors become PHP ninjas to piece together beautiful designs. It does not limit users to a theme options panel for building their homepage — they can build out any page on their site with the patterns their themes offer.

The big thing is that it renders the “how do I build a custom homepage” question moot. Theme authors never need to think about that question again, at least not in the way that they have in previous years. Theming is moving away from building designs on a page level and toward designing individual blocks and sections (patterns). The focus is much more atomic, which provides users with more flexibility and freedom.

Because I could not wait for weeks or months longer to see what theme authors built within this system, I wanted to take a peek at what the current themes in the official theme directory were doing. There was not a lot to look at, but at least some theme authors are willing to be the pioneers in this new era of theming.

Currently, the Block Editor Patterns feature filter for the directory is not working. Technically, theme authors are not allowed to add the block-patterns tag to their themes, but there is a patch available which should fix the issue soon.

Patterns So Far

Right now, the theme directory only has three themes with block patterns. It is not much to go on, but it is interesting to see what theme authors are building so far.

UXL Themes recently updated its Cordero theme with several blocks. One of the things I like about how Cordero added its patterns is that it created a custom “Cordero” block pattern category. Patterns can exist in multiple categories, but having all of the theme’s custom patterns consolidated to a single group made discovering them much easier. This is a practice that I would like to see more of going forward.

Cordero’s patterns are primarily geared toward the typical business layout. It includes a couple of hero-type patterns, some features/services boxes, and pricing tables.

Cordero theme block patterns.

The Inclusive theme by Themes Team representative Carolina Nymark has several patterns (it is also a solid theme if you’re in the market for a good accessibility-ready option). The most interesting patterns of this theme are its two-column patterns with sidebars. Nymark has essentially created the “body” of a page with patterns. One adds a sidebar on the left and the other pattern adds it to the right. Both patterns have a main column for adding custom content. The sidebar column is decorated with widget-type blocks by default.

Inclusive theme pattern with sidebar and content columns.

What makes these patterns unique is that they are almost like a stepping stone toward full-site editing — all that they are missing is a header and footer. Admittedly, I was unprepared for this sort of pattern and expected patterns to be used for smaller sections, but I am a fan of the experimentation in the Inclusive theme.

Nymark has two of the current three themes with block patterns in the directory. Her Deejay theme adds a single pattern, which allows the user to create a DJ profile section on their site. It combines columns, social icons, the latest posts list, a video embed, and more.

Deejay theme profile pattern.

Overall, I like the early exploration of this new feature. It is never easy being the first to try things out, so I applaud the theme authors for paving the way. We’re only a week into the WordPress 5.5 release, but I am excited to see more.

How Well Do Patterns Transfer Between Themes?

One of the promises of the block system is that it allows users to switch between themes and maintain their content. The idea is that each theme will style all the blocks in such a way that the front end output does not look broken.

While there is merely a small sample size of three themes, I did hit some content styling issues when switching between them.

Generally, the more complex a pattern and whether the pattern employs custom classes decides how well it would transfer from theme to theme. Images could present an interesting problem too if the user decides to not replace a pattern’s image with its own. Because the image would exist in the theme folder, if the theme is deactivated and uninstalled, it would no longer exist.