Creating Block Patterns

What Are Block Patterns?

Block patterns are predefined arrangements of blocks that users can insert with one click. They speed up content creation and ensure design consistency.

Registering Patterns

Method 1: patterns/ Directory (Recommended)

Create files in patterns/ folder:

<!-- wp:cover {"url":"/assets/images/hero.jpg","dimRatio":50,"overlayColor":"dark","align":"full"} -->
<div class="wp-block-cover alignfull">
    <span class="wp-block-cover__background has-dark-background-color has-background-dim-50 has-background-dim"></span>
    <img class="wp-block-cover__image-background" src="/assets/images/hero.jpg" alt=""/>
    <div class="wp-block-cover__inner-container">
        <!-- wp:heading {"textAlign":"center","level":1,"textColor":"white"} -->
        <h1 class="has-text-align-center has-white-color has-text-color">Welcome to Our Site</h1>
        <!-- /wp:heading -->
        <!-- wp:paragraph {"align":"center","textColor":"white"} -->
        <p class="has-text-align-center has-white-color has-text-color">Your tagline or brief description goes here.</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 wp-element-button">Get Started</a></div>
            <!-- /wp:button -->
        </div>
        <!-- /wp:buttons -->
    </div>
</div>
<!-- /wp:cover -->

Pattern Header Fields

Method 2: PHP Registration

// functions.php
add_action('init', function() {
    register_block_pattern(
        'my-theme/pricing-table',
        array(
            'title'       => __('Pricing Table', 'my-theme'),
            'description' => __('Three-column pricing comparison', 'my-theme'),
            'categories'  => array('featured'),
            'content'     => '<!-- wp:columns -->...',
        )
    );
});

Registering Pattern Categories

add_action('init', function() {
    register_block_pattern_category(
        'my-theme-sections',
        array('label' => __('Theme Sections', 'my-theme'))
    );
    
    register_block_pattern_category(
        'my-theme-cards',
        array('label' => __('Cards', 'my-theme'))
    );
});

Pattern Examples

patterns/cta.php (Call to Action)

<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"backgroundColor":"primary","textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide has-white-color has-primary-background-color has-text-color has-background">
    
    <!-- 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 today.</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
    <div class="wp-block-buttons">
        <!-- wp:button {"backgroundColor":"white","textColor":"primary"} -->
        <div class="wp-block-button"><a class="wp-block-button__link has-primary-color has-white-background-color has-text-color has-background wp-element-button">Start Free Trial</a></div>
        <!-- /wp:button -->
    </div>
    <!-- /wp:buttons -->
    
</div>
<!-- /wp:group -->

patterns/features.php (Feature Grid)

<!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide">
    
    <!-- wp:heading {"textAlign":"center"} -->
    <h2 class="has-text-align-center">Features</h2>
    <!-- /wp:heading -->
    
    <!-- wp:columns -->
    <div class="wp-block-columns">
        
        <!-- wp:column {"style":{"spacing":{"padding":"var:preset|spacing|30"}},"backgroundColor":"light"} -->
        <div class="wp-block-column has-light-background-color has-background">
            <!-- wp:paragraph {"align":"center","fontSize":"x-large"} -->
            <p class="has-text-align-center has-x-large-font-size">🚀</p>
            <!-- /wp:paragraph -->
            <!-- wp:heading {"textAlign":"center","level":3} -->
            <h3 class="has-text-align-center">Fast</h3>
            <!-- /wp:heading -->
            <!-- wp:paragraph {"align":"center"} -->
            <p class="has-text-align-center">Lightning fast performance out of the box.</p>
            <!-- /wp:paragraph -->
        </div>
        <!-- /wp:column -->
        
        <!-- wp:column {"style":{"spacing":{"padding":"var:preset|spacing|30"}},"backgroundColor":"light"} -->
        <div class="wp-block-column has-light-background-color has-background">
            <!-- wp:paragraph {"align":"center","fontSize":"x-large"} -->
            <p class="has-text-align-center has-x-large-font-size">🔒</p>
            <!-- /wp:paragraph -->
            <!-- wp:heading {"textAlign":"center","level":3} -->
            <h3 class="has-text-align-center">Secure</h3>
            <!-- /wp:heading -->
            <!-- wp:paragraph {"align":"center"} -->
            <p class="has-text-align-center">Enterprise-grade security built in.</p>
            <!-- /wp:paragraph -->
        </div>
        <!-- /wp:column -->
        
        <!-- wp:column {"style":{"spacing":{"padding":"var:preset|spacing|30"}},"backgroundColor":"light"} -->
        <div class="wp-block-column has-light-background-color has-background">
            <!-- wp:paragraph {"align":"center","fontSize":"x-large"} -->
            <p class="has-text-align-center has-x-large-font-size">📱</p>
            <!-- /wp:paragraph -->
            <!-- wp:heading {"textAlign":"center","level":3} -->
            <h3 class="has-text-align-center">Responsive</h3>
            <!-- /wp:heading -->
            <!-- wp:paragraph {"align":"center"} -->
            <p class="has-text-align-center">Looks great on any device.</p>
            <!-- /wp:paragraph -->
        </div>
        <!-- /wp:column -->
        
    </div>
    <!-- /wp:columns -->
    
</div>
<!-- /wp:group -->

patterns/testimonial.php

<!-- wp:group {"style":{"spacing":{"padding":"var:preset|spacing|40"}},"backgroundColor":"light","layout":{"type":"constrained","contentSize":"600px"}} -->
<div class="wp-block-group has-light-background-color has-background">
    
    <!-- wp:paragraph {"align":"center","fontSize":"large","style":{"typography":{"fontStyle":"italic"}}} -->
    <p class="has-text-align-center has-large-font-size" style="font-style:italic">"This product completely transformed how we work. I can't imagine going back to the old way."</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:group {"layout":{"type":"flex","justifyContent":"center"}} -->
    <div class="wp-block-group">
        <!-- wp:image {"width":"48px","height":"48px","scale":"cover","className":"is-style-rounded"} -->
        <figure class="wp-block-image is-resized is-style-rounded">
            <img src="/assets/images/avatar.jpg" alt="Customer" style="object-fit:cover;width:48px;height:48px"/>
        </figure>
        <!-- /wp:image -->
        <!-- wp:group {"layout":{"type":"flex","orientation":"vertical","flexWrap":"nowrap"}} -->
        <div class="wp-block-group">
            <!-- wp:paragraph {"style":{"typography":{"fontWeight":"600"}}} -->
            <p style="font-weight:600">Jane Smith</p>
            <!-- /wp:paragraph -->
            <!-- wp:paragraph {"fontSize":"small"} -->
            <p class="has-small-font-size">CEO, Company Inc.</p>
            <!-- /wp:paragraph -->
        </div>
        <!-- /wp:group -->
    </div>
    <!-- /wp:group -->
    
</div>
<!-- /wp:group -->

Bundling Patterns with theme.json

{
    "patterns": [
        "wordpress/hero-banner",
        "wordpress/pricing-table",
        "my-theme/hero"
    ]
}

Next Steps

In the next lesson, we'll implement global style variations.