register_block_pattern( string $pattern_name, array $pattern_properties )
Registers a new pattern.
Contents
Parameters Parameters
- $pattern_name
-
(string) (Required) Pattern name including namespace.
- $pattern_properties
-
(array) (Required) Array containing the properties of the pattern.
Return Return
(bool) True if the pattern was registered with success and false otherwise.
Source Source
File: wp-includes/class-wp-block-patterns-registry.php
function register_block_pattern( $pattern_name, $pattern_properties ) {
return WP_Block_Patterns_Registry::get_instance()->register( $pattern_name, $pattern_properties );
}
Expand full source code Collapse full source code View on Trac View on GitHub
Changelog Changelog
| Version | Description |
|---|---|
| 5.5.0 | Introduced. |
User Contributed Notes User Contributed Notes
You must log in before being able to contribute a note or feedback.
Per the Block Patterns documentation in the Block Editor Handbook, the $pattern_properties array includes:
and the example function given is:
register_block_pattern( 'wpdocs-my-plugin/my-awesome-pattern', array( 'title' => __( 'Two buttons', 'wpdocs-my-plugin' ), 'description' => _x( 'Two horizontal buttons, the left button is filled in, and the right button is outlined.', 'Block pattern description', 'wpdocs-my-plugin' ), 'content' => "<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"backgroundColor\":\"very-dark-gray\",\"borderRadius\":0} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background has-very-dark-gray-background-color no-border-radius\">" . esc_html__( 'Button One', 'wpdocs-my-plugin' ) . "</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"textColor\":\"very-dark-gray\",\"borderRadius\":0,\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color has-very-dark-gray-color no-border-radius\">" . esc_html__( 'Button Two', 'wpdocs-my-plugin' ) . "</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->", ) );Top ↑
Feedback #Feedback
As an addition to the category, I would like to give an example for those who did not know what syntax to use. Since a block pattern can be assigned to multiple categories you can use an array to place it in the right category. example:
register_block_pattern( 'wpdocs-my-plugin/my-awesome-pattern', array( 'title' =&gt; __( 'Two buttons', 'wpdocs-my-plugin' ), 'description' =&gt; _x( 'Two horizontal buttons, the left button is filled in, and the right button is outlined.', 'Block pattern description', 'wpdocs-my-plugin' ), 'content' =&gt; &quot;&lt;!-- wp:buttons {&quot;align&quot;:&quot;center&quot;} --&gt;n&lt;div class=&quot;wp-block-buttons aligncenter&quot;&gt;&lt;!-- wp:button {&quot;backgroundColor&quot;:&quot;very-dark-gray&quot;,&quot;borderRadius&quot;:0} --&gt;n&lt;div class=&quot;wp-block-button&quot;&gt;&lt;a class=&quot;wp-block-button__link has-background has-very-dark-gray-background-color no-border-radius&quot;&gt;&quot; . esc_html__( 'Button One', 'wpdocs-my-plugin' ) . &quot;&lt;/a&gt;&lt;/div&gt;n&lt;!-- /wp:button --&gt;nn&lt;!-- wp:button {&quot;textColor&quot;:&quot;very-dark-gray&quot;,&quot;borderRadius&quot;:0,&quot;className&quot;:&quot;is-style-outline&quot;} --&gt;n&lt;div class=&quot;wp-block-button is-style-outline&quot;&gt;&lt;a class=&quot;wp-block-button__link has-text-color has-very-dark-gray-color no-border-radius&quot;&gt;&quot; . esc_html__( 'Button Two', 'wpdocs-my-plugin' ) . &quot;&lt;/a&gt;&lt;/div&gt;n&lt;!-- /wp:button --&gt;&lt;/div&gt;n&lt;!-- /wp:buttons --&gt;&quot;, 'categories' =&gt; ['custom_category', 'columns'], ) );how to define/register a category can be found here: https://developer.wordpress.org/reference/functions/register_block_pattern_category/ — By MangoWambo —
The docs & handbook don’t seem to mention it, but I gather
register_block_pattern()should be called from a handler attached to theinithook.function wpdocs_register_my_patterns() { register_block_pattern( ... ); } add_action( 'init', 'wpdocs_register_my_patterns' );Top ↑
Feedback #Feedback
Good call! Registering the block pattern straight from functions.php results in the editor crashing with an obscure JS error after opening the patterns pannel, without any PHP errors or warnings being triggered. Calling
register_block_patterninside the init hook solves this perfectly! Thanks! — By Jules Colle —If the core block patterns are removed via:
Make sure that there is at least one block pattern category registered. The block editor crashes if none are present.
A basic example of how to register a new pattern block.
function wpdocs_register_block_patterns() { register_block_pattern( 'wpdocs/my-example', array( 'title' => __( 'My First Block Pattern', 'textdomain' ), 'description' => _x( 'This is my first block pattern', 'Block pattern description', 'textdomain' ), 'content' => '<!-- wp:paragraph --><p>A single paragraph block style</p><!-- /wp:paragraph -->', 'categories' => array( 'text' ), 'keywords' => array( 'cta', 'demo', 'example' ), 'viewportWidth' => 800, ) ); } add_action( 'init', 'wpdocs_register_block_patterns' );