Работа с паттернами в 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.
Поэтому если вы еще не пользовались паттернами, советую ознакомится с официальной документацией и попробовать написать новый паттерн для следующего проекта. А если остались вопросы — задавайте в комментариях.