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:

• Basic knowledge of posts and pages in WordPress
• Some WordPress content editing experience
• How to create a Post or Page with the Block Editor

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

• Block Patterns

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.