Create Custom Patterns with the Block Pattern Builder Plugin

Have I mentioned how excited I am about the potential of block patterns? For regular Tavern readers, I may sound like a broken record at this point, but I am going to continue evangelizing this upcoming feature for WordPress.

With no social plans or other important things requiring my attention this past weekend, it made for a good moment to dip my toes back into the development waters. I have not built a new plugin for public release since becoming a writer for WP Tavern six months ago. My excitement over block patterns was creating an itch that I needed to scratch. Combine that with the physical distancing we are all practicing during the current worldwide pandemic, it made for an opportune moment to throw together a plugin idea I had.

Let me introduce you to Block Pattern Builder.

When the initial API launched for block patterns in Gutenberg 7.8, it was immediately apparent how easy registering custom patterns would be for theme and plugin authors. Building a pattern was as simple as creating a unique ID, giving it a title, and pasting in the code for the blocks that make up the pattern. There is almost no coding actually involved with building patterns.

Because patterns are merely the HTML code from blocks, it meant that it was possible to utilize the block editor to create them. End-users could do this. They just need an easy way to publish their custom patterns. That’s where the Block Pattern Builder plugin comes in.

With the idea in mind, I knocked out a working prototype in an hour on Saturday afternoon. I have since cleaned the code a bit and packaged it for you all to use.

Download the plugin: You can grab the plugin from the WordPress plugin directory or install it directly from the new plugin screen in your admin. It is also available via GitHub.

How Block Pattern Builder Works

Block Pattern Builder requires version 7.8 or later of the Gutenberg plugin to work. Eventually, perhaps in WordPress 5.5, the block pattern system will be merged directly into WordPress. For now, the latest version of the Gutenberg plugin is necessary.

After installing and activating the plugin, it adds a new admin menu item titled “Block Patterns.” From that point, creating patterns works just like creating a post or page. You simply add a new pattern by clicking the “Add New” link. You can rearrange blocks to your heart’s desire. When you have a pattern that you like, publish it.

Screenshot of creating a custom block pattern.
Creating a custom block pattern.

Once a pattern is published, it is available via the pattern sidebar in the block editor. Currently, this is a button in the top right corner of the editor. However, its location and interface are likely to change as the Gutenberg team continues developing the feature.

Screenshot of inserting a block pattern into the post editor.
Inserting a block pattern into the post editor.

That is all there is to it. It is a simple system, but it will provide an easy way to play around with the patterns feature in Gutenberg.

Notes and Ideas

Because block patterns are an evolving feature in the Gutenberg plugin, the system could break until things are a bit more settled down. The underlying API could change. However, that does not mean we cannot have a little fun in the meantime. Just keep in mind this is currently flagged as an experimental feature in Gutenberg.

If you are a plugin or theme author who wants to register your patterns within your own plugins or themes, you can make use of this plugin too. Build your custom patterns within the provided editor. Then, switch over to the code view for the block editor. You can copy the block code and register it via the Patterns API.

If you need inspiration for patterns, Gutenberg Hub’s template library has over 100 ideas to choose from. You can copy and paste those directly into the editor and save them as custom patterns with Block Pattern Builder.

20

