It was about a year ago. I was happily designing a theme for aspiring novelists. I wanted to get ahead of the competition and market a theme specifically to writers who would be attempting the National Novel Writing Month 2019 challenge.
NaNoWriMo, for short, is a whirlwind of a month where 1,000s of people from around the world clatter away on their keyboards to pen a 50,000-word novel manuscript. One month of sheer willpower, coffee by the gallon, and sleepless nights in exchange for glory. There are no grand prizes or guaranteed publishing contracts at the end of the journey. You nab a certificate, a few coupons, and bragging rights. I completed the challenge in 2018.
Inspired by my win just months before, I built a theme for those who would be taking the journey the following year. I also wanted to broaden its appeal to anyone who might be an aspiring novelist but not necessarily participating in the challenge. Or, maybe even to someone who just published their first book. Perhaps this would be an opportunity to bring a few new WordPress users into our community.
I outlined a homepage layout to show how users could feature their latest book with a purchase button. Then, it dawned on me.
How could someone build this book sales page without solid experience with the block editor?
I had been using the Gutenberg plugin for months upon months before it landed in WordPress 5.0. I knew the ins and outs of the system.
The design was simple. Using the core media & text block, a heading, a couple of paragraphs, and a button, I had created something that may have been too complex for the average user. I had not even gotten into the custom color, font-size, and block-style options that accented the layout.
This simple combination of blocks had the potential to be overly complicated for some. I had other plans for more complex layouts. Other theme authors had taken on bigger combinations of blocks. For end-users, they were likely stepping into a world that did not make sense. They would see beautiful theme demos and grow frustrated when they could not make things work. The block editor was not, and is still not, intuitive enough for the least-knowledgeable users to build layouts beyond the basics.
I opted for a step-by-step tutorial to guide my users into building this simple book-selling section. However, documentation is not always the best answer. Even when users find and read it, the results are not always accurate. It would have been far simpler to have a button that, when clicked, inserted this section directly into the editor. The user could then customize it to fit their content.
That is where block patterns come in.
Theme authors should be able to build unique and complex combinations of blocks with custom styles. Users should be able to just make it look like the demo.
Since “building” (I use this term loosely) my first WordPress theme in 2005, I have either seen or attempted every manner of solution to this problem. Page templates. Theme options. Shortcodes. Widgets. You name it. They have all been tried before. Each method provided major hurdles for users. Some (ahem, shortcodes) left users’ content in shambles and created a lock-in effect where they ended up tied down to their theme.
It is long past time for something new.
What Are Block Patterns and How Will They Improve User Experience?
What happens when a user wants to build a layout with multiple columns of pricing options as shown in the above screenshot? Good luck. Most could not produce it with the block system. Even without block patterns, the theme would need some custom block styles to make it possible. Plugins will likely fill in the void for such complex output and have been tackling pricing tables in various ways over the years. What if we could produce layouts like this within themes or in much simpler plugins?
It is possible with block patterns.
Put simply, a block pattern is a group of blocks. Core WordPress, themes, and plugins will be able to register patterns with predefined settings attached to them.
From the average user’s point of view, block patterns are predefined sections they can use to create layouts. These layouts can be something as simple as the book section from earlier in this article to the more complex pricing columns. With these patterns available, users will be able to create complex layouts at the click of a button.
The block system laid the foundation for a much different and forward-compatible future than what we have experienced over the years. At the end of the day, most blocks are just plain old HTML. Block patterns will be nothing more than the registration of a group of these blocks. When a user switches themes, their content remains intact, even when their new theme does not register the same patterns.
Version 7.7 of the Gutenberg plugin shipped the first iteration of an interface for patterns. It is basic and will undergo several more iterations before it is ready for use in production. Eventually, there will be a fully-integrated interface for selecting from multiple patterns. The user sees something they want to use. They click on that pattern. It gets inserted into the post.
No more complicated theme options. No more shortcode soup. No more hours of frustration wondering why you cannot build that custom front page shown in that carefully-crafted theme demo.
I may be a tad optimistic. Block patterns will require massive buy-in from the theme and plugin developer community. While core WordPress will ship several popular patterns by default, they will in no way cover the breadth of design that is possible when theme authors put their artistic skills to work.
I have always been excited about the block editor. However, it has always felt like I was more excited about the potential than the end product. I was in a constant state of waiting for it to become the thing I thought it could be. Yes, I am still waiting. However, tinkering with an early version of the pattern system feels like we are getting to the point where we can do those awesome things the editor was supposed to allow us to accomplish. It has been a long wait, and we still have a bit to go. But, I have a renewed passion for the project after experiencing the work that has been done thus far.
This sounds like a real game changer. Something really fundamental than changes How Things Work. I’m excited to see it.