Register block patterns and a category
Add a pattern category and a reusable call-to-action block pattern with translatable strings from your theme.
WordPressThemingblock-patternsgutenbergeditori18n
Code
<?php
/**
* Block pattern category and patterns.
*
* @package Acme_Theme
*/
defined( 'ABSPATH' ) || exit;
function acme_register_patterns(): void {
register_block_pattern_category(
'acme-sections',
array( 'label' => __( 'Acme sections', 'acme-theme' ) )
);
$heading = esc_html__( 'Ready when you are', 'acme-theme' );
$text = esc_html__( 'Start a free trial and see the dashboard with your own data.', 'acme-theme' );
$button = esc_html__( 'Start free trial', 'acme-theme' );
$link = esc_url( home_url( '/signup/' ) );
$content = <<<HTML
<!-- wp:group {"align":"full","backgroundColor":"surface","layout":{"type":"constrained"},"style":{"spacing":{"padding":{"top":"4rem","bottom":"4rem"}}}} -->
<div class="wp-block-group alignfull has-surface-background-color has-background" style="padding-top:4rem;padding-bottom:4rem">
<!-- wp:heading {"textAlign":"center","level":2} -->
<h2 class="wp-block-heading has-text-align-center">{$heading}</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">{$text}</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons">
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="{$link}">{$button}</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:group -->
HTML;
register_block_pattern(
'acme-theme/call-to-action',
array(
'title' => __( 'Call to action band', 'acme-theme' ),
'description' => __( 'A centred heading, short text and one button.', 'acme-theme' ),
'categories' => array( 'acme-sections' ),
'keywords' => array( 'cta', 'banner', 'signup' ),
'content' => $content,
)
);
}
add_action( 'init', 'acme_register_patterns' );
How it works
What it solves
Editors rebuild the same sections again and again. A registered block pattern gives them a one-click starting point inside the inserter, styled by your theme, and keeps the markup in version control instead of in a copied page.
How it works
A pattern is just serialised block markup. register_block_pattern_category() creates a tab in the inserter, and register_block_pattern() attaches the markup, title, keywords and categories under a namespaced name. Strings are escaped and translated before they are interpolated into a heredoc, so the pattern is both safe and ready for translation.
The markup must match what the editor would save, including the comment delimiters and the generated classes, or the block shows a validation warning.
Adapting it
The quickest way to author a pattern is to build it in the editor, switch to the code editor, and paste the markup here. Move to a file under /patterns with a header comment on WordPress 6.0 and later if you prefer one file per pattern. Use viewportWidth to control the inserter preview width.
Pitfalls
- Do not run user input through the heredoc; only escaped, trusted strings belong in it.
- Colour slugs in the markup must exist in
theme.json, otherwise the class has no effect. - Registering on
initis required; earlier hooks miss the category registry. - Changing markup later does not update pattern copies already inserted into posts.
How to use it
Save as inc/patterns.php and require it from functions.php.
Open any page, press the inserter, choose Patterns, then the Acme sections tab.
Change the /signup/ path and strings to suit, and add more register_block_pattern() calls for further sections.
Licence: GPL-2.0-or-later. This snippet comes from WordPress code and is GPL-2.0-or-later.