Работа с паттернами в WordPress

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

В этой статье я подробно расскажу как регистрировать и удалять паттерны и поделюсь несколькими советами по организации кода.

Паттерны расположены в меню вставки блоков в отдельной вкладке. По умолчанию в WordPrеss доступно несколько стандартных паттернов, которые разделены на категории: Кнопки, Столбцы, Галлерея, Заголовки, Текст.

Некоторые темы и плагины так же регистрируют паттерны, как например Twenty Twenty-One:

После добавления на страницу, каждый из блоков паттерна становится доступным для редактирования.

Эта простая система позволяет очень быстро создавать страницы разной сложности и по сути заменяет необходимость в шаблонах страниц.

В WordPress cуществует две функции относящиеся к регистрации паттернов.

register_block_pattern_category() — регистрирует новую категорию паттернов, эта функция принимает два обязательных аргумента:

• $category_name — название категории на английском языке, строчными буквами без пробелов
• $category_properties — массив свойств категории который поддерживает только одно свойство label — название категории, которое пользователи будут видеть в меню
  

register_block_pattern() — регистрирует новый паттерн. Эта функция так же принимает два обязательных аргумента:

• $pattern_name — название паттерна на английском языке, строчными буквами без пробелов. Хорошая практика использовать префикс темы или плагина в названии, чтобы избежать конфликтов с другими расширениями
• $pattern_properties — массив свойств паттерна

$pattern_properties поддерживает следующие свойства:

• title — название паттерна, которое будет отображаться в меню
• content — код паттерна
• categories — категории, к которым относится паттерн
  
• description — короткое описание паттерна
• keywords – ключевые слова, по которым пользователь может найти паттерн в поиске
• viewportWidth — ширина контейнера паттерна в предпросмотре

title и content — обязательные параметры, остальные опциональные.

Рассмотрим простой пример. Допустим мы работаем над проектом, где на нескольких страницах повторяется вот такая комбинация блоков:

Для начала создадим эту комбинацию на чистой странице:

Далее перейдем в режим редактирования кода:

... и скопируем содержание страницы, оно нам понадобится для указания свойства $pattern_properties['content'].

Но прежде чем использовать скопированный код, его нужно подготовить для вывода на экран. Это можно сделать с помощью инструмента CodeBeautify.

Готовый код паттерна должен выглядеть примерно так:

Далее создадим отдельную категорию. Этот шаг не обязательный, потому что можно использовать стандартные категории, доступные "из коробки".

Далее используем register_block_pattern(), чтобы зарегистрировать паттерн:

Обратите внимание, что для корректной работы register_block_pattern_category() и register_block_pattern() должны вызываться функцией привязанной к хуку init.

Если мы все сделали правильно, то в редакторе должен появиться новый паттерн:

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

Это можно исправить если вынести код паттернов в отдельные файлы.

В случае нашего примера, создадим файл c кодом паттерны в директории плагина: patterns/intro-with-two-columns.html и затем используем file_get_contents() для указания свойства $pattern_properties['content']:

Этот подход позволяет гораздо быстрее найти код необходимого паттерна и поддержку проекта проще.

Часто бывает, что тема или плагины регистрируют паттерны, которые мы не хотим использовать на проекте. Для этих случаев в WordPress существует две функции для удалением паттернов.

unregister_block_pattern_category() — удаляет категории паттернов. Принимает только один аргумент — название категории.

unregister_block_pattern() — удаляет паттерн. Также принимает только один аргумент — название паттерна.

На примере это выглядит следующим образом:

Этот код удалит категорию и паттерн, которые мы зарегистрировали ранее.

Точно так же можно удалить стандартные паттерны. Код ниже удалит категорию "Кнопки" и оба паттерна, которые к ней относятся:

Для справки приведу названия всех стандартных паттернов:

... и категорий:

Также отмечу, что если вам необходимо удалить все стандартные паттерны лучше использовать функцию remove_theme_support():

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

А появление отдельной директории для паттернов означает, что разработчики и сообщество WordPress хотят и дальше продвигать паттерны как один из основных инструментов cоздания сайтов на WordPress.

Поэтому если вы еще не пользовались паттернами, советую ознакомится с официальной документацией и попробовать написать новый паттерн для следующего проекта. А если остались вопросы — задавайте в комментариях.