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 learned so far:

  • Block patterns are only blocks that have been combined.
  • 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 shortcodes.
  • 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 do this, that may help you speed up pattern creation.

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 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' );

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 run into the problem where my pattern markup is invalid countless 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 the spacing between the block patterns in the HTML code; try removing extra empty lines.
  • Remove blocks from the pattern one at a 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 the 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 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?

You can copy patterns from the block pattern page. I also recommend the WordPress pattern directory: https://wordpress.org/patterns/

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.

https://learn.wordpress.org/workshop/intro-to-block-patterns/