WordPress Block Patterns and Reusable Blocks — Save Time with Templates

In this tutorial, you'll learn how to create and use block patterns and reusable blocks in WordPress to speed up content creation, maintain design consistency, and build complex layouts without repeating work.

What You'll Learn

• The difference between block patterns and reusable blocks — when to use each
• How to browse and insert patterns from the Patterns Directory
• How to create custom block patterns in your theme
• How to create reusable blocks for content you use on multiple pages
• How editing a reusable block updates every instance across your site
• How to manage reusable blocks in the WordPress admin
• The difference between synced and unsynced patterns
• How to register patterns in your theme's functions.php

Why It Matters

If you build the same layout over and over — a call-to-action section, a testimonial card, a pricing table — copying and pasting blocks wastes time and creates inconsistency. Block patterns and reusable blocks solve this problem. You build it once, then insert it anywhere with a single click. For WordPress site builders, this is the difference between spending hours on repetitive layouts and finishing in minutes.

Real-World Use

A marketing team publishes weekly blog posts. Every post needs a call-to-action section at the bottom: a Cover block with a background image, a heading, two paragraphs, and two buttons. Without reusable blocks, they copy-paste the same 6 blocks 52 times a year. With a reusable block, they build it once, insert it in each post with one click, and update all 52 posts instantly if the CTA changes.

Learning Path

flowchart LR
    A[Core Blocks] --> B[Block Patterns & Reusable Blocks]
    B --> C[Categories & Tags]
    B --> D[Writing Posts]
    C --> E[Publishing Workflow]
    D --> F[Page Templates]

Block Patterns vs Reusable Blocks

The Gutenberg editor gives you two ways to save and reuse content. They serve different purposes:

Which One Should You Use?

Use block patterns when you want a starting template that you'll customize for each use — for example, a "Team Member" card where you fill in different names and photos each time.

Use reusable blocks when you have content that must be identical everywhere — for example, a copyright notice in your footer or a call-to-action banner that needs to match across all blog posts.

Browsing and Inserting Patterns

WordPress comes with built-in patterns organized by category:

1. Click the plus (+) button in the top-left corner of the editor
2. Click the Patterns tab (between "Blocks" and "Media")
3. Browse categories: Buttons, Columns, Gallery, Header, Footer, Text, etc.
4. Click any pattern to preview it
5. Click "Insert" to add it to your post

The Patterns Directory

WordPress maintains an online directory at wordpress.org/patterns with thousands of user-contributed patterns. Your site's Patterns tab pulls from:

• Patterns bundled with your theme
• Patterns registered by plugins
• Patterns from the WordPress.org directory (if your site has the Directory enabled)
• Custom patterns you created

Filtering Patterns

Use the search box in the Patterns tab to find specific layouts. Type "pricing" to see pricing table patterns, "header" for navigation headers, "contact" for contact form layouts.

Creating Custom Patterns

You can create patterns in two ways: through the editor or by registering them in code.

Method 1: Create via the Editor (No Coding)

1. Build your layout using blocks in the editor
2. Select all blocks in the layout
3. Click the three-dot menu > "Add to Reusable Blocks"
4. Give it a name

This creates a reusable block (synced pattern), not an unsynced pattern. To create an unsynced pattern, see Method 2.

