Block Patterns: Reusable Design Layouts

Block patterns are pre-designed block layouts that users can insert into their content with a single click. These reusable design templates dramatically accelerate content creation while maintaining design consistency, making them essential tools for both theme developers and content creators.

Understanding Block Patterns

Block patterns differ fundamentally from template parts in behavior and purpose. When you insert a template part, you create a reference to shared content—editing the template part updates all instances. Block patterns work oppositely: inserting a pattern creates an independent copy of blocks that users can freely customize without affecting other pattern insertions.

Think of patterns as sophisticated copy-paste templates. A call-to-action pattern might include a heading, paragraph, and button blocks styled and arranged attractively. Users insert this pattern, then customize the text, colors, and imagery for their specific needs. Each insertion starts with the pattern design but becomes completely independent content.

WordPress includes default patterns from the Pattern Directory, providing hundreds of professionally designed layouts. Themes can register custom patterns tailored to specific design aesthetics and use cases. This combination gives users immediate access to diverse design options while maintaining theme consistency.

Creating Custom Block Patterns

Custom patterns are registered in your theme’s functions.php file or in PHP files within a /patterns directory. The registration function register_block_pattern() takes a pattern name and an array of properties including title, description, categories, and the actual pattern content.

Pattern content consists of block markup—the same HTML comments WordPress generates in the post editor. Build your pattern visually in the editor, then copy the block markup from the code editor view. This workflow lets designers create patterns without writing block markup manually.

Here’s a simple pattern registration structure: The pattern name uses a namespace/slug format like “mytheme/hero-section”. Properties include a title displayed in the inserter, optional description text, categories for organization, and keywords for search. The content property contains the block markup as a string.

Pattern Categories and Organization

WordPress provides default pattern categories: Buttons, Columns, Gallery, Header, Text, Query, and more. Register custom categories using register_block_pattern_category() to organize theme-specific patterns. Categories appear as filters in the pattern inserter, helping users find relevant designs quickly.

Thoughtful categorization improves pattern discoverability. Create categories that match your users’ mental models—”Call to Action”, “Testimonials”, “Pricing Tables”, “Team Sections”. Each pattern can belong to multiple categories, allowing discovery through different organizational schemes.

Keywords enhance pattern searchability beyond categories. Add keywords array to pattern properties: "keywords" => array("cta", "action", "button"). Users typing these terms in the pattern search will find your pattern even if it’s browsing a different category.

Block Locking in Patterns

Block locking within patterns protects design integrity while allowing content customization. Apply lock attributes to blocks in your pattern markup: <!-- wp:group {"lock":{"move":true,"remove":true}} -->. This prevents users from moving or deleting critical structural blocks while allowing content and style edits.

Lock options include “move” to prevent reordering, “remove” to prevent deletion, and combinations thereof. You might lock container blocks that establish layout structure while leaving content blocks unlocked for editing. This guided flexibility maintains design cohesion while empowering customization.

Template lock on container blocks controls child block manipulation. Set "templateLock":"all" to prevent adding, removing, or moving child blocks. Use "templateLock":"insert" to prevent adding new blocks while allowing removal and reordering. These controls create predictable editing experiences.

Pattern Placeholder Content

Effective patterns include placeholder content that demonstrates proper usage while being obviously replaceable. Use Lorem Ipsum for body text, “Enter Your Heading Here” for headings, and placeholder images with dimensions matching expected aspect ratios. This guidance helps users understand the pattern’s intent.

Consider including placeholder images from services like placeholder.com or using theme screenshots. Image dimensions should match realistic use cases—don’t use 200x200px placeholders if the pattern expects wide landscape images. Proper placeholders set appropriate expectations.

Placeholder text should indicate purpose: “Your Main Headline”, “Supporting text goes here”, “Call to Action”. This descriptive approach helps users understand content hierarchy better than generic Lorem Ipsum, improving pattern adoption and correct usage.

Synced Patterns (Formerly Reusable Blocks)

Synced patterns (previously called reusable blocks) behave differently from standard patterns. When you create a synced pattern, WordPress stores it as a post type. Inserting a synced pattern creates a reference, not a copy—editing the synced pattern updates all instances across your site, similar to template parts.

Users create synced patterns from the editor by selecting blocks and choosing “Create Pattern” with the “Synced” option enabled. These user-created patterns appear in the pattern inserter alongside theme patterns. This functionality enables users to build their own design systems within their content.

Synced patterns work excellently for repeated content elements that should update universally—disclaimers, promotional banners, standardized calls-to-action. When the message changes, edit the synced pattern once and all instances update. This differs from standard patterns where each insertion is independent.

Pattern Properties and Metadata

Pattern registration supports various properties controlling behavior and presentation. The “viewportWidth” property sets the pattern preview width in the inserter, useful for demonstrating responsive behavior. Set it to common viewport widths like 1200 for desktop patterns or 375 for mobile-optimized designs.

The “inserter” property controls whether patterns appear in the inserter interface. Set to false for patterns you want to register but not display to users—perhaps patterns used programmatically or reserved for specific contexts. This creates hidden patterns available through code but not cluttering the UI.

Block types property restricts pattern insertion contexts: "blockTypes" => array("core/post-content") makes patterns appear only when inserting into Post Content blocks. This contextual filtering shows relevant patterns for specific situations, reducing cognitive load.

Pattern Directory and Remote Patterns

WordPress includes patterns from the WordPress.org Pattern Directory, providing constantly updated design resources. These remote patterns appear alongside locally registered patterns in the inserter. Users benefit from community-created designs without themes needing to bundle everything.

Themes can opt out of remote patterns using remove_theme_support('core-block-patterns') if you want complete control over available patterns. This ensures users see only your curated pattern library, maintaining strict brand consistency. Balance convenience against control based on your use case.

Patterns in Template Editing

Patterns work in both post content editing and template editing contexts. When building templates in the Site Editor, patterns accelerate layout creation. Insert a header pattern, footer pattern, and content layout pattern to construct complete templates quickly from pre-designed components.

Consider creating template-specific pattern categories: “Header Patterns”, “Footer Patterns”, “Archive Layouts”. These categories help when building templates, separating template-focused designs from content-focused patterns. The blockTypes property can further refine pattern availability in template contexts.

Best Practices for Pattern Development

Create patterns that solve specific design challenges your users face. Generic patterns provide less value than targeted solutions for common content types—testimonial sections, pricing comparisons, team member grids. Focus on patterns that dramatically simplify complex layouts.

Use theme.json preset values in your patterns rather than hardcoded values: "backgroundColor":"primary" instead of "backgroundColor":"#007cba". This ensures patterns respect Global Styles customizations, maintaining design consistency when users modify their color palette.

Test patterns with various content lengths. Does your two-column testimonial pattern break with very short quotes? How does the hero pattern handle extremely long headlines? Build resilience into pattern layouts using appropriate block settings and responsive design considerations.

Document your patterns, especially for client projects or theme distribution. Include pattern descriptions that explain use cases and any special considerations. Consider creating pattern documentation pages showing all available patterns with usage guidance.

Block patterns represent one of WordPress’s most powerful tools for accelerating content creation while maintaining design quality. By building comprehensive pattern libraries tailored to your users’ needs, you dramatically improve their editing experience while ensuring professional, consistent results. Patterns bridge the gap between design freedom and guided simplicity, empowering users to create beautiful content efficiently.