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.
<?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 -->
About this generator
Block Pattern Generator Online
Paste block markup copied straight out of the editor and this block pattern generator turns it into something registrable: a /patterns file with the correct header comment, a register_block_pattern() call, or a complete plugin. It validates the markup as it goes, so an unbalanced wp:group or a malformed attribute JSON object is caught here rather than as a block-recovery error in the editor.
Four starter layouts — hero, three columns, cover and pull quote — give you valid markup to work from if you are not copying an existing design. A Reference tab documents every property the pattern registry accepts. Free, no account, and nothing you paste leaves the browser.
Reviewed Output tested on WordPress 6.8 · PHP 8.3
Why the block pattern generator beats writing the header comment by hand
Block markup is parsed, not rendered loosely. The HTML comments are the structure: every <!-- wp:x --> needs its <!-- /wp:x -->, the JSON in the opening comment has to parse, and the inner HTML has to match what the block itself would produce. Get one wrong and the editor shows a recovery notice instead of your layout. This generator counts the tags, parses the JSON and checks the header before you ever paste the file into a theme.
Block markup validated, not just wrapped
Opening and closing block comments are counted per block name, self-closing tags are accounted for, and every attribute JSON object is run through a parser. An unbalanced wp:columns or an invalid attribute blob is reported as an error with the offending fragment quoted.
Two output shapes for two ways of shipping
A /patterns file with the Title, Slug, Categories, Block Types, Description, Viewport Width and Inserter header lines, auto-registered by WordPress 6.0 and later; or the register_block_pattern() call for a plugin or a classic theme.
Namespaced slugs enforced
A slug with no namespace is an error, because hero-cta will eventually meet another hero-cta. The Use fix rewrites it to namespace/name derived from your text domain, lowercased and dashed on both sides of the slash.
Custom categories registered for you
Type a category slug that does not exist and the snippet output adds a register_block_pattern_category() call above the pattern. A pattern assigned to an unregistered category is silently ungrouped in the inserter, and the header comment in a /patterns file cannot create one — the Checks tab says so.
The portability traps checked
Hard-coded wp-content/uploads URLs, http://localhost references and image blocks carrying a numeric attachment id are all flagged, because each one points at something that exists only on the machine the pattern was built on.
A heredoc so the markup stays readable
Block markup is full of quotes. The heredoc option writes the content as a nowdoc rather than escaping every apostrophe into a single-quoted string, and the generator recommends it as soon as it sees an apostrophe in your markup.
How does the block pattern generator work?
Build the layout in the editor, copy it, paste it here, then export the shape you need.
- 01
Describe the pattern
Set the inserter title, a
namespace/slug, the viewport width the inserter previews at, the text domain, and a description — that description is what a screen reader announces, so it should say what the layout contains. - 02
Categorise it
Pick from the core categories (featured, banner, call to action, text, gallery, columns, posts, services, testimonials, footer, header) or type your own slug, which gets registered alongside the pattern. Optionally list the block types it can replace, such as
core/post-content. - 03
Paste the block markup
Select your blocks in the editor, copy, and paste into the markup field — or start from one of the four built-in starters. The block count and any structural errors update as you type.
- 04
Pick an output, then export
Choose the
/patternsfile for a block theme, the register call for a plugin or classic theme, or the full plugin file. Clear the Checks tab, then copy or download.
Worked example — a pull quote as a theme patterns file
Slug mytheme/pull-quote, two categories, a 1280px preview width. Saved as patterns/pull-quote.php in a theme, WordPress 6.0 and later registers this automatically with no PHP call at all.
<?php
/**
* Title: Client pull quote
* Slug: mytheme/pull-quote
* Categories: text, testimonials
* Description: A centred quote with a citation line.
* Viewport Width: 1280
*/
?>
<!-- wp:quote {"align":"center"} -->
<blockquote class="wp-block-quote has-text-align-center">
<!-- wp:paragraph -->
<p>They shipped in a week what our last agency scoped in a quarter.</p>
<!-- /wp:paragraph -->
<cite>A client, somewhere</cite>
</blockquote>
<!-- /wp:quote -->The header comment is the registration. Strings in a patterns file are translated by WordPress using the theme text domain, which is why there are no __() calls here — switch to the register-call output and the generator wraps the title, description and keywords for you.
Block patterns — frequently asked questions
The questions that come up when patterns move from the editor into a theme or plugin.
Why is my block pattern not showing up in the inserter?
Check three things. The pattern must be registered on init or later, since the registry does not exist before that. The slug must include a namespace. And if inserter is set to false the pattern is deliberately hidden, remaining available only through blockTypes. A pattern assigned to a category that was never registered still appears, but ungrouped at the bottom.
What is the difference between a patterns file and register_block_pattern()?
A PHP file in a theme patterns directory carries a header comment and is auto-registered by WordPress 6.0 and later, with strings translated using the theme text domain. register_block_pattern() is the explicit call, available since 5.5, and is what a plugin or an older theme needs. The file form cannot register a pattern category, so a custom category still needs the PHP call.
How do I get the block markup for a pattern?
Build the layout in the editor, select the blocks, and copy them — the clipboard holds the serialised block markup, comments and all. Alternatively use the Code editor view (Options, then Code editor) and copy the section you want. Hand-writing block comments is possible but easy to get subtly wrong.
Why does my pattern show a block recovery error?
The markup does not match what the block would have produced. The usual causes are an unclosed block comment, invalid JSON in the opening comment, or inner HTML edited by hand so the class names no longer match the attributes. This generator counts opening against closing comments per block name and parses every attribute object, so all three are caught before you paste.
Why do the images in my pattern break on other sites?
Because the markup carries an absolute URL from your own uploads directory, or an image block with a numeric id attribute that points at a different attachment elsewhere. Ship images inside the theme and reference them with a theme-relative path, or remove the id and let editors pick their own. Both cases are flagged in the Checks tab.
What does viewportWidth do?
It sets the width the inserter renders the preview at, then scales that preview down to fit. Without it the pattern is previewed at the editor width, which makes a full-width layout look cramped and misleading. 1280 suits most desktop layouts; a value under 600 previews the pattern as if on a phone.
Where do I paste the code from the Block Pattern generator?
You have three good options and one bad one. Best is a small site-specific plugin — the generator can output one for you, and it keeps working when you change theme. A code-snippets plugin is fine too. A child theme's functions.php works but ties the code to that theme. Never edit the parent theme: the next update overwrites it and your code is gone.
Can I use the generated code in client work or a commercial plugin?
Yes. The output is ordinary WordPress API calls that you configured — there is no licence attached to it and no attribution required. Use it in client sites, commercial plugins and themes, or products you sell. The generated file carries a short credit comment you are free to delete.
The other Content generators in the library, plus the WordPress tools most often used alongside this one.