Creating a Block Pattern Plugin

written by: Jeff McNear - (updated 5/26/22)

Creating a Block Pattern Plugin

While the Block Pattern Builder Plugin is a fantastic innovation, as of the writing of this article (5/22/20) there is no JSON export as found in reusable blocks – which means that while the pattern exists in the site where you built it, it isn’t easily portable to another site.

(again, Patterns are found in Gutenberg version 7.8 or later – which at this time is not included with WP core – you will need to explicitly add the Gutenberg plugin to your site to take advantage of Patterns)

This article describes a process by which you can take a block configuration and transform it into a block pattern – although I wouldn’t use the Code Snippets plugin like they do.

Here is the process:

At this point the article recommends placing that escaped code into the site via the Code Snippets plugin, but I find creating a bespoke plugin a better way to go.

First the head of the plugin document:

<?php
/**
 * Plugin Name: Plasterdog Patterns
 * Description: Custom Block Patterns
 * Version: 1.0
 * Author: Jeff McNear
 */

Then register the pattern function

/**
 * Register Custom Block Pattern Styles
 */
if ( ! function_exists( 'register_pattern' ) ) {
	return;
}

Then the actual pattern

register_pattern(
'my-custom-patterns/pattern-1',
[
    'title'   => __( 'PLASTERDOG' ),
    'content' => "
// THE ESCAPED CODE GOES IN HERE
",
    ]
);

…. and for multiple patterns, just repeat the process with unique pattern names and titles.

For example, here is a two column array, with an image, image caption, title and paragraph block

Note, I have used this site as the image source and the image is inserted by direct URL to make the pattern more portable than if I had used an image that was from the media manager of an individual install.

Switch to code view by clicking on the three dots in the upper right corner of the edit interface.

Grab the code:

Then navigate to https://onlinestringtools.com/escape-string, enter the code in the left side, click enter and grab the code from the right side:

This tool implements PHP’s addslashes function in JavaScript. It works entirely in your browser and what it does is it adds slashes to a string to escape special characters, such as backslashes, tabs, newlines, single quotes, and double quotes. Internally, it takes the input string and checks if the current character is special and if it is, then it adds a backslash before it.

Here is the final product:

<?php
/**
 * Plugin Name: Plasterdog Patterns
 * Description: A simple plugin to demonstrate how to add Block Patterns to Gutenberg.
 * Version: 1.0
 * Author: Jeff McNear
 */
/**
 * Register Custom Block Pattern Styles
 */
if ( ! function_exists( 'register_pattern' ) ) {
	return;
}
register_pattern(
    'my-custom-patterns/pattern',
    [
        'title'   => __( 'PLASTERDOG CUSTOM PATTERN' ),
'content' => "<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":33.33} -->\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\"><!-- wp:image {\"sizeSlug\":\"large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://i.picsum.photos/id/1020/300/300.jpg\" alt=\"\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Circumnavigated extraplanetary tingling</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"width\":66.66} -->\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\"><!-- wp:heading -->\n<h2>Just one dollar a month</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Circumnavigated extraplanetary tingling of the spine great turbulent clouds not a sunrise but a galaxyrise hydrogen atoms. Vastness is bearable only through love permanence of the stars are creatures of the cosmos Sea of Tranquility Orion\'s sword gathered by gravity. Star stuff harvesting star light a still more glorious dawn awaits finite but unbounded Vangelis extraordinary claims require extraordinary evidence across the centuries. Vangelis Vangelis finite but unbounded descended from astronomers with pretty stories for which there\'s little good evidence encyclopaedia galactica.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n",
    ]
);

You can get more specific in assigning the new block pattern by assigning keywords, categories and viewport width like this:

        register_block_pattern('awp/four-short-bios', [
            'title' => __('Four Short Bios', 'awp'),
            'keywords' => ['bios, short bios, four short bios'],
            'categories' => ['featured', 'cave'],
            'viewportWidth' => 1000,
            'content' => "

There are currently 7 predefined pattern categories:

  • featured
  • buttons
  • columns
  • gallery
  • headers
  • text
  • query

However you can add a new category via a code block like this:

register_block_pattern_category(
    'cave',
    array( 'label' => __( 'Cave Enterprises', 'awp' ) )
);

If the category is not registered including it as a category would attach the pattern to an “uncategorized” category

To un-regisiter (most) of the default patterns use this block of code:

add_action('init', function() {
    remove_theme_support('core-block-patterns');
});