Block Patterns (overview)

A block pattern is a group of blocks combined to create reusable layout elements and page sections. Patterns allow users to add pre-designed, customizable elements to their content with a visual preview of the pattern. They help speed up template and page creation, and can be as small as a single block or as large as a full-page layout.

And that’s it. Really. Patterns are just groups of blocks.

Uses of patterns

Patterns will likely be helpful in replacing a lot of shortcodes, as well as providing pre-configured content layouts without having to repeatedly build custom blocks for everything. CSS styled block patterns should only be used for patterns registered in a custom theme and not plugins.

Types of patterns

  • Synced: Patterns that remain unchanged regardless of how many times or where it’s used on the website. These were formerly called “reusable blocks” in older versions of WordPress. Note: these can only be created and managed from the WordPress admin.
  • Not synced: Patterns that, when inserted via the Block Editor, create a new instance of the pattern’s blocks. Any changes made to the inserted blocks do not affect other uses of the pattern. Changes to the pattern in the future also do not affect prior uses of it.

Limitations

Once they are inserted, they have no link to the original block pattern that they were created by. On insertion, they become regular blocks. Therefore, it is not possible to adjust all occurrences of a block pattern after it has been used.

For more, see 10up’s Caveats with using block patterns

In summary, a block pattern:

  • Can be placed wherever the user wants
  • Gets all input and styling options for free without having to create custom options
  • Is less code for the developer to maintain

Where are Block Patterns headed?

From WordPress version 6.3, you can create patterns directly in the editor. This new feature is available for classic themes and block themes.

New method of creating patterns

From WordPress 6.3, users can create patterns directly in their WordPress installation. These patterns are site-specific and need to be stored in the WordPress database. To make this possible, the post type used for reusable blocks; wp_block, was re-purposed for patterns. Not only for synced patterns but all user-created patterns.

Patterns that are not created using the wp_block post type can not be synced.

Importing and exporting block patterns

Users can export and import patterns as JSON files. This is useful if you have created a pattern on one site and want to use it on a different site. There are plans to add this feature to the Site Editor in WordPress 6.4. Until then, you can use the classic pattern management screen.

Open the pattern management screen. Focus on or hover over the pattern you want to export. Select “Export as JSON”.

Display a pattern selection when creating a new page

Theme developers can present a modal with recommended patterns when a user creates a new page. The modal is opened when the user enters the block editor. This is useful if you have premade designs that work well on many types of pages since the modal will show on all new pages.

More: https://fullsiteediting.com/lessons/introduction-to-block-patterns/#h-how-to-display-the-pattern-selection-when-creating-a-new-page

Further Reading

Learn how to use block patterns in your theme: Getting Started with Block Patterns