Skip to main content

​
What are Block Patterns?

Block patterns are pre-designed block layouts that users can insert into their content with a single click. They’re like templates for common content structures.

​
Pattern Structure

Bifrost Noise includes patterns organized by type: 
patterns/
├── archive-header/           # Archive page headers
├── archive-query/            # Post query loops
├── single-header/            # Single post/page headers
├── post-byline-default.php   # Author and date
├── post-byline-short.php     # Minimal byline
├── post-excerpt.php          # Post excerpt layout
├── post-meta-default.php     # Post metadata
└── query-grid.php            # Grid layout for posts

​
Creating a Pattern

Patterns are PHP files that register patterns using register_block_pattern():
post-byline-default.php
<?php
/**
 * Title: Post Byline: Default
 * Slug: bifrost-noise/post-byline-default
 * Categories: posts
 * Description: Displays post author, date, and categories.
 */

register_block_pattern(
	'bifrost-noise/post-byline-default',
	[
		'title'       => __('Post Byline: Default', 'bifrost-noise'),
		'description' => __('Displays post author, date, and categories.', 'bifrost-noise'),
		'categories'  => ['posts'],
		'keywords'    => ['author', 'date', 'meta'],
		'content'     => '
			<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap"}} -->
			<div class="wp-block-group">
				<!-- wp:post-author {"showAvatar":false,"showBio":false} /-->
				<!-- wp:post-date /-->
				<!-- wp:post-terms {"term":"category"} /-->
			</div>
			<!-- /wp:group -->
		',
	]
);
Pattern file headers are optional but recommended for documentation purposes. The register_block_pattern() call is what actually registers the pattern.

​
Pattern Parameters

​
title
string
required
Display name shown in the pattern inserter
​
description
string
Description shown when hovering over the pattern
​
categories
array
Pattern categories for organization. Common values: posts, text, buttons, header, footer
​
keywords
array
Search keywords to help users find the pattern
​
content
string
required
Block markup (HTML with block comments) that makes up the pattern
​
viewportWidth
int
Width in pixels for the pattern preview (default: 1200)
​
blockTypes
array
Block types this pattern is designed for (shows up in block variations)
​
postTypes
array
Limit pattern to specific post types

​
Archive Header Patterns

Patterns for archive page headers:
archive-header/default.php
register_block_pattern(
	'bifrost-noise/archive-header-default',
	[
		'title'      => __('Archive Header: Default', 'bifrost-noise'),
		'categories' => ['header'],
		'content'    => '
			<!-- wp:group {"align":"full","layout":{"type":"constrained"}} -->
			<div class="wp-block-group alignfull">
				<!-- wp:query-title {"type":"archive"} /-->
				<!-- wp:term-description /-->
			</div>
			<!-- /wp:group -->
		',
	]
);

​
Query Patterns

Patterns for displaying post lists:
query-grid.php
register_block_pattern(
	'bifrost-noise/query-grid',
	[
		'title'      => __('Post Grid', 'bifrost-noise'),
		'categories' => ['posts'],
		'blockTypes' => ['core/query'],
		'content'    => '
			<!-- wp:query {"query":{"perPage":9,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date"}} -->
			<div class="wp-block-query">
				<!-- wp:post-template {"layout":{"type":"grid","columnCount":3}} -->
					<!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9"} /-->
					<!-- wp:post-title {"isLink":true} /-->
					<!-- wp:post-excerpt /-->
				<!-- /wp:post-template -->
				<!-- wp:query-pagination /-->
			</div>
			<!-- /wp:query -->
		',
	]
);

​
Single Post Patterns

Patterns for single post layouts:
post-excerpt.php
register_block_pattern(
	'bifrost-noise/post-excerpt',
	[
		'title'       => __('Post Excerpt', 'bifrost-noise'),
		'description' => __('Post excerpt with read more link.', 'bifrost-noise'),
		'categories'  => ['posts'],
		'content'     => '
			<!-- wp:group {"layout":{"type":"constrained"}} -->
			<div class="wp-block-group">
				<!-- wp:post-excerpt {"moreText":"Continue reading"} /-->
			</div>
			<!-- /wp:group -->
		',
	]
);

​
Using Patterns in Templates

Reference patterns directly in template files:
single-post.html
<!-- wp:pattern {"slug":"bifrost-noise/post-byline-default"} /-->
Or use pattern placeholders: 
<!-- wp:pattern {"slug":"core/query-standard-posts"} /-->

​
Pattern Categories

Organize patterns into categories:
functions.php
register_block_pattern_category(
	'bifrost-music',
	[
		'label' => __('Music', 'bifrost-noise'),
	]
);
Create custom pattern categories to organize theme-specific patterns separately from WordPress core patterns.

​
Pattern Variations

Provide multiple variations of similar patterns:
  • post-byline-default.php - Full byline with avatar, author, date, categories
  • post-byline-short.php - Minimal byline with just author and date

​
Loading Patterns

Bifrost Noise auto-loads pattern files from the /patterns/ directory. You can also register patterns programmatically: 
add_action('init', function() {
    register_block_pattern(
        'my-theme/my-pattern',
        [
            'title'   => 'My Pattern',
            'content' => '<!-- wp:paragraph --><p>Hello!</p><!-- /wp:paragraph -->',
        ]
    );
});

​
Pattern Best Practices

Use Descriptive Names

Name patterns clearly: archive-header-default not header1

Add Keywords

Include relevant keywords for easier discovery

Provide Variations

Offer multiple layouts for the same content type

Keep It Simple

Patterns should be starting points, not complete designs

​
Testing Patterns

1

Access Pattern Library

In the block editor, click the + button and select Patterns
2

Find Your Pattern

Navigate to the appropriate category or search by keyword
3

Insert Pattern

Click the pattern to insert it into your content
4

Customize

Edit the inserted blocks as needed - patterns are templates, not locked content

​
Next Steps

Templates

Learn about block templates

Theme.json

Configure global styles

Build docs developers (and LLMs) love

Get started for freeTalk to us