How to Build and Reuse WordPress Components with Block Patterns (with Code Examples)

WordPress block patterns are one of the easiest ways to create reusable design components without writing a plugin or custom block. I use them constantly across my sites—especially with block themes like Frost—to speed up design, keep consistency, and hand off clean solutions to clients.

🔍 What Is a Block Pattern?

A block pattern is a predefined layout of blocks—columns, text, buttons, media, etc.—that you can insert into any post or page with one click.

• Pattern: Reusable layout for quick use and small edits.
• Reusable Block: Content synced across the site (editing one edits all).
• Template Part: Structural part of a theme (header, footer, etc.).

🛠 Step 1: Create Your Pattern

In the Block Editor, design the layout you want to reuse. You can use core or third-party blocks. For example, this CTA pattern:

📦 Step 2: Register the Pattern

To make this layout available across your site, register it with PHP in your theme or plugin:

// functions.php
register_block_pattern(
  'jonimms/cta-pattern',
  [
    'title' => 'Call to Action',
    'description' => 'Centered heading, text, and button.',
    'categories' => ['cta'],
    'content' => '<!-- wp:group {...} -->...'
  ]
);

Or for block themes, add it via a /patterns/ folder with a cta.php file that returns the block markup.

🧩 Step 3: Add It to theme.json

Declare the patterns directory in your theme.json to load them automatically:

{
  "version": 2,
  "patterns": [
    "cta",
    "hero",
    "testimonial"
  ]
}

📚 Bonus: Pattern Library Page

You can create a “Pattern Library” page using the block editor and simply insert all your custom patterns. It’s great for visual reference or sharing with clients.

✅ Why Use Block Patterns?

• Design faster without repeating yourself.
• Keep layout consistency across posts and pages.
• Easy to update or replace patterns without breaking content.

If you haven’t explored patterns yet, start with just one and you’ll quickly realize how powerful they are. I use them for hero sections, CTAs, footers, testimonials—you name it.

Got a favorite use for block patterns? Drop a comment or hit me up on jonimms.com/#contact.