DooBlockPatterns: Our plugin for Gutenberg Block Patterns

DooBlockPatterns: Our plugin for Gutenberg Block Patterns

Block patterns are a collection of predefined blocks that you can insert into posts and pages and then customize them with your own content. Using a blog template allows you to reduce the time you spend creating content for your site. Also, it’s a good way to learn how to combine different blocks and achieve more interesting effects. Block patterns can be very simple or can even span the entire content of a page.

Insert a block pattern on a page

 patterns

To insert a block pattern click the icon + to add a new block and select the tab Patterns and select the pattern to insert, and it will be inserted at the place where the cursor was.

Once the pattern has been inserted, it can be edited like any block, even changing its properties.

There is a wide variety of patterns that can be searched with the explore button. In addition, the WordPress community continues to create patterns that together with various plugins can be integrated into your WordPress.

Create own patterns

To create block patterns and have them available in our WordPress installation, we can do this by registering the patterns using code.

Details for registering patterns can be found in the documentation that describes the function register_block_pattern, which supports the following parameters:

  • title (required): title of the pattern.
  • content (required): pattern content.
  • description: visually hidden text used to describe the pattern in the editor. The description is optional, but recommended when the title doesn’t fully describe what the pattern does.
  • categories: a series of pattern categories used to group block patterns. Block patterns can be displayed in multiple categories. Categories can be registered with the function register_block_pattern_category.
  • keywords: set of aliases or keywords that help users search for the pattern.
  • viewportWidth: integer specifying the width of the pattern in the editor.

For this it is necessary to access the WordPress code, which, for many, is inconvenient and given the tendency of WordPress towards Full Site Editing, it requires another system to add custom patterns to editors’ needs.

Another way to create patterns is to use a block pattern creation plugin. In the WordPress repository, there are several plugins to do this work.

Create patterns using the DooBlockPatterns plugin

In this article, we propose to use the plugin DooBlockPatterns. This plugin can be downloaded and installed, it is free. Once installed, the menu will appear in the sidebar in which we can add block patterns, categorize them and indicate keywords that will allow us to search during editing. The removal of patterns, their modification, or uninstallation of the plugin does not affect the blocks created with the patterns, since once the pattern is inserted, it is not linked to the original pattern.

In the Settings of this plugin we can indicate whether the data generated will be deleted when the plugin is uninstalled.

Let’s look at an example: we can create a very simple pattern called Content Section, which will consist of headers and grouped content sections:

DooBlockPatterns: Our plugin for Gutenberg Block Patterns

With the following adjustments:

DooBlockPatterns: Our plugin for Gutenberg Block Patterns

This pattern can already be used in the block editor.

DooBlockPatterns: Our plugin for Gutenberg Block Patterns

Download DooBlockPatterns plugin

Download the DooBlockPatterns plugin. You just have to download it, add it (upload it) to your WordPress in the Plugins section and activate it.