In 2018 it was released together with version 5.0 of Wordpress, the block editor called Gutenberg. With the use of this editor each resource used within a page or entry such as titles, paragraphs, headers or footers, among others; is considered a block.

In other words, a set of blocks will make up the design of each page of your website.

But Wordpress, in its effort to make the process of creating web pages even easier, especially for those who do not know anything about programming, later incorporated block patterns.

Next, you will discover what these block patterns are and how you can use them so that you can create impressive sites in no time.

What are Block Patterns?

They are pre-made layouts made up of a set of blocks that you can incorporate into your website in just seconds. Imagine that you want to build a house and you get both the kitchen, the bedrooms and the bathrooms, ready to integrate into the space you want.

This is what a block pattern does for your website. It allows you to create your own templates in a matter of seconds, through the integration of several of them with various functionalities.

You can create your own patterns and reuse them whenever you want, to speed up website creation. But, you can also share them with the robust Wordpress community.

Block patterns were introduced to Wordpress through version 5.5. Some of them come by default in the editor, but can also be added through themes and plugins.

These default patterns can be found by clicking the "+" button in the top left corner of the WordPress post/page editor screen.

There you will see 3 options, one of them says Patterns.

Benefits of Using Block Patterns in Wordpress

Block patterns will bring certain benefits to the process of creating custom web pages, including:

Saving time and effort

Patterns are blocks of code that really work and that you integrate into your Wordpress website in a matter of seconds. This way you avoid incompatibility problems or development errors that will require more time and effort to make your page work.

Flexibility

You can include and eliminate patterns immediately, adjusting the design every time you need it without complications.

Makes it easy to demonstrate themes

It is possible to quickly create themes to show as prototypes that must be approved by your client, superiors or work team. So once you get that approval, you'll already have part of the work done.

How to Use the Block Patterns of the Official Wordpress Page?

The official Wordpress site includes an exclusive section with more than 100 full pages of block patterns that you can copy, paste and adjust to your website according to what you need.

This is a great resource that is fed frequently thanks to the extensive Wordpress community.

If you browse this page, it will be easier to understand what we mean by block patterns. You will find options that allow you to include buttons, headers, columns, images and text, such as the one shown below:

You can copy this pattern and take it to the design of your website to show your work team. At the top you have options so you can see how this pattern looks in different sizes.

In the upper left part of this page you will find a button that will allow you to copy the pattern that you must then paste into the editor of your Wordpress site.

Once you paste it into your editor, you can customize the pattern to your liking to make your website stand out from the rest.

How to Create Block Patterns for Wordpress?

You can also create your own block patterns and the truth is that it is not difficult at all. These are the steps.

1.- Create the design you want

The first thing you need to do is create a design that fits what you have in mind for your website.

Through the Gutenberg editor, insert all the blocks you need that allow you to include the specific functionalities that meet your criteria. This can be images, texts, backgrounds, headers or buttons, among others.

Adjust them as desired to add structure and enhance the look. That is, change their sizes, colors, height and everything you want.

2.- Select and copy the blocks

Once you have the exact layout you want, you need to copy the HTML source code you've thrown into your editor. It's very simple, just manually select each block that integrates your design, with the ALT key pressed continuously, until you reach the last one.

After this, click on the button with the three dots that is located in the upper left part of the editor and select the Copy option. This will copy the HTML code of all the blocks at once.

3.- Escape the HTML code

For the code to work well with the WordPress Block Patterns API, the HTML code must be escaped. For this, we recommend that you use the tool Code Beauty.

You just have to paste the HTML code in the section that says Enter the string or Enter the String and click on the Escape button. Then, at the bottom you will find a button that says Copy to clipboard or Copy To Clipboard, press a click there.

4.- Insert the code in the child theme

You will need to create a child theme in Wordpress and locate its functions.php file to include the newly escaped code. With this you will be able to have your personalized theme in perfect working order.

Conclusion

Block patterns are pre-configured HTML code structures intended to speed up the creation of custom-designed web pages.

This helps save time and effort in setting up a website, as well as providing flexibility and making it easy to demonstrate to interested third parties.

You can use default block patterns that have been built into the Gutenberg editor itself. Also the models that are available on the official Wordpress page or create your own.

To create a Wordpress block pattern you only need:

●       Create the design through various blocks.

●       Select and copy the HTML code of the inserted and adjusted blocks.

●       Escape the HTML.

●       Insert the code into a previously created child theme.

Thanks for your time ;-)