Паттерны в 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, который я использовала для регистрации блока с кнопкой.

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

Вот и все