Gutenberg Block Patterns: The Future of Page Building in WordPress

Gutenberg Block Patterns: The Future of Page Building in WordPress

While the block editor absolutely leveled-up the WordPress publishing experience, building beautiful web pages is still quite a challenge.

It’s like we’re handing folks the International Space Station LEGO set — without any sort of help to build it. Sure, the cleverest master builders will likely figure it out, but what about everyone else — the other 99%? Now if that set came with four or five assembled “chunks” of the ISS, completing the build would be much simpler. Maybe even simple enough for that 99%… 

Enter Gutenberg block patterns: thoughtful arrangements of blocks that deliver entire sections of a page, with just a single click.

Why block patterns?

The concept of using predefined sections of page content in web design is not new by any means. Most website builders — Wix, SquareSpace, and Weebly included — have long provided patterns of some sort to help people design websites. Below is a screenshot of how “patterns” are perceived at SquareSpace, although they’re referenced as “sections.”

Sections, as seen within the SquareSpace editor.
Sections, as seen within the SquareSpace editor.

A number of WordPress plugins have already implemented pattern libraries of their own as well, i.e. Design Library, Atomic Blocks, and Stackable. While these plugins are solving a real problem, the varying mechanisms and underlining architectural differences make for a fragmented experience.

Thankfully, the Gutenberg contributors are actively discussing how to unify the implementation, interface, and overall experience of block patterns.

A mockup of patterns within the Block Library
A mockup of patterns within the Block Library

The idea around patterns is that themes and plugins may easily add beautiful pre-built block “sections” to the editor. So instead of having to add each block of a complex layout one-by-one, you’ll have direct access to any available patterns within the Block Library. 

On top of that, we’re exploring the interaction of bringing up patterns first, when the sibling Block Inserter is clicked (the little “+” icon between blocks). I think this will be particularly huge for improving the editing experience.

Adding patterns to theme or plugins

While the API is yet to be officially defined, there have been discussions (WordPress Slack link) around what the Block Patterns API could look like. In short, it may look very much like the new Block Variations API

This means that theme and plugin developers will likely be able to configure a collection of patterns with only a name, description, array of blocks using the Block Template API, and example content (pre-defined structured data for the pattern preview). 

So do you need to know Javascript to build these patterns?

Nope. While I do encourage developers to learn Javascript — as the programming language is becoming ever so important to WordPress — adding patterns will likely be accessible in PHP, as registering Block Styles and Block Variations are today.

For example, it is entirely possible that block patterns may be added just like how the register_block_style() function works: 

Add tons of fun filters to images with the Altered Reality plugin (which uses block styles).

Theoretically, patterns could be added programmatically, with Javascript or PHP, using a very similar approach. Cool, eh?

A future of patterns

I’m stoked about what patterns bring to the block editor: simplicity. We’re tackling one of the more difficult parts of site building — actually starting — and making it more manageable. And in the very near future, folks will be able to install patterns from WordPress.org, right within the block editor.

We may even have a separate area on WordPress.org just to showcase beautiful patterns for everyone to use. Now that’d be awesome.

And on a totally different front, agencies and freelancers will be able to flesh out commonly used patterns throughout their websites — making hi-fidelity mockups a breeze.

Chime in

I’m confident that forming this singular experience around the implementation of block patterns will only further improve the publishing flow within Gutenberg. And I’m particularly excited for a possible open source pattern library on WordPress.org, bringing creativity and site building with the block editor to the next level.

Patterns will also be great for theme developers to capitalize on; creating a beautiful collection of possible layouts for a particular theme. Patterns may become a catalyst for folks who’ve put off optimizing a theme for Gutenberg, creating an on-ramp of sorts.

2020 is going to be a huge year for WordPress, partly because of the fantastic work going into block pattern — but also global styles and full site editing.

I can hardly wait for all this to land!

Anyhow, check out the issue on GitHub to catch up on patterns and jump into the details. Real-time discussions for design take place in the #design channel within the Make WordPress Slack channel (registration required) and the weekly Gutenberg design triage meeting occurs on Wednesdays at 17:30 UTC. 

I’d love to see you there to chat patterns!

  1. Hi Rich. Awesome article. We’re just as excited about the future of WordPress with Gutenberg.

    A lot of what’s being done today is heavily based on adding presentational elements, but we’re really excited about what can be done with Gutenberg to add new functionality. For example, we’ve built a few Gutenberg plugins to protect and drip content on membership websites. Presentation-oriented functionality blocks, in our opinion, will be just as key in transforming the future.

  2. This is a great article! The block patterns is very interesting and useful for most users. I can imagine a bright future when themes and plugins provide custom layouts/patterns to build the websites. Ordinary users will benefit from that and they probably less require a page builder plugin.

  3. I’m a little overwhelmed by the number and pace of changes but all you can do as a developer is to learn and adapt.
    I’m sure that web artists can sleep well. Beauty will always come at a price.

  4. Hello,Mr Tabor ! I read carefully Your slides from WPBlockTalk and I agree with You that everyone should have at least intermediate level of knowledge of Javascript and master it but the feature in block patterns which I like the most is that requires ZERO knowledge of Javascript, because I’m still a novice in this language. Python3 is my current endeavour.
    register_pattern function requires only 2 arrays.
    And to be hooked to” init”. I can do that or at least I think I can. And the possibilities are endless for a PAGE building & editting.

    Regards!

    P.S. I’m a huge fan of Gutenberg and fill site editting but not a fan of page builders.

Leave a Reply

Your email address will not be published. Required fields are marked *