Паттерны в Gutenberg

Прежде чем начать, давайте разберемся что такое паттерны.

Паттерны представляют собой один или несколько настроенных блоков. Хранятся они в виде HTML внутри PHP кода. Паттерн подразумевает под собой многократное его использование на сайте. Если он будет использован всего один или два раза, то это уже и не паттерн вовсе.

Паттерны можно найти во вкладке паттернов, при создании страницы и/или поста:

По умолчанию доступно несколько видов — кнопки, столбцы, галерея, заголовки и текстовые блоки.

Выбираете необходимый и добавляете его в редактор. После добавления, паттерн уже никак не привязан к оригинальному шаблону паттерна. То есть, это самостоятельный набор блоков. Вы можете его изменять и он никуда не исчезнет, если вдруг оригинальный паттерн будет удален.

Паттерны можно создать как в самой теме, так и отдельным плагином.

Создание паттерна в Gutenberg

А теперь давайте попробуем создать свой паттерн.

Для этого мы будем использовать функцию register_block_pattern(), подробнее о ней можете почитать в статье Block Patterns API.

Шаг 1 — копируем содержимое

Перед тем как начать, создайте необходимый набор блоков, или скопируйте настройки одного из кастомных блоков.

В примере я буду делать свою кнопку для проекта. Итак сперва добавим паттерн в редактор:

Далее скопируем его содержимое. Выделяем родительский блок и копируем:

Шаг 2 — регистрируем паттерн

Прежде чем использовать скопированное содержимое внутри функции register_block_pattern(), мы должны его очистить. То есть, код должен быть в одну строку и экранировать все кавычки. Можно это сделать вручную, или воспользоваться сервисом.

Дальше регистрируем наш паттерн. Используем хук init и функция register_block_pattern()

Следующий код вы должны добавить в functions.php вашей темы.

add_action( 'init', 'astrolog_register_block_pattern', 25 );

function astrolog_register_block_pattern() {

	if ( class_exists( 'WP_Block_Patterns_Registry' ) ) {


          register_block_pattern(
			'astrolog/cta-pattern',
			array(
				'title'       => 'Кнопка CTA',
				'description' => 'Этот паттерн позволяет вам вставить кнопку на сайт.',
				'content'     => "<!-- wp:buttons --><div class="wp-block-buttons"><!-- wp:button {"borderRadius":4,"style":{"color":{"background":"#082853","text":"#ffffff"}}} -->
        <div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background" style="border-radius:4px;background-color:#082853;color:#ffffff">Записаться на сеанс</a></div><!-- /wp:button --></div><!-- /wp:buttons -->",
				'categories'  => array( 'astrolog' ),
			)
		);

	}

}

Я изменила немного кнопки, а именно название и количество. По проекту, мне была нужна одна кнопка 😉

Разберем, что есть что:

cta-pattern — название паттерна
title — заголовок
description — описание
content — код нашего паттерна
categories — категория паттерна. В примере она кастомная, но можно использовать и предустановленные (buttons, gallery, header, text, columns).

А вот и сам результат:

Категории паттернов

Своя категория

У паттернов есть несколько предопределённых категорий, о которых я говорила ранее. Но мы можем зарегистрировать свою собственную категорию.

Для этого воспользуемся функцией register_block_pattern_category():

add_action( 'init', 'astrolog_register_pattern_category', 25 );

function astrolog_register_pattern_category() {
	if ( class_exists( 'WP_Block_Patterns_Registry' ) ) {

		register_block_pattern_category(
			'astrolog',
			array( 'label' => 'Astrolog' )
		);

	}
}

Как вы наверное уже поняли, я зарегистрировала категорию под названием «astrolog».

Отключение категории

Все, что нужно для этого — это название категории, хук init и функция unregister_block_pattern_category(). Например:

add_action( 'init', 'astrolog_unregister_pattern_category', 25 );
 
function astrolog_unregister_pattern_category() {
	if ( class_exists( 'WP_Block_Patterns_Registry' ) ) {
 
		unregister_block_pattern_category( 'buttons' ); // Кнопки
 
	}
}

Здесь я отключила категорию «Кнопки». Вы можете отключить любую ненужную категорию или же их все.

Отключение паттернов

Если же паттерны вам не нужны, они отвлекают вас и раздражают, то вы можете их отключить:

Отключение всех паттернов

remove_theme_support( 'core-block-patterns' );

Отключение определенных паттернов

add_action( 'init', 'astrolog_unregister_pattern', 25 );
 
function astrolog_unregister_pattern() {
	if ( class_exists( 'WP_Block_Patterns_Registry' ) ) {
		unregister_block_pattern( 'astrolog/cta-pattern' );
	}
}

В данном примере отменяется регистрация паттернов с именем cta-pattern, который я использовала для регистрации блока с кнопкой.

По сути, чтобы отключить какой-либо паттерн, вам просто нужно знать его название.

Вот и все 😉