WordPress has recently released the new update, 5.5 Eckstine. The update came with loads of new features like the ability to enable auto update for any plugin and theme, lazy loading images, XML sitemap (by default) and among them is the Block Patterns feature. This new feature will have a massive impact on the design experience. In this article, lets find out how to use block patterns feature in WordPress.

What are Block Patterns?

As we know, the Gutenberg editor has become the default editor in WordPress. Some users still prefer the Classic Editor over the Gutenberg (Block) Editor. But this new Block Editor is more flexible, has more features, looks modern and appealing to the eyes.

When we want to create a layout using block editor, we have to add sets of blocks. It requires a lot of work to create a perfect layout. For someone who doesn’t have much experience in this, the thought of creating sets of blocks can be scary. Just think about the services layout, it is not easy to create something like this.

Block Patterns Sample
Sample of ‘Services’ Block Pattern via the Gutenberg development on Github.

The block patterns will completely change the game. Basically block patterns can be said as a ready made collection of different blocks. It can help in creating complex layouts easily and with a few simple clicks.

How to Use Block Patterns

To use the block patterns, you’d first click on + button, which is used to add a new block.

add block wordpress

This will open the screen from where you can add new blocks, and also add new Patterns.

Now you can go to the Patterns panel and choose your desired pattern.

How to add Block Patterns
You can preview the patterns in the panel.

Let’s say you want to add buttons to your post/page. Go to Patterns and choose your desired Buttons layout. Two or Three are the options we have now. Just click on it, and it’s going to insert the buttons to your post/page.

Customising the Block Pattern
After adding the buttons, you can change the sample content as you wish.

Of course this is a simpler example, but it should give you the idea of how the block patterns work. Let’s take the Services layout, for example. You can go to the Patterns section, and click on your desired Services layout and it’s done, just like that.

Block Patterns example
Sample of ‘Services’ Block Pattern via the Gutenberg development on Github.

The Benefits of Block Patterns

If an average user wants to create pages, he can find many tutorials for it. Sometimes even watching a tutorial and following step-by-step instructions do not give us the desired outcome. This block patterns will allow users to straight away place sets of blocks and build pages easily.

Think of it as a group of reusable blocks or theme templates; preset according to your needs. You don’t have to go through the hassle of finding the right theme options. No unnecessary coding problems, and most importantly, it’s going to save a lot of your precious time.

Right now, the Gutenberg editor has patterns for buttons, columns, text, headers, and gallery. It’s going to take some time for the developers to add some complex patterns, but this is just a beginning.

This block patterns feature has started a new race between the theme/plugins developers. Since it has a huge impact on designing, users are eagerly waiting on what’s coming next.

Sample of Block Pattern via the Gutenberg development on Github.

There’s also an ability to add new blocks directly from the editor. WordPress now comes with block directory for single block plugins from where users can search and install new blocks directly from the editor.

wordpress block directory

For example, let’s say you’d like to add a “pricing” layout. For this you can search for this pricing block and then directly install it from the editor. This will install the block instantly without navigating away from the page and then you can start editing/customizing the newly installed block. That’s really easy, right?

To remove the newly installed block, you can simply go to the Plugins page and from there you can deactivate and remove it.

Conclusion

The users will be allowed to edit, delete, or exchange certain blocks of a block pattern. This will give us the freedom to move things around precisely the way we want. Changing the theme and plugins will also not affect the pattern added by the user.

The UI received a significant update with the Gutenberg 7.7 update, and now it’s faster and smoother than before. The editor experience gets a lot better because of the flexibility offered by block patterns in creating more complex layouts.

So go ahead and add the block pattern in your WordPress page and try it out. This all new feature in WordPress 5.5 is really exciting, and easy to use.

What are your thoughts on this new block patterns? Go ahead and comment below.

Leave a Reply

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