How to Add Custom Block Patterns to WordPress Block Editor

Krasen Slavov — Tue, 25 Aug 2026 09:00:00 +0000

Block patterns revolutionize WordPress content creation by providing pre-designed layouts users can insert with one click. This guide shows you how to create custom patterns that accelerate workflow, maintain design consistency, and empower non-technical users.

What Are Block Patterns?

Block patterns are pre-configured collections of blocks arranged into ready-to-use designs. Unlike reusable blocks (synchronized across posts), patterns insert independent copies—users can modify them freely without affecting other instances.

Patterns bridge the gap between full-page templates and individual blocks, offering flexible starting points for common layouts like hero sections, testimonials, pricing tables, and calls-to-action.

Creating Your First Custom Pattern

function register_custom_patterns() {
    register_block_pattern(
        'myplugin/hero-section',
        array(
            'title'       => 'Hero Section',
            'description' => 'Eye-catching hero with heading, text, and button',
            'categories'  => array( 'featured' ),
            'content'     => '
                
                    
                    
                    
                        
                        Welcome to Our Site
                        

                        
                        Discover amazing products and services.
                        

                        
                        
                            
                            
                                Get Started
                            
                            
                        
                        
                    
                
                ',
        )
    );
}
add_action( 'init', 'register_custom_patterns' );

Getting Block Markup

The easiest way to create pattern content is building it in the editor, then copying the markup:

Create your design in the editor
Switch to Code Editor (⋮ menu → Code editor)
Copy the HTML comments and blocks
Paste into the content property

Creating Pattern Categories

Organize patterns with custom categories:

function register_pattern_categories() {
    register_block_pattern_category(
        'business',
        array( 'label' => 'Business' )
    );

    register_block_pattern_category(
        'marketing',
        array( 'label' => 'Marketing' )
    );
}
add_action( 'init', 'register_pattern_categories' );

Advanced Pattern Properties

Enhance patterns with additional properties:

register_block_pattern(
    'myplugin/testimonial',
    array(
        'title'       => 'Testimonial Card',
        'description' => 'Customer testimonial with quote and attribution',
        'categories'  => array( 'text', 'business' ),
        'keywords'    => array( 'review', 'quote', 'customer' ),
        'viewportWidth' => 800,
        'blockTypes'  => array( 'core/column' ), // Show pattern only for specific blocks
        'content'     => ''
    )
);

Testimonial Pattern Example

register_block_pattern(
    'myplugin/testimonial-card',
    array(
        'title' => 'Testimonial Card',
        'categories' => array( 'text' ),
        'content' => '
            
                
                "This product changed my business completely. Highly recommended!"
                

                
                
                

                
                John Doe
CEO, Example Company
                
            
            ',
    )
);

Pricing Table Pattern

register_block_pattern(
    'myplugin/pricing-table',
    array(
        'title' => 'Pricing Table - Three Column',
        'categories' => array( 'business' ),
        'content' => '
            
                
                
                    
                    Basic
                    

                    
                    $9/month
                    

                    
                    Feature 1
Feature 2
Feature 3
                    

                    
                    
                        
                        Choose Plan
                        
                    
                    
                
                

                
                
                    
                    Pro
                    

                    
                    $29/month
                    

                    
                    Everything in Basic
Feature 4
Feature 5
                    

                    
                    
                        
                        Choose Plan
                        
                    
                    
                
                

                
                
                    
                    Enterprise
                    

                    
                    Custom
                    

                    
                    Everything in Pro
Premium Support
Custom Integration
                    

                    
                    
                        
                        Contact Us
                        
                    
                    
                
                
            
            ',
    )
);

Unregistering Core Patterns

Remove unwanted patterns:

function remove_core_patterns() {
    unregister_block_pattern( 'core/query-standard-posts' );
    unregister_block_pattern( 'core/query-medium-posts' );
}
add_action( 'init', 'remove_core_patterns' );

Pattern Best Practices

Use placeholder images for visual patterns
Include descriptive keywords for searchability
Test across themes to ensure compatibility
Keep patterns focused – one purpose per pattern
Add helpful descriptions explaining pattern use cases
Use semantic HTML for accessibility
Consider mobile responsiveness in layouts

Translatable Patterns

Make pattern text translatable:

'content' => sprintf(
    '%s

    %s
',
    esc_html__( 'Welcome', 'textdomain' ),
    esc_html__( 'This is sample content.', 'textdomain' )
)

Organizing Patterns in Plugins

Structure patterns in separate files:

// patterns/hero.php
<?php
return array(
    'title' => 'Hero Section',
    'categories' => array( 'featured' ),
    'content' => ''
);

// functions.php
function register_pattern_library() {
    $patterns = glob( get_template_directory() . '/patterns/*.php' );

    foreach ( $patterns as $pattern_file ) {
        $pattern = require $pattern_file;
        $slug = basename( $pattern_file, '.php' );

        register_block_pattern( 'mytheme/' . $slug, $pattern );
    }
}
add_action( 'init', 'register_pattern_library' );

Conclusion

Block patterns transform WordPress content creation by providing professional design starting points. Start with simple patterns for common layouts, organize them into logical categories, and progressively build a pattern library tailored to your site’s needs. Well-designed patterns empower users to create beautiful pages without design expertise.

External Links

Call to Action

Streamline your workflow! Block Editor Navigator Pro provides instant block navigation, search, and organization. Find any block in seconds—try it free!

The post How to Add Custom Block Patterns to WordPress Block Editor appeared first on Developry Plugins.

block patterns Archives - Developry Plugins