WordPress Gutenberg Patterns - Building Reusable Block Patterns

WordPress Gutenberg block patterns are pre-designed block combinations that users can insert with a single click. They’re powerful tools for creating consistent, reusable content layouts.

Introduction to Block Patterns

Block patterns are collections of blocks arranged in a specific layout. They help users create complex layouts quickly without manually arranging individual blocks.

Benefits:

• Consistent design across site
• Faster content creation
• Reusable layouts
• Better user experience
• Design system implementation

Use Cases:

• Hero sections
• Feature grids
• Testimonial sections
• Call-to-action blocks
• Content layouts

Creating Block Patterns

Registering Patterns in PHP

register_block_pattern(
    'my-theme/hero-pattern',
    [
        'title'       => 'Hero Section',
        'description' => 'A full-width hero section with title and CTA',
        'content'     => '<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
    <!-- wp:heading {"level":1} -->
    <h1>Welcome to Our Site</h1>
    <!-- /wp:heading -->
    
    <!-- wp:paragraph -->
    <p>This is a hero section pattern.</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:buttons -->
    <div class="wp-block-buttons">
        <!-- wp:button -->
        <div class="wp-block-button">
            <a class="wp-block-button__link">Get Started</a>
        </div>
        <!-- /wp:button -->
    </div>
    <!-- /wp:buttons -->
</div>
<!-- /wp:group -->',
        'categories'  => ['featured'],
    ]
);

Pattern with Attributes

register_block_pattern(
    'my-theme/feature-grid',
    [
        'title'       => 'Feature Grid',
        'description' => 'Three-column feature grid',
        'content'     => '<!-- wp:columns -->
<div class="wp-block-columns">
    <!-- wp:column -->
    <div class="wp-block-column">
        <!-- wp:heading {"level":3} -->
        <h3>Feature One</h3>
        <!-- /wp:heading -->
        <!-- wp:paragraph -->
        <p>Description of feature one.</p>
        <!-- /wp:paragraph -->
    </div>
    <!-- /wp:column -->
    
    <!-- wp:column -->
    <div class="wp-block-column">
        <!-- wp:heading {"level":3} -->
        <h3>Feature Two</h3>
        <!-- /wp:heading -->
        <!-- wp:paragraph -->
        <p>Description of feature two.</p>
        <!-- /wp:paragraph -->
    </div>
    <!-- /wp:column -->
    
    <!-- wp:column -->
    <div class="wp-block-column">
        <!-- wp:heading {"level":3} -->
        <h3>Feature Three</h3>
        <!-- /wp:heading -->
        <!-- wp:paragraph -->
        <p>Description of feature three.</p>
        <!-- /wp:paragraph -->
    </div>
    <!-- /wp:column -->
</div>
<!-- /wp:columns -->',
        'categories'  => ['features'],
    ]
);

Pattern Categories

Registering Custom Categories

register_block_pattern_category(
    'my-custom-category',
    ['label' => 'My Custom Patterns']
);

Standard Categories

• featured - Featured patterns
• buttons - Button patterns
• columns - Multi-column layouts
• text - Text-based patterns
• gallery - Image galleries
• header - Header sections
• footer - Footer sections

Advanced Pattern Techniques

Patterns with Inner Blocks

register_block_pattern(
    'my-theme/nested-pattern',
    [
        'title'       => 'Nested Pattern',
        'description' => 'Pattern with nested blocks',
        'content'     => '<!-- wp:group -->
<div class="wp-block-group">
    <!-- wp:columns -->
    <div class="wp-block-columns">
        <!-- wp:column -->
        <div class="wp-block-column">
            <!-- wp:image -->
            <figure class="wp-block-image">
                <img src="https://example.com/image.jpg" alt=""/>
            </figure>
            <!-- /wp:image -->
        </div>
        <!-- /wp:column -->
    </div>
    <!-- /wp:columns -->
</div>
<!-- /wp:group -->',
    ]
);

Pattern with Styles

Patterns can include inline styles or reference theme styles:

register_block_pattern(
    'my-theme/styled-pattern',
    [
        'title'       => 'Styled Pattern',
        'description' => 'Pattern with custom styles',
        'content'     => '<!-- wp:group {"style":{"spacing":{"padding":{"top":"2rem","bottom":"2rem"}}}} -->
<div class="wp-block-group" style="padding-top:2rem;padding-bottom:2rem">
    <!-- Pattern content -->
</div>
<!-- /wp:group -->',
    ]
);

Best Practices

• Use semantic HTML in patterns
• Keep patterns focused and reusable
• Document pattern usage
• Test patterns across themes
• Use meaningful pattern names
• Organize patterns by category
• Provide clear descriptions
• Consider responsive design
• Use theme colors and fonts
• Keep patterns maintainable

Conclusion

Gutenberg block patterns are powerful tools for:

• Creating consistent layouts
• Improving content creation workflow
• Building design systems
• Enhancing user experience

Key principles:

• Register patterns properly
• Use appropriate categories
• Keep patterns reusable
• Test thoroughly
• Document usage

Mastering block patterns significantly improves WordPress theme development and user experience.