Block Patterns in WordPress 5.5

In WordPress 5.5, the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor introduces a new concept called block patterns. The goal is to allow users to build and share predefined block layouts, ready to insert and tweak more easily.

You can find the registered block patterns on the block inserter and add them to your post/page like any other block.

Block Patterns Registration

WordPress 5.5 comes with a number of built-in block patterns but it’s also possible for third-party plugins and themes to register additional block patterns or remove existing ones.

To register a custom block pattern, you can call the register_block_pattern function receives the name of the pattern as the first argument and an array describing properties of the pattern as the second argument. The properties of the block pattern include a title, a description, a categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging., potentially some additional keywords, and the content of the pattern.

function my_plugin_register_block_patterns() {
	register_block_pattern(
		'my-plugin/my-awesome-pattern',
		array(
			'title'       => __( 'Two buttons', 'my-plugin' ),
			'description' => _x( 'Two horizontal buttons, the left button is filled in, and the right button is outlined.', 'Block pattern description', 'my-plugin' ),
			'categories'  => array( 'buttons' ),
			'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', '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', 'my-plugin' ) . "</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->",
		)
	);
}

add_action( 'init', 'my_plugin_register_block_patterns' );

It is also possible to register custom categories for your own block patterns.

Refer to the block patterns documentation for more details about these APIs.

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Block Patterns

While WordPress comes with a number of block patterns built-in, theme authors might want to opt-out of the bundled patterns and provide their own set.

You can do so by removing the core-block-patterns theme support flag.

remove_theme_support( 'core-block-patterns' );

#5-5, #block-editor, #dev-notes