Difference between Reusable Blocks, Block Pattern, Templates, Template Parts


The Gutenberg project and WordPress Block Editor have brought forward many new terms and features. Let’s get clear about which WordPress Blocks and editable regions to use for different purposes.

Objectives

After completing this lesson:

  • You will be able to explain the difference between Reusable Blocks, Block Patterns, templates and template parts.
  • You will be able to identify which block type is used for which purpose.

Prerequisite Skills

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

Readiness Questions

  • Do you know how to create posts and use blocks?
  • Are you familiar with how to insert blocks?
  • Are you familiar with the template editor?

Materials Needed

  • A local install of WordPress.
  • Theme files downloaded or beneficial if installed, You can use any block theme. You can find a list of freely available block themes in the WordPress Themes directory.
  • For demonstration, we are using the Twenty Twenty Two theme in this lesson plan

Notes for the Presenter

  • Understanding of block editor and creating blocks
  • Any example or concept for which you can explain the difference between Reusable Blocks, Block Patterns, Templates and Template Parts.
  • Ask participants to either complete the exercise independently or guide you through how to complete the exercise.
    • If not all participants have a computer, guiding them through the exercise is a great way to ensure everyone understands the steps.

Lesson Outline

  • Review what a Block is and how to Create Reusable Blocks.
  • Demonstrate how to use the Reusable Blocks.
  • Explain what the block editor is and what Block Patterns are for.
  • Demonstrate how to find, add, and modify a Block Pattern.
  • Review Template and Template Parts
  • Explain which WordPress Blocks to use for which purpose

Exercises

Block Patterns

  • Adding Blocks Patterns, Ask participants to search and insert Block Pattern into a page or post using the inserter.
  • Participants should customise those block patterns with their content (like text, color, images etc.)

Reusable Blocks

  • Ask participants to create blocks and convert them to Reusable Blocks.
  • Create another post and use that created Reusable Blocks.

Template and Template Parts

  • Ask Participants to Create a landing page of their choice to understand the template editor feature.
  • Ask Participants to create a header or footer to understand the concept of template parts.

Assessment

You can modify Reusable Block content globally

  1. True
  2. False

Answer: 1. True

Can you modify Block Patterns according to your needs?

  1. Yes
  2. No

Answer: 1. Yes

A Header or Footer is an example of:

  1. Reusable Block
  2. Block Pattern
  3. Template
  4. Template Part

Answer: 4. Template Part

Additional Resources

Example Lesson

This lesson will walk you through the key differences between those blocks and when and why you need to use them.

Reusable Block

The Reusable Block in WordPress Block editor is a content block that you create, save and reuse later as per your need. It allows you to save a block or group of blocks, which you can use later on any post or page on your website. And you can even export reusable blocks and import them to another website. If you often use the same content on your website, the reusable blocks will save you a ton of time and effort.

When should I use a Reusable Block?

For example, if you want to create social icons, call-to-action, thank you note, feedback forms, tables, or any type of promotional banner. Then you can use this reusable feature of the block editor. For example, if you create a banner for a specific event, Reusable blocks can be the best fit for this kind of need. Then after completing that event, you can reuse this block for future purposes if you need a similar one.

Now we will have a look at how to create Reusable Block, Click on the block which you want to make the Reusable Block and then click on the three-dot menu (kebab menu) and select the “Add to Reusable Blocks” option.

Shows a post with text highlighted, and in the kebab menu, Add to Reusable Blocks  has an arrow pointing to it.

Create another post/page where you want to insert it. Click on the plus icon in the top-left toolbar, visit the “Reusable” tab and insert a required Reusable Block here (what you have created earlier).

Block inserter > Reusable > Call to action reusable block displayed

Get more detailed info about the Reusable Block lesson plan and Workshop.

Block Pattern

Block patterns are predefined groups of blocks that you can insert into posts, pages, or custom post types and then customise them with your own content. Changes made to a block pattern do not affect the registered block pattern or any other content that uses that particular block pattern.

Block patterns include individual blocks – like the paragraph block, button block, or image block. They are grouped together into a predefined layout which you can alter any way please to meet your needs.

When should I use a Block Pattern?

If you want to use a layout of a particular set of blocks on multiple places of your website, then you can use the WordPress Block pattern. The concept is to allow users to change images, text, style of a block pattern where the Block Pattern appears.

You can find Block Patterns available in the Block Pattern Library. From here, you can click the copy button, return to your site, and paste the pattern.

Now we will have a look at how to add Block Pattern, To add a block pattern, click on the + icon (inserter) and open the Patterns tab. And another way to use Block Pattern is, Go to Block Pattern Library, hover to any block pattern you want to insert and then click on copy and now paste it to the page/post where you want to use it.

Block inserter > Patterns > Featured

I have used a Block Pattern on the same page and modified their content, Here you can check how we can use them with our own content.

Example of a block pattern in a post
Example of a block pattern displayed in a post

Get more detailed info about the Block Pattern lesson plan and Workshop.

Template and Template Parts

Templates are broken down between templates (that describe a full page) and template parts (that describe reusable areas within a template). They are also entirely editable by users using the block editor.

While the post editor concentrates on the content of a post, the template editor allows declaring and editing an entire site using blocks, from header to footer.

A block template is defined as a list of block items (like the site title, description, logo, navigation, etc.) as well as semantic areas like header, sidebar, and footer. It is only available to content creators who are using a block theme or a classic theme that has opted into using this feature.

Template parts, on the other hand, are smaller sections of the site that should be decided once and visible in many locations. For example, a header and footer are ideal template parts that can be created completely with WordPress blocks.

When should I use the Template and Template parts?

Templates are best to use when you want to create landing pages like event-specific promotion pages, sales pages, newsletter signup, and similar areas. You can find add or edit Templates by Navigating to Appearance > Template.

Template parts are the areas that you don’t modify usually, such as the Header or Footer of your website. You can also combine parts into templates to give you a clear perspective of what you are modifying. Before Full Site Editing, templates and template parts needed to be created using code. Now you can manage all this in the block editor.

You can create and modify template parts in several ways.

  1. Using the Site Editor in Block themes while editing areas like “Front Page.”
  2. Using the Site Editor in Block themes to edit only template parts
  3. Navigating to Appearance > Template parts and selecting the option to add or edit

Here we will see how to add template parts and where can we find them. Go to Appearance > Editor and click on the WordPress logo icon on the top left. Now you can see a Template Parts link.

Site Editor > Toggle Navigation > Editor > Template Parts

Now we are editing the Header of Template Parts.

Template Part Editor

Get more detailed info about Template and Template parts.

Lesson Wrap Up

💡 Follow with the Exercises and Assessment outlined above.

Now you understand the key difference between all these useful WordPress blocks and can identify which to use in each instance. Reusable Blocks help you keep content in sync throughout your site. Block Patterns help you apply the same layout in various regions. A template is intended to be used in more layout areas. Template Parts help you create areas that won’t need to be frequently updated but are outside the scope of content like posts and pages.