register_block_pattern( string $pattern_name, array $pattern_properties )
Registers a new pattern.
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
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 -->", ) );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' );