Register Patterns with plugin
To register custom block patterns, you can do this in "theme.json" if you use a FSE theme, but you also can do this with php using register_block_pattern helper function in theme or plugin.
Values to submit
Generate a plugin to create your own blocks patterns, follow these steps:
In WordPress Block editor, generate your pattern content:
- Open a new blank page or post on your website
- Create the pattern you want to add to your template. Use as many blocks as you like.
- Select all the blocks you have added : Press Shift on the keyboard and select the blocks you want to have in your pattern.
- Copy the content: click on the three-dot menu and select "Copy"
- Paste the Block HTML markup copied in textarea "Content" in this page. Quotes, newlines will be automatically escaped.
- TIPS: You can also use this WordPress pattern library just copy and paste in "Content" on this page.
NB: All inputs below are required to generate your plugin.
Plugin header
Register Block Pattern category
Register Block Pattern
Remove Core Block patterns
Plugin Generated
Exemple
The default values in the code below is "Two Buttons" exemple, it will be replaced by your own.
<?php
// Plugin Default Code Exemple to create a "two buttons" pattern
/**
* Plugin Name: My Pattern Gut
* Description: Add custom Patterns
* Version: 1.0
*/
defined( 'ABSPATH' ) || exit;
/* Register your custom category */
if ( function_exists( 'register_block_pattern_category' ) ) {
function mypatterngut_register_pattern_categories() {
register_block_pattern_category(
'mypatterns',
array( 'label' => __( 'MyPatterns', 'mypatterngut' ) )
);
}
add_action( 'init', 'mypatterngut_register_pattern_categories' );
}
/* Register your block Pattern */
if ( function_exists( 'register_block_pattern' ) ) {
function mypatterngut_register_my_patterns() {
register_block_pattern(
'mypatterngut/twobuttons',
array(
'title' => __( 'Two buttons', 'mypatterngut' ),
'description' => _x( 'Two horizontal buttons, the left button is 25% width, and the right button is 75%.', 'Block pattern description', 'mypatterngut' ),
'categories' => ['mypatterns'],
'content' => "<!-- wp:buttons {\"align\":\"wide\",\"layout\":{\"type\":\"flex\",\"justifyContent\":\"left\",\"orientation\":\"horizontal\",\"flexWrap\":\"wrap\"}} -->\n<div class=\"wp-block-buttons alignwide\"><!-- wp:button {\"backgroundColor\":\"luminous-vivid-amber\",\"textColor\":\"foreground\",\"width\":25} -->\n<div class=\"wp-block-button has-custom-width wp-block-button__width-25\"><a class=\"wp-block-button__link has-foreground-color has-luminous-vivid-amber-background-color has-text-color has-background\" href=\"#\">Button 1</a></div>\n<!-- /wp:button -->\n<!-- wp:button {\"width\":75} -->\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75\"><a class=\"wp-block-button__link\" href=\"#\">Button 2</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->",
)
);
}
add_action( 'init', 'mypatterngut_register_my_patterns' );
}