Паттерны были добавлены в 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.Готовый код паттерна должен выглядеть примерно так:<!-- wp:heading --> <h2>Заголовок</h2><!-- /wp:heading --> <!-- wp:paragraph --> <p>Лорем ипсум долор сит амет, дицерет молестиае нец цу. Уллум дицунт воцибус при ин, меа бонорум маиорум персецути цу. Веритус симилияуе ат еос, пробо ассум регионе цу вим, ид ноструд вертерем вим. Еним бонорум адверсариум про ут, нец еирмод импетус фацилис ид, еи яуас лаборамус еос. Не яуо аугуе улламцорпер.</p><!-- /wp:paragraph --> <!-- wp:separator --> <hr class="wp-block-separator" /><!-- /wp:separator --> <!-- wp:columns --> <div class="wp-block-columns"> <!-- wp:column --> <div class="wp-block-column"> <!-- wp:heading {"level":3} --> <h3>Подзаголовок</h3><!-- /wp:heading --> <!-- wp:paragraph {"fontSize":"extra-small"} --> <p class="has-extra-small-font-size">Еним бонорум адверсариум про ут, нец еирмод импетус фацилис ид, еи яуас лаборамус еос. Не яуо аугуе улламцорпер.</p><!-- /wp:paragraph --> <!-- wp:paragraph {"fontSize":"extra-small"} --> <p class="has-extra-small-font-size"><a href="#"><strong>Заказать</strong></a></p><!-- /wp:paragraph --> </div><!-- /wp:column --> <!-- wp:column --> <div class="wp-block-column"> <!-- wp:heading {"level":3} --> <h3>Подзаголовок</h3><!-- /wp:heading --> <!-- wp:paragraph {"fontSize":"extra-small"} --> <p class="has-extra-small-font-size">Еним бонорум адверсариум про ут, нец еирмод импетус фацилис ид, еи яуас лаборамус еос. Не яуо аугуе улламцорпер.</p> <!-- /wp:paragraph --> <!-- wp:paragraph {"fontSize":"extra-small"} --> <p class="has-extra-small-font-size"><a href="#"><strong>Заказать</strong></a> </p><!-- /wp:paragraph --> </div><!-- /wp:column --> </div><!-- /wp:columns -->Далее создадим отдельную категорию. Этот шаг не обязательный, потому что можно использовать стандартные категории, доступные "из коробки".function prefix_register_demo_patterns() { register_block_pattern_category( 'demo-patterns', [ 'label' => esc_html__( 'Demo Patterns', 'textdomain' ) ] ); } add_action( 'init', 'prefix_register_demo_patterns' );Далее используем register_block_pattern(), чтобы зарегистрировать паттерн:function prefix_register_demo_patterns() { register_block_pattern_category( 'demo-patterns', [ 'label' => esc_html__( 'Demo Patterns', 'textdomain' ) ] ); register_block_pattern( 'demo-patterns/intro-with-two-columns', [ 'title' => esc_html__( 'Intro With Two Columns', 'textdomain' ), 'categories' => ['demo-patterns'], 'content' => '<!-- wp:heading --><h2>Заголовок</h2><!-- /wp:heading --><!-- wp:paragraph --><p>Лорем ипсум долор сит амет, дицерет молестиае нец цу. Уллум дицунт воцибус при ин, меа бонорум маиорум персецути цу. Веритус симилияуе ат еос, пробо ассум регионе цу вим, ид ноструд вертерем вим. Еним бонорум адверсариум про ут, нец еирмод импетус фацилис ид, еи яуас лаборамус еос. Не яуо аугуе улламцорпер.</p><!-- /wp:paragraph --><!-- wp:separator --><hr class="wp-block-separator"/><!-- /wp:separator --><!-- wp:columns --><div class="wp-block-columns"><!-- wp:column --><div class="wp-block-column"><!-- wp:heading {"level":3} --><h3>Подзаголовок</h3><!-- /wp:heading --><!-- wp:paragraph {"fontSize":"extra-small"} --><p class="has-extra-small-font-size">Еним бонорум адверсариум про ут, нец еирмод импетус фацилис ид, еи яуас лаборамус еос. Не яуо аугуе улламцорпер.</p><!-- /wp:paragraph --><!-- wp:paragraph {"fontSize":"extra-small"} --><p class="has-extra-small-font-size"><a href="#"><strong>Заказать</strong></a></p><!-- /wp:paragraph --></div><!-- /wp:column --><!-- wp:column --><div class="wp-block-column"><!-- wp:heading {"level":3} --><h3 id="block-aeb0df31-4377-4647-8970-76da5465b475">Подзаголовок</h3><!-- /wp:heading --><!-- wp:paragraph {"fontSize":"extra-small"} --><p class="has-extra-small-font-size" id="block-b5279988-8af3-494a-a8d3-7e1267674ae4">Еним бонорум адверсариум про ут, нец еирмод импетус фацилис ид, еи яуас лаборамус еос. Не яуо аугуе улламцорпер.</p><!-- /wp:paragraph --><!-- wp:paragraph {"fontSize":"extra-small"} --><p class="has-extra-small-font-size" id="block-fce9e860-568b-4d07-9e5b-fa79c30fd89a"><a href="https://default.test/wp-admin/post.php?post=103&action=edit#"><strong>Заказать</strong></a></p><!-- /wp:paragraph --></div><!-- /wp:column --></div><!-- /wp:columns -->', ] ); } add_action( 'init', 'prefix_register_demo_patterns' );Обратите внимание, что для корректной работы register_block_pattern_category() и register_block_pattern() должны вызываться функцией привязанной к хуку init.Если мы все сделали правильно, то в редакторе должен появиться новый паттерн:Эта схема работает если вы добавляете один или два паттерна. Но если вам необходимо зарегистрировать несколько десятков, файл в котором вы регистрируете паттерны будет очень длинным и его будет сложно редактировать.Это можно исправить если вынести код паттернов в отдельные файлы.В случае нашего примера, создадим файл c кодом паттерны в директории плагина: patterns/intro-with-two-columns.html и затем используем file_get_contents() для указания свойства $pattern_properties['content']:function prefix_register_demo_patterns() { register_block_pattern_category( 'demo-patterns', [ 'label' => esc_html__( 'Demo Patterns', 'textdomain' ) ] ); register_block_pattern( 'demo-patterns/intro-with-two-columns', [ 'title' => esc_html__( 'Intro With Two Columns', 'textdomain' ), 'categories' => ['demo-patterns'], 'content' => file_get_contents( plugin_dir_path( __FILE__ ) . 'patterns/intro-with-two-columns.html' ), ] ); } add_action( 'init', 'prefix_register_demo_patterns' );Этот подход позволяет гораздо быстрее найти код необходимого паттерна и поддержку проекта проще.Как Удалить Существующий ПаттернЧасто бывает, что тема или плагины регистрируют паттерны, которые мы не хотим использовать на проекте. Для этих случаев в WordPress существует две функции для удалением паттернов.unregister_block_pattern_category() — удаляет категории паттернов. Принимает только один аргумент — название категории.unregister_block_pattern() — удаляет паттерн. Также принимает только один аргумент — название паттерна.На примере это выглядит следующим образом:function prefix_unregister_demo_patterns() { unregister_block_pattern_category('demo-patterns'); unregister_block_pattern('demo-patterns/intro-with-two-columns'); } add_action( 'init', 'prefix_unregister_demo_patterns' );Этот код удалит категорию и паттерн, которые мы зарегистрировали ранее.Точно так же можно удалить стандартные паттерны. Код ниже удалит категорию "Кнопки" и оба паттерна, которые к ней относятся:function prefix_unregister_core_patterns() { unregister_block_pattern_category('buttons'); unregister_block_pattern('core/three-buttons'); unregister_block_pattern('core/two-buttons'); } add_action( 'init', 'prefix_unregister_core_patterns' );Для справки приведу названия всех стандартных паттернов:'text-two-columns' 'two-buttons' 'two-images' 'text-two-columns-with-images' 'text-three-columns-buttons' 'large-header' 'large-header-button' 'three-buttons' 'heading-paragraph' 'quote'... и категорий:'buttons' 'columns' 'gallery' 'header' 'text'Также отмечу, что если вам необходимо удалить все стандартные паттерны лучше использовать функцию remove_theme_support():function prefix_unregister_all_core_patterns() { remove_theme_support( 'core-block-patterns' ); } add_action( 'after_setup_theme', 'prefix_unregister_all_core_patterns', 99, 0 );Вместо итогаЯ стал пользоваться паттернами практически сразу как они появились в ядре. Мне нравится, что зарегистрировать новый паттерн гораздо быстрее и проще чем, например, создать новый блок или вариацию блока.А появление отдельной директории для паттернов означает, что разработчики и сообщество WordPress хотят и дальше продвигать паттерны как один из основных инструментов cоздания сайтов на WordPress.Поэтому если вы еще не пользовались паттернами, советую ознакомится с официальной документацией и попробовать написать новый паттерн для следующего проекта. А если остались вопросы — задавайте в комментариях.
Думаешь увидеть декоратора или прокси, но не тут то было
Да, речь про другие паттерны :) Может быть в другой статье...