Method 2: Register via Code (Theme's functions.php)

For patterns that you want available site-wide and shareable between sites, register them in your theme:

// Register a custom block pattern in functions.php
add_action('init', 'register_custom_block_patterns');

function register_custom_block_patterns() {
    // Register pattern category
    register_block_pattern_category(
        'dodatech',
        array('label' => __('DodaTech', 'dodatech'))
    );

    // Register the pattern
    register_block_pattern(
        'dodatech/cta-section',
        array(
            'title'       => __('Call to Action Section', 'dodatech'),
            'description' => __('A full-width CTA with heading, text, and buttons.'),
            'categories'  => array('dodatech'),
            'content'     => '<!-- wp:cover {"url":"...","dimRatio":50} -->
                <div class="wp-block-cover">
                    <span class="wp-block-cover__background"></span>
                    <div class="wp-block-cover__inner-container">
                        <!-- wp:heading {"textAlign":"center"} -->
                        <h2 class="has-text-align-center">Ready to Get Started?</h2>
                        <!-- /wp:heading -->
                        <!-- wp:paragraph {"align":"center"} -->
                        <p class="has-text-align-center">Join thousands of satisfied customers.</p>
                        <!-- /wp:paragraph -->
                        <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
                        <div class="wp-block-buttons">
                            <!-- wp:button -->
                            <div class="wp-block-button"><a class="wp-block-button__link">Sign Up</a></div>
                            <!-- /wp:button -->
                            <!-- wp:button -->
                            <div class="wp-block-button"><a class="wp-block-button__link">Learn More</a></div>
                            <!-- /wp:button -->
                        </div>
                        <!-- /wp:buttons -->
                    </div>
                </div>
                <!-- /wp:cover -->',
        )
    );
}

The content parameter uses the Gutenberg block HTML comment format. You can export this format from any existing layout:

1. Build the layout in the editor
2. Click the three-dot menu > "Copy all blocks"
3. Paste into a text editor — that's the block comment format

Creating Reusable Blocks

To create a reusable block (synced pattern):

1. Select the block or group of blocks you want to reuse
2. Click the three-dot menu in any block's toolbar
3. Choose "Add to Reusable Blocks"
4. Give your reusable block a name (e.g., "Newsletter Signup CTA")
5. Click "Save"

Your reusable block now appears in the block inserter under the "Reusable" tab.

// You can also create reusable blocks programmatically
$content = '<!-- wp:paragraph --><p>This is reusable content.</p><!-- /wp:paragraph -->';

$reusable_block = array(
    'post_title'   => 'My Reusable Block',
    'post_content' => $content,
    'post_status'  => 'publish',
    'post_type'    => 'wp_block',
);

$block_id = wp_insert_post($reusable_block);

Editing Reusable Blocks

When you edit a reusable block, every instance on every post and page updates automatically:

1. Click on the reusable block in any post
2. Click "Edit" in the notice that appears (or the pencil icon)
3. Make your changes
4. Click "Save"

WordPress shows a confirmation: "Reusable Block updated. All instances of this block will reflect these changes."

Detaching a Reusable Block

If you want to edit a reusable block in one location without affecting others:

1. Click the reusable block
2. Click "Convert to regular blocks" in the toolbar
3. The block is now detached — changes only affect this instance

Managing Reusable Blocks in Admin

To see all your reusable blocks and manage them from one place:

1. Go to Dashboard > Reusable Blocks (in the admin menu, usually under Appearance or as its own item)
2. You see a list similar to the Posts screen
3. Click any block to edit its content
4. Delete blocks you no longer need
5. Use bulk actions to delete multiple blocks

# You can also query reusable blocks via WP-CLI
wp post list --post_type=wp_block --field=post_title

Synced vs Unsynced Patterns

In WordPress 6.3 and later, patterns can be synced or unsynced:

Synced Patterns (Reusable Blocks)

• Changes propagate everywhere
• Stored as wp_block post type in the database
• Created via "Add to Reusable Blocks"
• Good for: copyright notices, standard CTAs, legal disclaimers

Unsynced Patterns

• Each instance is independent after insertion
• Can be registered via theme or plugin
• Good for: starter layouts that you customize each time

// Register an unsynced pattern (changes are local to each instance)
register_block_pattern(
    'dodatech/team-member',
    array(
        'title'       => __('Team Member Card', 'dodatech'),
        'content'     => '<!-- wp:columns -->...<!-- /wp:columns -->',
        'categories'  => array('dodatech'),
        'postTypes'   => array('post', 'page'),
    )
);

The postTypes parameter restricts where the pattern appears in the inserter.

Converting Between Synced and Unsynced

To convert a reusable block (synced) to regular blocks (unsynced):

• Click the block, click "Convert to regular blocks"

To convert regular blocks to a reusable block (synced):

• Select blocks, three-dot menu > "Add to Reusable Blocks"

Registering Patterns in Theme

For theme developers, the recommended way to bundle patterns is through the theme's patterns/ directory:

my-theme/
├── patterns/
│   ├── cta-section.php
│   ├── team-member.php
│   ├── pricing-table.php
│   └── hero-section.php

Each file is a PHP file that returns the block content:

<?php
/**
 * Title: Call to Action Section
 * Slug: my-theme/cta-section
 * Categories: dodatech
 * Description: A full-width CTA with heading, text, and buttons.
 */
?>
<!-- wp:cover {"url":"...","dimRatio":50} -->
<div class="wp-block-cover">
    <span class="wp-block-cover__background"></span>
    <div class="wp-block-cover__inner-container">
        <!-- wp:heading {"textAlign":"center"} -->
        <h2 class="has-text-align-center">Ready to Get Started?</h2>
        <!-- /wp:heading -->
        <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
        <div class="wp-block-buttons">
            <!-- wp:button -->
            <div class="wp-block-button"><a class="wp-block-button__link">Sign Up Now</a></div>
            <!-- /wp:button -->
        </div>
        <!-- /wp:buttons -->
    </div>
</div>
<!-- /wp:cover -->

WordPress automatically discovers patterns in the patterns/ directory — no need to call register_block_pattern() in functions.php.

Common Mistakes

1. Using reusable blocks for content that changes per instance: A reusable block that updates everywhere means every instance looks the same. Don't use it for things like individual team member bios — use a pattern instead.

2. Not naming reusable blocks clearly: Five blocks named "CTA" become confusing. Name them descriptively: "Blog Post Footer CTA", "Homepage Hero Section", "Pricing Table - 3 Columns".

3. Forgetting about reusable blocks when deleting content: Deleting a page that contains a reusable block does not delete the reusable block itself. It stays in the database and still appears in the inserter.

4. Over-registering patterns in functions.php: Registering dozens of patterns in functions.php without organizing them into categories makes the Patterns tab cluttered. Use meaningful categories.

5. Converting reusable blocks to regular blocks accidentally: The "Convert to regular blocks" option is near the "Add to Reusable Blocks" option. One click in the wrong menu detaches the block from its synced source.

Practice Questions

1. What's the main difference between a block pattern and a reusable block?
2. If you need a copyright notice in your footer that shows the same text on every page, should you use a pattern or a reusable block?
3. How do you detach a reusable block so you can edit it without affecting other instances?

Challenge: Create a reusable block for a newsletter signup section containing a Cover background, a heading, a paragraph, and a button. Insert it into three different posts. Then edit the reusable block and verify all three posts update simultaneously.

FAQ

Mini Project

Build a reusable block library for a business website:

1. Create a "Call to Action" reusable block: Cover background, heading, paragraph, two buttons
2. Create a "Team Member Card" pattern (unsynced): Image, heading, paragraph
3. Create a "Contact Info" reusable block: Address, phone, email with appropriate icons/text
4. Insert all three into a new "About Us" page
5. Edit the "Contact Info" reusable block and verify the About Us page updates
6. Create a patterns category in your theme and register one pattern programmatically

What's Next

Now that you can reuse layouts efficiently, learn Categories and Tags to organize your content with taxonomies. Then master the complete workflow in Writing Posts and Managing Pages.

For more advanced content organization, see Page Templates.