What is a Block Pattern?
A block pattern is a predefined layout of blocks that you can easily insert into a WordPress page or post. This allows you to quickly create complex designs with just a click.
Introduction to Hybrid Themes
In this tutorial, I’m working with a hybrid theme. A hybrid theme is a traditional WordPress theme that uses classic PHP but also incorporates some of the new block-based features from WordPress’s Full Site Editing (FSE). This approach allows us to use both classic theme files and modern blocks, giving us more flexibility and visual control over our content.
Creating a Block Pattern
I want to create a reusable block pattern. I’ve already built a layout in the editor that includes a container block, a header, and a query loop. This layout is designed to display the three latest posts from a specific category—the Wellness category—in a three-column grid on desktop and a stacked layout on mobile, with the title at the top.
While this layout was easy to build in the editor, I want to make it reusable so I can easily display the three most recent posts from any other category. To do that, I’ll save this layout as a block pattern. This will allow me to reuse it multiple times, each time displaying posts from a different category.
Setting Up the Block Pattern in a Hybrid Theme
Since I’m using a hybrid theme, there are a few additional steps I need to take. Unlike a fully block-based theme, I’ll need to create a PHP file to register the block pattern.
Step 1: Create the Patterns Directory
First, I’ll create a new directory in my theme called patterns. Inside this directory, I’ll create a file called latest-posts-by-category.php.
Step 2: Define the Block Pattern
This file will do several things:
- It will register the block pattern with WordPress.
- It will link to an image that shows a preview of the block pattern in the editor.
- It will contain the block’s content.
- It will also create a new category for this pattern and place it within that category.
Here’s the code for the file. Notice how I’m using a variable to hold the content of the block pattern. In the next step, I’ll replace this variable with the actual content from the editor.
if ( function_exists( 'register_block_pattern_category' ) ) {
register_block_pattern_category(
'hello-gurl',
array( 'label' => __( 'Hello Gurl', 'hellogurl' ) )
);
}
if ( function_exists( 'register_block_pattern' ) ) {
register_block_pattern(
'hellogurl/category-block-pattern',
array(
'title' => __( 'Category Block Pattern', 'hellogurl' ),
'description' => _x( 'A custom block pattern displaying a category grid with posts.', 'Block pattern description', 'hellogurl' ),
'content' => $block_pattern_contents,
'categories' => array( 'hello-gurl' ),
'viewportWidth' => 1000,
'image' => get_template_directory_uri() . '/assets/images/category-block-pattern.jpg',
)
);
}Adding the Block Pattern Content
Now, we need to assign the actual content of the block pattern to the $block_pattern_contents variable. We can copy the content directly from the code editor on the page where we first built the layout.
Here’s how the file looks after adding the content:
if ( function_exists( 'register_block_pattern_category' ) ) {
register_block_pattern_category(
'hello-gurl',
array( 'label' => __( 'Hello Gurl', 'hellogurl' ) )
);
}
// Define the block pattern content.
$block_pattern_contents = '
<!-- wp:uagb/container {"block_id":"7307d8cb","topPaddingDesktop":16,"paddingLink":false,"variationSelected":true,"isBlockRootParent":true} -->
<div class="wp-block-uagb-container uagb-block-7307d8cb alignfull uagb-is-root-container"><div class="uagb-container-inner-blocks-wrap"><!-- wp:uagb/container {"block_id":"14b645f5","leftPaddingDesktop":32,"paddingLink":false,"topMarginDesktop":0,"bottomMarginDesktop":0,"leftMarginDesktop":0,"rightMarginDesktop":0,"marginLink":false,"isBlockRootParent":true} -->
<div class="wp-block-uagb-container uagb-block-14b645f5 alignfull uagb-is-root-container"><div class="uagb-container-inner-blocks-wrap"><!-- wp:heading -->
<h2 class="wp-block-heading">Wellness</h2>
<!-- /wp:heading --></div></div>
<!-- /wp:uagb/container -->
<!-- wp:query {"queryId":13,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false,"taxQuery":{"category":[4]}},"metadata":{"categories":["posts"],"patternName":"core/query-grid-posts","name":"Grid"}} -->
<div class="wp-block-query"><!-- wp:post-template {"fontSize":"medium","layout":{"type":"grid","columnCount":3}} -->
<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->
<div class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:post-featured-image {"isLink":true} /-->
<!-- wp:post-title {"isLink":true,"fontSize":"medium"} /-->
<!-- wp:post-excerpt {"fontSize":"medium"} /-->
<!-- wp:read-more /--></div>
<!-- /wp:group -->
<!-- /wp:post-template --></div>
<!-- /wp:query --></div></div>
<!-- /wp:uagb/container -->
';
// Register the block pattern.
if ( function_exists( 'register_block_pattern' ) ) {
register_block_pattern(
'hellogurl/category-block-pattern',
array(
'title' => __( 'Category Block Pattern', 'hellogurl' ),
'description' => _x( 'A custom block pattern displaying a category grid with posts.', 'Block pattern description', 'hellogurl' ),
'content' => $block_pattern_contents,
'categories' => array( 'hello-gurl' ),
'viewportWidth' => 1000,
'image' => get_template_directory_uri() . '/assets/images/category-block-pattern.jpg',
)
);
}Loading the Block Pattern
Finally, to make sure WordPress loads this new block pattern, we need to include the file in our theme’s functions.php:
/**
* Block patterns.
*/
require_once get_stylesheet_directory() . '/patterns/latest-posts-by-category.php';Summary
With these steps, we’ve created a reusable block pattern that’s easy to insert into any page or post. By organizing it in a custom category and providing a visual preview, we’ve made it straightforward to find and use. This setup is a bit more involved because we’re working with a hybrid theme, but it gives us the flexibility to mix traditional and modern WordPress features.