Block Patterns Will Change Everything

Screenshot of a book sales group of blocks.
Book sales section from a custom theme.

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?

Screenshot of a pricing column block pattern.
Custom pricing columns section.

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.

26 responses to “Block Patterns Will Change Everything”

  1. This sounds like a real game changer. Something really fundamental than changes How Things Work. I’m excited to see it.

  2. In a sense, this replaces the need for theme templates (templates within the templates folder). Block Patterns are basically presetting a layout where you insert elements (content) into your post/page via filling in the blocks.

    I’m really curious how this will affect theme marketplaces like Theme Forest. I’ve brought this question up many times in the past about the direction WordPress is going with the block editor…actually, it’s not really an editor, it’s a page builder!

    …anyway, no one has really answered the question of what is going to happen to the 1000’s of themes on marketplaces like TF, and others?

    I also predict third party page builders are going to be obsolete despite what some are saying. With a business and investor mindset, if you were the big-wig of WordPress, wouldn’t you like to take out the page builder market and grab it for yourself?

    • The ThemeForest question is something I may explore more in depth. However, I think they will be just fine. The last I checked, there were more theme authors there than on WordPress.org who were embracing the block editor. Many will likely be ahead of the game when it comes to block patterns too.

      When block patterns drop in core, I imagine there will be a footrace to see who can ship the best and most patterns to end-users. Patterns will be another marketing bullet point. Authors there will be leaders and building features that other theme authors will want to replicate.

      I know ThemeForest has caught a lot of flak over the years (much of it coming from me), but the site and its authors know how to market theme products.

  3. I love this similar approach in Atomic Blocks which I understand was one of the inspirations for Block Patterns. In any case, I’m glad to see this approach making its way into core. Good show!

  4. Pretty cool! I can’t wait to see what transpires here. I hate having to use Amazon Product in a Post or a text widget with a book thumb and content right aligned in another div. I would hope someone creates a block pattern for albums, singles, and podcasts too!

  5. This is really exciting stuff. From my understanding, block patterns are similar to global block templates which the user can create and edit.

    I tried out the Gutenberg block plugin after a long time and I am impressed with the effort that the Gutenberg team has put in. The future of Gutenberg is surely bright.

  6. so WP built a native page-builder within its core editor? how much will this hurt Elementor and other page builders?

  7. Non-WordPress People are still using Classic Editors, as they found Gutenberg more complicated to edit pages.

    • Some are using the classic editor. I would wager that the majority of people using classic are those who were already familiar with that particular editor. While those people are important to the project, the numbers are a mere drop in the bucket in comparison to the whole.

      As for every non-techy person I’ve set up in the past year or so with WordPress, they all preferred the block editor. A couple of these were people who had previously given up on using WordPress before because the classic editor was just too hard for them. It did not behave intuitively enough for them to do the things they wanted. While the block editor isn’t perfect, it has given them the confidence they need to work with their sites.

  8. As someone who sees normal users struggle in my meetup with themes and page builders, I can’t wait for an easier interface and user experience. Thank you for this encouraging post Justin.

  9. Your Block patterns thems to have a lot in common with our “purpose first” design system. We build less then 50 screen wide patterns with an easy to use strategy. The editor has to think just about one thing: the content.

  10. I do appreciate that the Editor is taking further steps in its evolution but I’m worried that it is moving away from the dynamics of a site’s system that we all need. Whenever I’m seeing signs of static components (eg. a Pricing Table built with the Columns block and inner blocks), I’m seeing the path to the same lock-in effect that shortcodes provided.

    My primary question would be: if “users will be able to create complex layouts at the click of a button”, I’m wondering how the following clicks will look like?

    When the user wants to change the colors or needs to reorder some elements, without a parent system in place, he will still need to go down and learn the editor in-depth to make those changes consistently; thus weakening the initial purpose of block patterns.

    • I would argue the following clicks would strengthen the system. Patterns offer the initial layout. Then, users must customize the content. This allows them to see how everything works as they make their way through their customizations. Over time, it should build up their knowledge of the block editor but without the issue of figuring how to put the layout together in the first place. Eventually, more and more users may even learn to build complex layouts of their own.

  11. The key question here is whether block pattern designers would be able to lock down the layout of block patterns while allowing users to edit the content (images, text, etc…) within the layout in order to preserve a consistent design across a site.

    • I am unsure if that is part of the plans for patterns. It is possible to lock down things with block templates. I could see that being necessary for some patterns. However, in most scenarios where I would want things locked down, I would lean more toward templates.

    • I haven’t tested all of those, but I can say that Gutenberg Hub’s templates will be pretty similar in nature. They are one-click to copy and you just paste directly into the editor. Simple.

      The big difference will be that they will be available through an interface directly in the editor. So, it cuts out a step.

      One thing I have seen mentioned is the need for a sort of official “block pattern directory” for users. Perhaps that is something we may see at some point down the line. Having 1,000s of patterns in the editor would probably be cumbersome. But, connecting that to an API with search via WordPress.org could open up some possibilities.

      • Qubely already has its sections available directly in the editor through an interface, as Ghostkit and other libraries I tested. I wonder if this projects are being looked at and its developers being part of the process. No need to re-invent it, IMO.

  12. Block pattern is indeed a nice improvement for end-users, and very helpful to setup starter content.

    And it also emphasizes a part of Gutenberg, which is not good enough (in term of UX) to use.

    When I use nested blocks (cover, columns), I find it’s hard to see which blocks are inside. I think there’s a room for Gutenberg to improve this.

  13. You mentioned forward compatibility in themes, but after switching themes, will the patterns’ settings still be editable? Right now if I add a custom block and that plugin is removed, the block remains but isnt editable.

    Why dont we put patterns beside new blocks in a theme-independant plugin and keep styles separate in themes?

    • Patterns will not have user settings. Patterns will be nothing more than registering a grouping of blocks. If the theme registers the pattern, the pattern would disappear on theme switch, but the blocks that get inserted into the post will remain intact. The same will happen with plugins if they are deactivated.

  14. There will still be use cases for custom post types. Theme Forest sellers concentrate on niche so Gutenberg and block patterns will give them the ability to make better themes for their market.

  15. Hey everyone!

    I’m probably not very well informed but I’m getting the feeling it would be nice to start separate/create 2 branches of WP development. One more “user friendly” and the other more Robust: more enterprise/performance oriented.

    All this fuzz around Blocks is scaring me a bit. I understand the way is going: more user options, control, design, etc. and I’ve nothing against it but it seems WP is fading away from one of it’s most powerful features: Database control & cleanness – which can rapidly become a WP nightmare in what efficiency is concern.

    There are people/clients who just prefer to fill out some text boxes and that info appears in the frontend, well designed, as expected and with optimal performance.

    Maybe a 2 installation option for WP? “Guttie” and “Robust”..?

    I’m afraid template creation (the holly grail of all programming languages – well, at least the 2nd one after DRY) is getting behind.
    I feel WP is getting WET.

    All the best and great posts, Justin!

    • It is easy to feel a bit behind on information. The development behind the plugin has been fast and the roadmap seems to be missing some details.

      More user options and control does not equate to less developer control. The block system should also provide more flexibility and control with how developers build sites in the long term. Even the block template system today allows developers to lock down the blocks used in a post. Clients can simply pop into the editor and fill in their details. Granted, this works only on a per-post-type basis by default, but it’s a start.

      Front end template creation is not going anywhere. It is taking a different form, one in which can be done visually for those users who choose to go that route. This can also be locked down on client sites if needed.

  16. Block Patterns is something that I’m really looking forward to as a developer and owner of a small agency that works closely with clients. However currently it was far from actually usable – creating new custom block patterns at best is a bit odd and tricky. I know that this is way of evolution (Gutenberg was the same tricky b*stard in the beginning and now it’s a great thing to use), but still it’s good, it’s not yet there.

  17. As for me, classic editor is much better than block one. I tried my best but it’s really not convenient. Maybe someday I will give a shot, but not today.

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: