Block patterns tips and resources

In this part, I want to bring up additional tips, answer common questions, and show you some useful resources.

Recap

Let’s recap what we have learnt so far:

  • Block patterns are only blocks that have been combined together.
  • Once a block pattern has been placed in the editor, all blocks can be edited, removed or replaced.
  • A block pattern can be reused and placed in the editor multiple times.
  • It can combine core blocks with blocks from plugins as well as short codes.
  • A block pattern can be of any size, contain any number of blocks and variations, block styles, and additional CSS classes.

WordPress block patterns can only be registered using PHP

A block pattern is created using the PHP function register_block_pattern.
-There is no JavaScript equivalent for registering block patterns.

There is also no interface for a user to create a block pattern while working in the editor. This is something that has been brought up and suggested several times, and I believe that it will be added eventually.

Plugins for creating patterns

An interface for creating patterns would possibly work very similar to how reusable blocks are created.
There are already a few plugins that does this, that may help you speed up the pattern creation. Feel free to try them out, but I do not guarantee that they will work with the current version of WordPress, because of the major changes.

Can you remove block patterns?

Both block patterns and most block pattern categories can be unregistered.

To remove all WordPress default block patterns, there is a handy trick that will feel familiar to most theme authors:

remove_theme_support( 'core-block-patterns' );

This needs to be added to either an init hook or to after_setup_theme, and you will most likely place this inside a function, together with the rest of your theme support.

To remove a single block pattern, use the PHP function unregister_block_pattern, together with the patterns prefix and pattern slug:

unregister_block_pattern( 'prefix/my-awesome-pattern' );

So if you wanted to remove one of the patterns that are included in WordPress, for example the pattern with two buttons, you would use:

unregister_block_pattern( 'core/two-buttons' );

This also works for block patterns created by plugins, all you need is the prefix and name of the pattern.

Removing block pattern categories

To remove a category, use the function unregister_block_pattern_category together with an init hook.

function prefix_unregister_category() { unregister_block_pattern_category( 'buttons'); } add_action( 'init', 'prefix_unregister_category' );

The uncategorized block pattern category is used as a fallback when a pattern does not have a category, and it can not be unregistered with this function.

Troubleshooting block patterns

I have ran into the problem where my pattern markup is invalid countless of times. Many times, the message that is shown when I try to resolve a block markup error, is not helpful at all.

What I try to do to solve markup problems is:

  • First, double check that I have copied all the tags correctly and that there are no missing closing tags.
  • Adjust spacing between the block patterns in the HTML code; try removing extra empty lines.
  • Remove blocks from the pattern one at the time to try to identify where the problem is.

Finally, re create the pattern in the editor, copy all the code again and hope for the best! 🙂

Should block patterns contain default content?

It depends. Who is the pattern for, what is it for, and how much content is there?

A block pattern with default content can be easier for users to get started with. It may be easier for them to edit content that is already in place, compared to adding new content.

Local images that are included in patterns, are lost when the user switches themes.

I would say that the best practice is to not include images or video.
We will see how block patterns and best practices evolve over time as more people create them.

By only having an empty placeholder block, the user selects their own image from their media library, and the image does not break if the theme is changed.

But if it is a block that depends on the visual presentation created by the image, then perhaps the user can be informed about how to secure their image.

Where can I find example block patterns?

In the previous lesson, I showed a couple of patterns in the video. The code for the patterns are included in the lesson material on GitHub.

If you have examples to share please do! I would love to see them.

The following free themes in the WordPress.org theme directory also has block patterns:

Inclusive is made by me, and it is the theme used on this very site.

Example presentation pattern with image:

A pencil drawing of three peonies.

Presentation

This is an example placeholder text. Edit it to make it your own.

You can change the image by selecting the block and clicking “Replace”.

This paragraph block uses the secondary background color and the “Rounded corners” style.

Did you know that you can adjust how wide you want your columns to be?

It also has a short presentation of the patterns in the admin area, and a way to copy the pattern code, for sites that are using a WordPress version that does not support block patterns.

Cordero was the second theme in the directory to include block patterns. It has a large number of patterns, including service sections, food menus, and pricing tables.

Deejay is also made by me, but only includes one pattern that helps the user create basic profiles for the artists.

Seedlet is a new theme by Automattic that includes three patterns for the group block and the latest post grid.

Resources for users

WordPress training has an introduction video for how to find and use block patterns. You can share this with your users so that they can get familiar with how to work with the patterns you have included in your theme or plugin.