WordPress block patterns explained

It’s been a while since I felt calm enough to sit down and write something here on the blog. True writers block I guess. It didn’t feel good to be so quiet here and not share. But I think it’s also important to acknowledge that 2020 has brought a lot more challenges to us than anyone would have ever expected just a few short months ago.

Everyone’s plans changed. We thought we could be in Europe right now, connecting with friends at WordCamp Europe and spending time with our families. Instead we had to quickly find a new apartment before New Zealand went into a lockdown at the end of March.

By now we found a new “normal” and concentrating on our work is also a good distraction from all the difficult news surrounding all of us.

But now enough talking about world events and personal challenges. Over the last months a lot has happened in the WordPress and Gutenberg hemisphere as well.

One of those exciting new features that arrived in the block editor with the 7.8 Gutenberg plugin update are Block Patterns.

What are block patterns?

Until recently the only available option to create layouts in the block editor was to add block by block to your page or post.

With block patterns plugin and theme authors it can now prepare a collection of (nested) blocks for their users. This way we can provide ready-to-use website snippets like featured header sections, a team section, testimonials or more advanced multicolumn layouts.

Sample Block Patterns via the Gutenberg development on Github.

Block Patterns im Editor
Block Patterns can be selected directly in the editor.

Users don’t have to build the layouts in the editor themselves, but can instead choose a block pattern from a preview area and with one click have the complete layout available on their page including the block pattern sample content. Users then only need to exchange the sample content with their own content.

What advantages can block patterns offer?

Using block patterns will save WordPress users a lot of time creating their website. Block patterns also make it easier for creators to offer more complex block combinations to their audience. It’s a very flexible solution, since certain blocks of a block pattern can be deleted and exchanged with other blocks. It’s also possible insert different block patterns onto a page and then play around with their positioning (this is easiest, if each block pattern is grouped in one main parent block).

Great about block patterns is also that it’s not too complicated to create them from the technical side. Theme and plugin authors only need to build a layout in the editor and copy the HTML outcome into their theme or plugin code. Mel Choyce wrote a great technical tutorial explaining how to create block patterns.

Since block patterns make it much easier for users to include more complex layouts on their website, the editor experience becomes a lot more user friendly.

What can we expect from block patterns going forward?

At the moment block patterns are still very new and under development. You need the Gutenberg plugin to be able to use them. But with the upcoming WordPress version 5.5 (the release date is planned for August 11th) they will be available to use by default.

We are working on our first block patterns for our Aino theme and blocks collection.

First Aino block pattern designs.

As soon as our free Aino blocks plugin is available on WordPress.org, we will offer first block patterns for the Aino theme and blocks.

We decided to include our block patterns in the Aino blocks plugin, since users will need the Aino blocks for the patterns to work.

What do you think?

Did you already hear about WordPress block patterns and what do you think about this new feature? Are you excited and do you think it’s an important improvement for the editor?

Which WordPress user group will benefit the most from block patterns in your opinion?

Let me know your opinion and thoughts about the new features that are getting integrated in the Gutenberg editor. And please also ask any question you might have. I would love to hear from you.

0 comments on “WordPress block patterns explained

Leave a Reply

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