How to Build WordPress Block Patterns — The Complete 2026 Guide

Since WordPress 6.x, block patterns have become an essential feature for creators. By registering frequently used layouts as patterns, clients too can add professional-quality sections in just a few clicks. This article systematically explains the latest creation methods as of 2026, from block.json to theme.json integration.

What Is a Block Pattern?

A block pattern is a mechanism for registering a combination of multiple blocks as a single template. For example, you can save frequently used compositions such as a "hero section (heading + paragraph + button + background image)" or a "pricing table (3 columns + price + CTA)" in a reusable form.

The difference from template parts is that a pattern is "copied when inserted." Template parts are reference-based — changing the original reflects everywhere it is used — but a pattern becomes an independent set of blocks after insertion, so it can be customized individually. This flexibility is why patterns are valued in client work.

How to Register a Pattern: PHP and block.json

There are several ways to register a pattern. The most basic is to use the register_block_pattern() function in PHP. Write it in functions.php or a plugin file.

In register_block_pattern(), the first argument specifies a unique namespaced name (e.g., mytheme/hero-section), and the second-argument array sets properties such as title, description, content, and categories. The content is written as a string of block markup.

In WordPress 6.0 and later, you can also use a mechanism that auto-registers patterns simply by placing PHP files in the theme's /patterns directory. When you write meta information such as Title, Slug, and Categories in a PHP comment at the top of the file, WordPress automatically recognizes it as a pattern. This method is recommended because the code is clearer and patterns are easier to manage.

Unifying Design Through theme.json Integration

A pattern's true value shines through integration with theme.json. By referencing the color palette, font sizes, and spacing values defined in theme.json from within a pattern, you can automatically maintain consistency with the entire theme.

Specifically, use CSS variables such as var(–wp–preset–color–primary) or var(–wp–preset–spacing–40) within the pattern's block markup. This way, when you change a color in theme.json, the colors in the pattern follow automatically. The best practice is to always reference preset values rather than using hard-coded values.

Also, combined with theme.json's customTemplates setting, you can pre-place patterns in a specific page template. For example, you can deliver an experience where selecting the LP template opens the editor with the hero, features, pricing, and CTA patterns already inserted.

Example: Creating a Hero Section Pattern

Let's actually create a hero section pattern. Create hero-section.php in the theme's /patterns directory. In the PHP comment at the top of the file, write the Title (display name), Slug (internal name), and Categories (pattern category).

In the content section, wrap the entire section in a wp:group block and give it the alignfull attribute for full-width display. Place wp:heading, wp:paragraph, and wp:buttons inside. For the background color, reference the CSS variable of a custom color defined in theme.json, and use a preset value for the text color too.

For spacing, reference the values defined in theme.json's spacingScale via the blockGap and padding attributes. This way, the site-wide spacing rules and the spacing within the pattern are unified, maintaining design consistency. Avoid hard-coding spacing as px values, since that would require fixing all patterns when changing themes.

Best Practices for Managing and Operating Patterns

As patterns increase, management tends to become cumbersome. Here is a summary of points for operating them efficiently.

  • Unify your naming convention: Decide on a naming convention that includes the section type, such as mytheme/section-hero and mytheme/section-pricing. This lets you quickly find the pattern you want via editor search.
  • Classify categories appropriately: Create your own categories with register_block_pattern_category() and organize patterns by purpose. Classifications like "Header," "Content," "CTA," and "Footer" are common.
  • Make use of the lock feature: Setting the templateLock attribute on blocks within a pattern prevents clients from accidentally breaking the layout structure. Using the contentOnly lock lets you make only text and images editable while keeping the structure fixed.
  • Include them in version control: Manage the PHP files in the /patterns directory with Git to track change history. For patterns saved in the database (those created in the admin), use the export WP-CLI command to back them up.

Block patterns are a feature that dramatically improves WordPress production efficiency. Especially now, during the transition to FSE (Full Site Editing), mastering pattern design integrated with theme.json is a major advantage for creators. Start by turning one section you use often in your own theme into a pattern.

Build WordPress sites faster.

An investment that pays for itself in a single project.

Get started now

One-time ¥7,800 (tax incl.) · Unlimited sites · Client work OK