Guide

Create a Block Pattern with register_block_pattern in WordPress

08 AUG 2022

Patterns are useful for styling an individual post or page in WordPress. And WordPress offers block patterns from version 5.5

A pattern is a reusable block that can be used in a WorPress page or post with just a click. It consists of layout elements like image, button, text and more.

When you edit a post or page, you can go to the blocks tab and then choose patterns to insert a block pattern.

Figure 1
Figure 2

WordPress 5.5 onwards ships with some default patterns.

You can choose any patterns from the collection and enter into the page or post with a click. You can also edit the pattern from the block options on the right.

Editing the pattern means editing one or more individual elements of the pattern. When you select an element of the pattern, the editing options for the element appears in the block tab on the right.

Apart from the default patterns, we can also create custom patterns. WordPress provides a function register_block_pattern for this purpose.

The function register_block_pattern takes a name and an array consisting of a title, description and content.

The syntax of the function is as follows –

register_block_pattern( 'name', 
     array( 
       'title' => __( 'some title' , 'text-domain' ),
       'description' => __( 'some description', 'text-domain' ),
       'content' => 'some content'
     )
);

The name parameter can be any arbitrary name with a namespace.

Usually if I am adding this pattern through my custom theme then I will use the theme name for namespace and if I am using a custom plugin then I will use the plugin name.

So the name can be something like ‘tornadu/my-awesome-pattern‘, where tornadu is my theme name (also the namespace) and my-awewome-pattern is the name of the pattern.

As I stated earlier, please remember that it is all arbitrary.

Next, the title and the description both can be anything you want. Typically something descriptive of the pattern is used here.

So it looks like this now –

register_block_pattern( 'tornadu/my-awesome-pattern', 
     array( 
       'title' => __( 'Tornadu Awesome Pattern' , 'tornadu' ),
       'description' => __( 'Tornadu awesome pattern with text', 'tornadu' ),
       'content' => 'some content'
     )
);

The content parameter is still not filled in. Let us do that now.

The value for content is hard to create manually. Because it consists of code blocks and raw html.

So we adopt a roundabout way to generate the value. We will use the default blocks in WordPress to create the content value.

This is how it is done –

Open a post or page in edit mode. Click on the block tab as shown in Figure 1 above.

Choose a block from either blocks or patterns. It can be anything – an image, text, audio, widget or any pattern available that you want to use.

Select the block/pattern. Add/delete any element you want. You can edit any element by selecting the element and then editing it from the right side.

After all the editing is done and you get the block/pattern as you want, then click on the three dots on the extreme right.

Figure 3

Choose the Code editor as shown in Figure 3 above

You will get a code similar to the one below (the content will be different of course!) –

Figure 4

Copy the code and paste as content value in register_block_pattern function.

You can now go back to the page/post and delete the added block/pattern and update.

Refresh the page/post in edit mode and click on the block tab again and then choose patterns from the resultant options window.

Choose the explore option as Uncategorized.

Figure 5

Your created pattern will show up. Click to select and enter into the page/post.

Your pattern is now available for all posts and pages in your WordPress installation.

Every business deserves a website
हर एक बिजनेस के लिए एक वेबसाइट होना जरूरी है

GET YOUR'S NOW

Address

411 Kalikapur

Ishani Apartments, Kolkata - 99

Contacts

support@webdesignvista.com
Phone: +91 9903490874
Fax: +91 9903490874