Learn Home » Lesson Plans » How to use WordPress Block Patterns

How to use WordPress Block Patterns

Description

In this lesson, you will learn all about block patterns, what they are, and how to use them.

Objectives

After completing this lesson, participants will be able to:

  • Describe what a block pattern is
  • Choose when to use a block pattern rather than a re-usable block
  • Modify a block pattern for use on their own site(s)

Prerequisite Skills

Participants will get the most from this lesson if they have familiarity with:

Readiness Questions

  • Are you familiar with how to write posts or pages on WordPress?
  • Have you used the block editor to write posts or pages?
  • Do you know how to use WordPress Block Patterns in your content?
  • What are common layout components that you might want to use on your website? What variations of those components would you expect?

Materials Needed

  • A local install of WordPress

Notes for the Presenter

  • It’s best to have a local installation of WordPress that can be loaded offline to show the demo, even if there are connectivity issues.
  • You may consider installing the Classic Editor and Gutenberg plugins when describing the editor, especially if participants prefer to see “what’s different.”

Lesson Overview

  • Review what the block editor is, and what block patterns are for
  • Demonstrate how to find, add, and modify a block pattern
  • Clarify the use cases for block patterns vs. reusable blocks
  • Have participants complete the exercises to practice adding and modifying block patterns

Exercises

  1. Adding block patterns: Using the inserter, ask participants to search for and insert a block pattern into a post or page.
  2. Modifying block patterns: Once the block pattern has been added, participants should edit and customize the block pattern, i.e. adding different text, color, images, etc.

Assessment

What is a block pattern?

  1. The background color for a block
  2. A block that inserts a pattern into a post or page
  3. A predefined and customizable block or group of blocks
  4. The order in which blocks are inserted

Answer: 3. Correct answer

Customizing a _____ will change it anywhere it is used.

  1. Block pattern
  2. Reusable block

Answer: 2. Correct answer

Additional Resources

Example Lesson

Introducing block patterns

In the block editor, block patterns are predefined groups of blocks that you can insert into posts, pages, or custom post types. Block patterns include individual blocks – like the paragraph block, button block, or image block – that are then grouped together into a predefined layout. You can use block patterns with individual blocks when writing a post or page for your site.

Adding and customizing block patterns

Block patterns can be inserted wherever the block editor is used. By default, this means block patterns are available for posts and pages.

To add a block pattern, click on the + icon (inserter) and open the Patterns tab. They’re organized into:

  • Buttons: to add predefined/designed buttons to a post or page.
  • Columns: to add predefined columns to a post or page.
  • Gallery: to add a gallery of images.
  • Headers: for cover or header image styles.
  • Text: for pre-formatted text options.
  • Themes: themes may add specific types of patterns as well.

To browse available block patterns, click on the drop-down menu in the inserter to navigate to the type of block pattern you would like to insert. For example, if you’d like to add columns to your post or page, click on the Columns block pattern group from the drop-down menu.

Once you’ve navigated to the block pattern type that you would like to use, click directly on the block pattern. This will insert it into the post or page.

An example block pattern - two columns with images - inserted into a page.
An example block pattern – two columns with images – inserted into a page.

When a block pattern is inserted, it includes some default text and images, if applicable. This is designed to be changed. To customize the block pattern, you can edit or replace text and images just like in any other block.

To edit the block, click directly on the part you would like to edit. For example, if there is an image included in the block pattern you’re using, clicking on the image will display a toolbar with a number of options to replace or edit the content.

Clicking directly on the individual block within the pattern will allow you to edit or customize it.
Clicking directly on the image in the block allows you to modify or “Replace” the image.

Once you’ve updated all the relevant portions of the block pattern you selected, you can continue to edit your post or page normally. You can add as many block patterns to a post or page as you’d like by following this same process.

Block Patterns vs. Reusable Blocks

If block patterns are predefined and re-usable, what’s the difference between block patterns and reusable blocks?

Reusable Blocks

Reusable blocks are blocks or groups of blocks that are centrally managed within a site. Making changes to a reusable block affects all instances used across the site. This is particularly helpful if you have content that will be used in multiple locations across your site and want to be able to manage updates from a single location.

Another good way to think of reusable blocks is as custom user blocks since they are created and managed by the site user or owner.

Block Patterns

Block patterns, on the other hand, are registered through WordPress Core software, themes, or plugins. In many ways, block patterns act as starter content to include in a post or page.

Block patterns are created by WordPress developers with the intention that the site owner or user will update, customize, and change these patterns once inserted into a post or page.

Changes made to a block pattern do not affect the registered block pattern or any other content that using that particular block pattern.

Lesson Wrap Up

Now, you should be familiar with what block patterns are, how to use them, and how to customize them for your posts and pages. As you develop new content for your site, check the block patterns list to see if there are any new options available or if there’s a pattern that already exists that can help you with building your content.