Full Site Editing - P5: What Are Block Patterns in Gutenberg? How to Create Them?
Tags: fse, patterns, gutenberg, metabox
Published: 2021-11-23 07:14:37

After the 4 articles in the <a href="https://metabox.io/series/full-site-editing/">FSE series</a>, we've received a lot of positive feedback from readers. In particular, many of them asked to have one more part about Gutenberg block patterns. So, we came up with a post that has everything you need about this feature, like what block patterns are, their applications, how to create one, and the good resources of block patterns. Let's spend 5 minutes reading now!

<!--more-->

<h2>What Are Block Patterns?</h2>

<blockquote><em>"Block Patterns are predefined block layouts, available from the patterns tab of the block inserter. Once inserted into content, the blocks are ready for additional or modified content and configuration."</em> - <a href="https://developer.wordpress.org/block-editor/reference-guides/block-api/block-patterns/">wordpress.org</a></blockquote>

So, in Gutenberg Editor, you will see a new tab call <strong>Patterns</strong> when adding a new block, like this:

<img class="aligncenter" src="https://i.imgur.com/WVS9oKl.png" alt="The Patterns tab in Gutenberg Editor." width="1200" height="628" />

These patterns are layouts made from blocks. They're often pre-made for the section like product introduction, gallery, article list, header, ... And they're classified into different categories:

<img class="aligncenter" src="https://i.imgur.com/eYzY13G.png" alt="Patterns are layouts made from blocks, pre-made for the section like product gallery, article list, header, ... " width="1200" height="649" />

With a block pattern, you can reuse it as many times as you want, and add it to different places on your website. Besides, you can also customize each block in this pattern to make it fit with the content you want. You can see that block patterns are extremely flexible, easily customizable, and highly applicable to many places. Therefore, a lot of WordPress users believe that block patterns can replace Customizer to some extent.

Notably, from WordPress 5.5, block patterns are completely integrated into WordPress core.

<h2>How to Create Block Patterns in WordPress</h2>

Along with the available patterns in Gutenberg, you can create your own block patterns easily. Here is how you do it:

<h3>Step 1: Create a new block pattern in Gutenberg</h3>

First of all, in Gutenberg Editor, just use the blocks to create a group of blocks with your own desired layout, like what I did here with the Column, Heading, Image, and Paragraph block.

This group of blocks and layout is the block pattern that I want to create.

<img class="aligncenter" src="https://i.imgur.com/LndSpFs.png" alt="Use the blocks to create a group of blocks with your wanted layout" width="1200" height="629" />

Then, switch to the HTML editor and copy the HTML code of the blocks and layouts you've just created.

<img class="aligncenter" src="https://i.imgur.com/GbhmXSZ.png" alt="HTML editor" width="1200" height="629" />

<h3>Step 2: Register a Block Pattern in the function.php file</h3>

Next, to make the above group of blocks become a block pattern, we need to register a block pattern in the <code>function.php</code> file by adding the following code:

<pre>$block_pattern_about_us= 'the_code_of_the_above_blocks';</pre>

In that code, <code>$block_pattern_about_us</code> is the name of this code - to help you distinguish it from other codes easily. You can name it as you want, as long as it's easy to remember for the code below.

Now, continue with adding this code to the <code>function.php</code> file:

<pre>register_block_pattern(

'example-block-pattern',

[

'categories' =&gt; [

'text',

],

'content' =&gt;$block_pattern_about_us,

'description' =&gt; 'A block pattern to introduce your team',

'keywords' =&gt; 'about_us',

'title' =&gt; 'About Us',

'viewportWidth' =&gt; 800,

],

);</pre>

Explanation:

<ul>

   <li><code>'example-block-pattern'</code>: Is the namespace of the block pattern. You can name it as you want;</li>

   <li><code>'categories'</code>: is the category where you want to add your block pattern. Like I mentioned above, there are 6 default categories for block patterns in Gutenberg so you just need to select one;</li>

   <li><code>$block_pattern_about_us</code>: is the name of the code that you added above;</li>

   <li><code>'description'</code>: is the description of the block pattern;</li>

   <li><code>'keywords'</code>: is the keyword that users can use to search for this block pattern;</li>

   <li><code>'title'</code>: is the block pattern's name;</li>

   <li><code>'viewportWidth'</code>: is the width of the block pattern</li>

</ul>

Now, when you visit Gutenberg Editor again, you will see a new pattern in the category you want. This is mine:

<img class="aligncenter" src="https://i.imgur.com/Y9075KR.png" alt="A new pattern in the category of Gutenberg Editor." width="1200" height="606" />

Ok, you've done with creating a new block pattern!

<h2>Block Pattern Directories</h2>

Besides designing your own layout as I did in step 1, you can refer to many premade samples in many resources. You can copy or download the block pattern's code from these resources, and then do as the step 2 above.

Here, we collected the most prestigious block pattern directories resources for you. If you know any other resources, feel free to recommend them to us.

<h3>Fullsiteediting.com</h3>

As I introduced in <a href="https://metabox.io/resources-learn-wordpress-block-theme-for-developers/">part 4</a> of this series, <a href="https://fullsiteediting.com/block-pattern">fullsiteediting.com</a> is a reputable and trustworthy resource to learn about FSE. Additionally, you can find 7 block pattern samples on this site.

These samples are quite simple and basic. It also gives you the source code of these patterns so you can copy and use them immediately in Gutenberg Editor, or make them your own patterns.

<img class="aligncenter" src="https://i.imgur.com/RLdSmbi.png" alt="fullsiteediting.com is a reputable and trustworthy resource to learn about FSE" width="1200" height="611" />

<h3>Wordpress.org</h3>

In <a href="https://wordpress.org/patterns/">wordpress.org</a>, you have a large number of different block patterns in different categories. These patterns are pre-designed with images and content so they look really catchy. You just need to copy their code to use and change the content of the blocks on your whim.

<img class="aligncenter" src="https://i.imgur.com/Qs7ah05.png" alt="There are a large number of different block patterns in different categories of wordpress.org." width="1200" height="611" />

<h3>Gutenberghub.com</h3>

Along with the block patterns for one section or short content, <a href="https://gutenberghub.com/templates/">gutenberghub.com</a> even provides you with Gutenberg templates for the whole site. These templates are eye-catching for many different topics. It's also possible to copy the code of these templates and patterns to use.

<img class="aligncenter" src="https://i.imgur.com/Ff4Wtb2.png" alt="gutenberghub.com even provides you with Gutenberg templates for the whole site. " width="1200" height="610" />

<h3>Shareablock.com</h3>

There are nearly 30 block patterns in <a href="https://shareablock.com/blocks/category/block-patterns/">shareablock.com</a>. They are professional and modern with various topics for different purposes. However, to download these patterns, you have to register via email to receive the download link.

<img class="aligncenter" src="https://i.imgur.com/vFe7nop.png" alt="shareablock.com provides 30 block patterns." width="1200" height="611" />

<h2>Final Words</h2>

Block Pattern is a convenient and easy-to-use feature in Gutenberg. As you can see, using and creating a new block pattern is really simple, right? Even when you don't know much about code, you can still create your own unique ones or your website within a blink of an eye. Take advantage of these block patterns to build a beautiful website quickly and easily!

If you want to learn more about any feature of Full Site Editing, please let us know in the comment section below.