Разработка Custom Gutenberg Блоков, активируемые через разрабатываемый шаблон (theme)
Последние годы часто использовал ACF при разработке сайтов, чтобы дать заказчику возможность редактировать информацию. Иногда приходилось делать виджеты, которые активируются через разрабатываемую тему, обычно использовались они где-то в сайдбаре, где заказчик могу дополнять его дополнительными настраиваемыми блоками меню.
Уже на протяжении двух лет постепенно развивают gutenberg-редактор и очень интересной фичей является возможность внедрять свои кастомные блоки.
Вопрос в чем: как можно активировать эти блоки через разрабатываемую тему? Я знаю, что виджеты можно активировать через тему, а вот для gutenberg-блоков такого не нашел. Или активация gutenberg-блоков производится строго через плагины?
В общем, поделитесь, пожалуйста, вашим опытом. Заранее спасибо!
Ответы (1 шт):
Поискал информацию, вроде бы более менее разобрался. В редакторе есть разделение^ блоки и паттерны. Как я понял, мне конкретно нужны были паттерны, не знаю, чем они принципиально отличаются от блоков, но да ладно.
В течении 2-3 недель постараюсь расписать про свой опыт.
Мне помог код на шаге 4, ссылка на статью.
Добавляется следующий код в functions.php в файлах темы:
add_action( 'init', 'truemisha_register_block_pattern', 25 );
function truemisha_register_block_pattern() {
if ( class_exists( 'WP_Block_Patterns_Registry' ) ) {
register_block_pattern(
'truemisha/hero-pattern',
array(
'title' => 'Мишин паттерн',
'description' => 'Этот паттерн позволяет вам вставить несколько блоков и кнопку с предопределённым текстом.',
'content' => "<!-- wp:group {\"align\":\"full\",\"backgroundColor\":\"black\"} -->\n<div class=\"wp-block-group alignfull has-black-background-color has-background\"><div class=\"wp-block-group__inner-container\"><!-- wp:spacer -->\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer -->\n\n<!-- wp:heading -->\n<h2>Паттерны Gutenberg</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Это пример использования паттерна в Gutenberg. Сначала мы настраиваем блоки в редакторе.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"textColor\":\"white\",\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-white-color has-text-color\">Использовать паттерны</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->\n\n<!-- wp:spacer -->\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div></div>\n<!-- /wp:group -->",
'categories' => array( 'header' ),
)
);
}
}