How to use block patterns

The power of the Gutenberg editor lies in its simplicity.  Using basic blocks, you can build advanced structures that allow you to present content on your website in an attractive way. After creating an extensive section consisting of many blocks, you’ve probably wondered more than once how to copy such a structure and use it on other websites. Most people save such a block in a reusable block directory and try to use such a created structure on other pages. If you have already dealt with this functionality, you may have noticed that this is not an ideal solution.

The biggest drawback? You can’t use them as templates; you can copy them 1:1 on the page. This means that you’ll encounter problems if you want the same section saved as a reusable block to have different titles depending on the page. Changing the content in one place is promoted to all areas where the reusable block appears.

Is there a better way? Yes! In addition to commercial solutions such as Kadence Cloud, there is also a built-in Gutenberg functionality –  block patterns. 

Block Patterns are a collection of predefined blocks that you can insert into pages and posts and then customize with your own content. This feature is provided for developers who can define ready-made section templates in their themes. Some plugins allow you to easily predefine sections composed of blocks without the need for coding.

How to define your own Block Pattern?

A solution that does not require coding is, for example, the Custom Block Patterns plugin. It allows for effortless saving and grouping of previously created block compositions.

But let’s start with the block structure, which will become our section template. In this tutorial, we’ll skip the steps necessary to create the section itself – we create it like any other in the Gutenberg editor. Let’s assume that the section already exists. I will use a previously created article section consisting of 3 blocks from the Kadence Blocks directory:

• Advanced Heading
• Row Layout
• Posts

One of the more frequently discussed topics on Gutenberg user groups is copying blocks from page to page. In my opinion, the best way to copy blocks is to copy content when you switch the editor to code mode. Suppose you want to isolate a section on a page that already has an advanced structure. In that case, this may not be the easiest thing to do and requires concentration and minimal knowledge of HTML to separate the end and beginning of the block. 

Let’s go through these steps one by one. Enter the edit mode of the article from which you want to extract the block pattern, go to the editor options by clicking on the icon in the upper right corner and in the Editor section, select the Code editor mode:

Once toggled, you will see the source code for the Gutenberg blocks:

It doesn’t look too nice, but we’re just here to copy it. Select the whole code and go to the tab with predefined blocks of the Custom Block Patterns plugin: 

Copy your code into the content box and name it so you can easily find the pattern in the list. I called my pattern the Articles Group. Once copied, you can save/publish the whole as you would any post or page. You can then switch the editor to visual mode (top right button in the editor) to make sure the entire structure has been copied correctly:

A few simple steps were enough to prepare a section template that we can repeatedly use, modifying the local settings and content without worrying about overwriting the pattern.

How to use Block Patterns

The use of block patterns is very similar to a single Gutenberg block. In the block toolbox, select the patterns tab:

After selecting the patterns tab, you will see a dropdown with a list of block group categories. We are interested in the last category of Custom Block Patterns:

After selecting a category, the defined pattern will appear below the dropdown. Just click on it to move the entire section to the editor area. 

This way, you can prepare a set of the most frequently used structures to reuse on the page. These can be both smaller sections and entire page templates. Isn’t it simple?