Block Pattern Generator

Build the pattern from real block markup, then take it either way: a PHP registration call, or the file with the header comment a block theme reads from /patterns.

The pattern

Title

namespace/slug

viewport width

text domain

Description

Read aloud by screen readers in the inserter. Describe the layout, not the marketing.

Categories

Block types it can replace

Optional. Without any, the pattern only appears in the inserter.

Block markup

balanced · 6 blocks

<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80)">

<h1 class="wp-block-heading has-text-align-center">Everything in one place</h1>

<p class="has-text-align-center">One clear sentence about what this is and who it helps.</p>

<div class="wp-block-buttons">

<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Get started</a></div>

<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Read the docs</a></div>

</div>

</div>

6 opening tags, 6 closing — balanced.

Options

Heredoc for the markup

Keeps the block comments readable instead of escaping every quote.

Show in the inserter

Off hides it, leaving it available only through blockTypes.

<?php
/**
 * Title: Hero with call to action
 * Slug: mytheme/hero-cta
 * Categories: featured, call-to-action
 * Description: A full-width heading, a line of copy and two buttons.
 * Viewport Width: 1280
 *
 * Generated with WP CodeKit — powered by GrowQuest (https://growquest.io).
 */
?>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80)">
<!-- wp:heading {"level":1,"textAlign":"center"} -->
<h1 class="wp-block-heading has-text-align-center">Everything in one place</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">One clear sentence about what this is and who it helps.</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">Get started</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Read the docs</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:group -->