Experimental: Block patterns, the code

Download code example and image

register_block_pattern is an experimental feature that lets you combine blocks together into a pattern that you can then select and edit in the editor.

register_block_pattern_category registers categories that we can use with our patterns. Requires Gutenberg 8.2.

To follow along, please refer to the code example below the video.

The following functions are used:

register_block_pattern()

register_block_pattern_category()

get_theme_file_uri() for including our image.

esc_url() for escaping the image source link.

__() for translating our text.

In the example, I have also installed the plugin Ninja Forms and I am using their contact form block with the default form id.

Skip to the video transcript

register_block_pattern_category( 'contact-form', array( 'label' => __( 'Contact form', 'textdomain' ) ) ); register_block_pattern( 'theme-slug/cover-contact-form', array( 'title' => __( 'Cover block for Ninja Forms', 'textdomain' ), 'categories' => array( 'cover', 'contact-form' ), 'keywords' => array( 'flowers' ), 'content' => ' <!-- wp:cover {"url":"assets/images/flora.png","id":48,"dimRatio":65,"minHeight":946,"minHeightUnit":"px","gradient":"vivid-cyan-blue-to-vivid-purple","align":"wide","className":"is-style-prefix-rounded-corners"} --> <div class="wp-block-cover alignwide has-background-dim-70 has-background-dim has-background-gradient is-style-prefix-rounded-corners" style="background-image:url(assets/images/flora.png);min-height:946px"> <span aria-hidden="true" class=" wp-block-cover__gradient-background has-vivid-cyan-blue-to-vivid-purple-gradient-background"></span> <div class="wp-block-cover__inner-container"> <!-- wp:heading {"align":"center","className":"is-style-prefix-text-shadow","fontSize":"larger"} --> <h2 class="has-text-align-center is-style-prefix-text-shadow has-larger-font-size">Example heading</h2> <!-- /wp:heading --> <!-- wp:group --> <div class="wp-block-group"> <div class="wp-block-group__inner-container"> <!-- wp:ninja-forms/form {"formID":1,"formName":"Contact Me ( ID: 1 )"} --><div class="wp-block-ninja-forms-form">[ninja_forms id=1]</div><!-- /wp:ninja-forms/form --> </div></div> <!-- /wp:group --> <!-- wp:spacer {"height":30} --> <div style="height:30px" aria-hidden="true" class="wp-block-spacer"> </div> <!-- /wp:spacer --> </div> </div> <!-- /wp:cover --> ', ) );

Transcript

In this lesson about block patterns we are going to focus more on the code.

You can find the code example from the video in the course material.

We ended the previous video, by copying the code for our blocks.

To turn our code into a block pattern, we use a PHP function called register_block_pattern.

This function is very similar to register_block_style.

register_block_pattern( 'theme-slug/pattern-slug', array( 'title' => The visible name in the editor, 'categories' => An array of categories, 'keywords' => An array of keywords used in the search, 'content' => The block comment and markup, ) );

First you identify your pattern, and then you have this array,
where your code will be one of the values.

In the example, I have pasted all of the code inside the content.

You need to select a prefix, for example your theme slug, and a suitable name.

If you recall, when we used register_block_style, we used core as a prefix, and then the name of our block.

Now, even though we have a unique name for our pattern,
there is room for improvement here, because this slug is not used anywhere,
not in the editor and not on the front.

So if we want an identifier for our pattern, we can use the additional CSS class for this purpose.

<!-- wp:cover {"className":"prefix-cover-contact-form ... <div class="wp-block-cover prefix-cover-contact-form ...

I want to show you how I added the image to my pattern.

When I created this contact form pattern, I selected an image from the media library.

But when I add the pattern to the theme, I have to replace the source.

And since we are now, not only using CSS but also PHP, I have placed the image inside my theme’s assets folder, then I use get_theme_file_uri to locate the image.

<!-- wp:cover {"url":"http://localhost:8888/wp-content/ <!-- wp:cover {"url":"' . esc_url( get_theme_file_uri( 'assets/images/flora.png' ) ) . '" style="background-image:url(http://localhost:8888/wp-content/ style="background-image:url( ' . esc_url( get_theme_file_uri( 'assets/images/flora.png' ) ) . ')

We also have a little bit of text here, inside our heading, that needs to be translation ready.

We wrap our text inside the translation function, and then we can move on to the title.

<h2 class="has-text-align-center is-style-prefix-text-shadow has-larger-font-size">Example heading</h2> <h2 class="has-text-align-center is-style-prefix-text-shadow has-larger-font-size">' . __( 'Example heading', 'textdomain' ) . '</h2>

The title is the visible name in the editor.

register_block_pattern( 'theme-slug/cover-contact-form', array( 'title' => __( 'Cover block for Ninja Forms', 'textdomain' ), 'categories' => array( 'cover', 'contact-form' ), 'keywords' => array( 'flowers' ), 'content' => ' ... ', ) );

But there are two more things that can help users find your pattern:
Categories, and keywords.

You can list your pattern under an existing category,
or you can use register_block_pattern_category to add your own.

In the example, I am adding an array, with “cover” and “contact-form” as my categories.

And in the keywords array, I have a single item, “flowers”, just to illustrate how it works.

[Screen: Two images of the block pattern in the pattern selector panel: One where the category name is visible above the pattern, and one with the keyword and the search results shown above the pattern.]

Lesson Content