Создание паттернов редакторе Gutenberg это довольно простая задача. Гораздо важнее понять для чего и в каких случаях это может быть удобно и применимо на практике.
Создание паттерна
- Создаем в любой записи необходимый набор блоков, копируем и их.
2. Экранируем содержимое для JSON в специальном конвертере (JSON Escape).
3. Создаем функцию с пользовательским паттерном:
function my_custom_wp_block_patterns() {
register_block_pattern(
'page-intro-block/my-custom-pattern',
array(
'title' => __( 'Page Intro Blocks', 'page-intro-block' ),
'description' => _x( 'Includes a cover block, two columns with headings and text, a separator and a single-column text block.', 'Block pattern description', 'page-intro-block' ),
'content' => "<!-- wp:cover -->\n<div class=\"wp-block-cover has-background-dim\"><div class=\"wp-block-cover__inner-container\"></div></div>\n<!-- /wp:cover -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:heading -->\n<h2>Heading</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Content Area #1</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:heading -->\n<h2>Heading</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Content Area #2</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:separator {\"className\":\"is-style-wide\"} -->\n<hr class=\"wp-block-separator is-style-wide\"/>\n<!-- /wp:separator -->\n\n<!-- wp:paragraph -->\n<p>Content Area #3</p>\n<!-- /wp:paragraph -->",
'categories' => array('header'),
)
);
}
add_action( 'init', 'my_custom_wp_block_patterns' );В ‘content’ вставляем скопированное экранированное содержимое с составом блоком.
‘categories’ — в какой категории паттернов он будет выводится.