20 responses to “Create Custom Patterns with the Block Pattern Builder Plugin”

  1. Can’t wait to try this out, Justin. Thank you.

    But what I really want to know is whether it’s better to create Block Patterns, or use the group block to create a pattern and make it reusable? What would be the biggest difference?

    Report

    • Reusable blocks stay the same and can be edited in one place to update all instances. Patterns are more of a starting point to insert into the post and edit.

      Report

  2. I’ve some ideas for this plugin. If you are open to contribution, should I start an issue in the repository?

    Report

  3. Works like a charm. And because the plugin uses CPT and Gutenberg, and no Custom Fields, you can very easily export your Patterns from the Tools->Export screen, and install them in any other website.

    At this point I’m guessing that in the future the Patterns would be allowed to be organized in Categories and not let the core, and numerous plugins and themes dump all their patterns in one place – what a nightmare that would be !

    Manually creating the Patterns with php is very easy, so it’s not a big issue, but for the extremely lazy theme/plugin developers (and I’m the president of that club!), it would have been nice to have a feature to export the php code needed to register the patterns in our products, similar to what the CPT UI and ACF plugins do (these 2 spoil us, a lot).

    Nevertheless, in my book, this is a 5 star plugin, and will open the door to virtually anyone having the ability to create all sorts of patterns, and not to resort into using the Reusable blocks, where if each instance has to be unique, one has to covert them to Regular Blocks first, just to independently edit them.

    Once again Justin,
    Thanks.

    Report

    • And because the plugin uses CPT and Gutenberg, and no Custom Fields, you can very easily export your Patterns from the Tools->Export screen, and install them in any other website.

      I did not even think of that possibility. Good point.

      At this point I’m guessing that in the future the Patterns would be allowed to be organized in Categories…

      I would assume we would get categories and/or collections for patterns in the same way that blocks work. When that happens, I plan to create a taxonomy to allow users to group their patterns with the plugin.

      …it would have been nice to have a feature to export the php code needed to register the patterns in our products…

      That was on my mind too. I am not sure how to handle that just yet, but I would be happy to see anyone submit a patch that makes it happen. It would be really useful to have a direct copy/paste method with the PHP code included.

      Report

  4. Just tested out the plugin and it works quite well. Down the road it would be good if you could control what patterns are loaded. In other words, remove the default ones that load with the default Gutenberg install.

    Report

  5. Well, this is what reusable blocks were missing. If somebody like me writes in pattern plugin is gone save a lot of time.

    Regards.

    Report

    • Reusable blocks solve a different problem, but I agree that many of us were looking at reusable blocks and wanting patterns. Admittedly, I was using reusable blocks to create faux patterns there for a while.

      Report

  6. Love this plugin. Really hits home how big of a game changer block patterns will be.

    Wish Gutenberg hub would publish a plugin with all of their templates available right there. Don’t even need to copy and paste. Maybe they are listening 👂

    Report

  7. Justin: thanks for your contribution this is really game changer stuff!

    I built some patterns using your plugin and it worked great. However there are some “Example” patterns already loaded. I am sure similar to “Manger Reuse” there will be a screen for deleting unwanted/needed patters but is there a way to do this via filter or database today? Or maybe there is and I missed it?

    Report

    • Those example patterns are from Gutenberg itself. I may look into building out a more extensive manager that allows you to disable those coming from Gutenberg or third-party plugins/themes.

      There is an existing unregister_block_pattern() function (unregister_pattern() pre-Gutenberg 8.1.0) that allows this.

      Report

      • Justin, thanks for the quick reply!

        That was just the ticket, I figured there were similar filters as Blocks. For those looking to remove those they are in …\wp-content\plugins\gutenberg\lib\client-assets.php

        Looking forward to seeing your plugin grow.

        // register_block_pattern( 'core/text-two-columns', gutenberg_load_block_pattern( 'text-two-columns' ) );
        // register_block_pattern( 'core/two-buttons', gutenberg_load_block_pattern( 'two-buttons' ) );
        // register_block_pattern( 'core/cover-abc', gutenberg_load_block_pattern( 'cover-abc' ) );
        // register_block_pattern( 'core/two-images', gutenberg_load_block_pattern( 'two-images' ) );
        // register_block_pattern( 'core/hero-two-columns', gutenberg_load_block_pattern( 'hero-two-columns' ) );
        // register_block_pattern( 'core/numbered-features', gutenberg_load_block_pattern( 'numbered-features' ) );
        // register_block_pattern( 'core/its-time', gutenberg_load_block_pattern( 'its-time' ) );
        // register_block_pattern( 'core/testimonials', gutenberg_load_block_pattern( 'testimonials' ) );
        

        Report

  8. Very interesting plugin. Maybe i will give it a test soon. Anyway wanted to change something on my site.

    Report

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: