Основы Builder: как создавать массивы блоков

В статье «Основы Builder», вышедшей в прошлом месяце, мы рассмотрели шаблоны блоков: что они собой представляют и как их можно использовать. Мы узнали, что шаблон блока — это просто предопределенный набор блоков, формирующих определенный макет. Мы продемонстрировали силу шаблонов и обсудили, как они являются краеугольным камнем современной разработки темы WordPress. Сегодня мы научимся создавать, делиться и регистрировать собственные шаблоны!

Обратите внимание, что в этой статье во всех примерах используется тема Twenty Twenty-Two . Эта блочная тема была выпущена вместе с WordPress 5.9 и представляет собой фантастический ресурс с более чем 60 шаблонами блоков.

Шаблон дизайна

Самое сложное в создании блочного шаблона — решить, как он должен выглядеть. Давайте начнем с чего-то относительно простого: сетка элементов, два ряда по три. Мы могли бы использовать этот дизайн для демонстрации различных бизнес-услуг или функций продукта.

Подсказка: шаблоны можно создавать из любых блоков, в том числе сторонних блоков. Однако, если вы собираетесь распространять свои шаблоны среди широкой аудитории, попробуйте использовать только основные блоки WordPress — таким образом, пользователю не нужно устанавливать дополнительные плагины для использования ваших дизайнов.

Для меня дизайн шаблона начинается в редакторе. Хотя шаблоны можно закодировать вручную, гораздо проще сделать что-то визуально. Я начну с добавления блока Columns с тремя столбцами для первой строки сетки. Затем добавьте блоки «Заголовок», «Абзац» и «Кнопки» в каждый столбец. Дублируйте блок Columns, чтобы создать вторую строку сетки. Наконец, я применю несколько конфигураций стилей и оберну оба блока Columns в блок Group с фоновым цветом. Результат выглядит следующим образом:

Вы можете увидеть 33 блока, из которых состоит этот дизайн, на скриншоте выше!

Если я хочу создать альтернативную «темную» версию сетки, мне просто нужно продублировать исходный дизайн и настроить стиль.

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

Делимся дизайном

Поделиться дизайном выкройки очень просто! Допустим, вы хотите переместить дизайн на другую страницу своего веб-сайта или, возможно, на другой веб-сайт. Это так же просто, как скопировать и вставить разметку блока. Есть несколько способов сделать это.

Если дизайн шаблона содержится в блоке «контейнера», таком как блок «Группа», «Обложка» или «Колонки», выберите самый внешний контейнер и используйте меню инструментов, чтобы выбрать «Копировать». Разметка блока копируется в буфер обмена, и вы можете вставить ее куда угодно.

Второй вариант — использовать редактор кода, доступ к которому можно получить с панели «Параметры».

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

Регистрация шаблона

Копировать и вставлять блочную разметку может быть легко, но нам часто нужна более постоянная версия наших узоров. Для этого мы будем использовать Patterns API для «регистрации» пользовательского шаблона блока. Это делает наш дизайн доступным как в Inserter, так и в Pattern Explorer в WordPress.

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

register_block_pattern(

'пример / функция-сетка-свет',

множество(

'title' => __('Feature Grid — Light', 'textdomain'),

'description' => __( 'Показать шесть рекомендуемых элементов в сетке на светлом фоне.', 'textdomain' ),

'категории' => массив('избранные', 'столбцы'),

'ключевые слова' => массив('функция', 'сетка'),

'ширина окна просмотра' => 1400,

'blockTypes' => массив ('ядро/столбцы'),

'content' => 'СОДЕРЖИМОЕ ШАБЛОНА'

)

);

Здесь мы регистрируем шаблон Feature Grid, который мы разработали ранее. Заголовок следует соглашению об именовании пространств имен/заголовков. При регистрации нескольких шаблонов в одном проекте рекомендуется поддерживать согласованность пространства имен.

Технически необходимы только параметры title и content в массиве свойств. Для краткости в приведенном выше примере исключено содержимое шаблона. Однако это тот же код, который мы скопировали и вставили в предыдущем разделе. Категории задаются с помощью поля категорий, а в шаблоне их может быть несколько. В Редакторе узоры упорядочены по категориям. Для остальных свойств фантастическая разбивка представлена ​​в Руководстве по редактору блоков.

Чтобы зарегистрировать шаблон Feature Grid с темным фоном, просто продублируйте регистрационный код и обновите его соответствующим образом. Наконец, мы оборачиваем обе функции вот так и помещаем все в файл functions.php нашей темы.

функция my_pattern_library_register_block_patterns() {

register_block_pattern(

'пример / функция-сетка-свет',

множество( … )

);

register_block_pattern(

'пример/функция-сетка-темный,

множество( … )

);

}

add_action('инициализация', 'example_register_block_patterns');

Полный код доступен в Gist на GitHub.

После добавления кода наши вновь зарегистрированные шаблоны теперь будут отображаться в средстве вставки и проводнике шаблонов.

Регистрация категории паттернов

При работе с пользовательскими шаблонами часто бывает полезно поместить их в пользовательские категории. WordPress упрощает задачу с помощью register_block_pattern_category(). Эта функция аналогична той, которую мы использовали для регистрации паттернов. Все, что вам нужно сделать, это указать название категории и массив свойств. Начиная с WordPress 5.9, label является единственным поддерживаемым свойством, но в будущем мы ожидаем большего.

В следующем примере регистрируется категория Custom с заголовком custom. Поместите этот код в файл functions.php вашей темы вместе с примерами регистрации шаблонов.

функция example_register_block_pattern_categories() {

register_block_pattern_category(

'обычай',

массив('метка' => __('Пользовательский', 'текстовый домен'))

);

}

add_action('инициализация', 'example_register_block_pattern_categories');

Категории паттернов будут отображаться в редакторе только в том случае, если с ними связаны паттерны. Поэтому, если мы добавим пользовательский к двум шаблонам сетки объектов, которые мы зарегистрировали ранее, категория «Пользовательский» будет выглядеть следующим образом:

Создание плагина библиотеки узоров

В предыдущих разделах мы зарегистрировали шаблоны и категорию шаблонов, поместив код в файл functions.php нашей темы. Хотя это работает, это не идеально в долгосрочной перспективе. Предположим, нам нужно обновить нашу тему? Возможно, мы хотим использовать шаблоны на другом сайте?

WordPress еще не предоставил собственного решения для управления пользовательскими шаблонами, поэтому мы должны искать альтернативные решения. Кроме того, часто предпочтительнее иметь шаблоны в более переносимом формате.

Лучший подход, который я нашел, — создать простой плагин WordPress для хранения моей коллекции пользовательских шаблонов. Плагины обеспечивают максимальную универсальность и не зависят от темы. Я покажу вам, как создать свой собственный плагин библиотеки шаблонов, выполнив следующие шаги.

Быстрый совет: если вы хотите пропустить следующие шаги, я подготовил полный плагин «Моя библиотека паттернов», который должен стать отличной отправной точкой для вашей собственной библиотеки. Код доступен в виде Gist на GitHub.

Шаг 1. Установка

Прежде чем приступить к созданию плагина, вам понадобится рабочая версия WordPress и какой-нибудь текстовый редактор. Я настоятельно рекомендую Local для создания локальных установок WordPress и использую его исключительно в течение многих лет. Я использую Atom для редактирования текста, но есть много отличных опций. Подойдет даже базовый текстовый редактор, который поставляется с вашей операционной системой.

Настройте локальный сайт WordPress с помощью Local или аналогичного приложения. Убедитесь, что WordPress обновлен до версии 5.9 или выше. Шаблоны будут работать на 5.5+, но всегда лучше использовать последнюю версию WordPress, когда это возможно.

Шаг 2: Создайте плагин

Следующее, что вам нужно сделать, это создать «базу» плагина. Если вы новичок в разработке плагинов, не бойтесь. Звучит более устрашающе, чем есть на самом деле.

Перейдите в каталог wp-content → plugins в вашей локальной установке WordPress и создайте новый каталог под названием my-pattern-library. Вы можете назвать каталог как угодно. Просто замените «my-pattern-library» своим именем во всех последующих шагах.

Внутри нового каталога wp-content → plugins → my-pattern-library создайте файл PHP с именем my-pattern-library.php. Откройте файл в текстовом редакторе и добавьте следующий комментарий к заголовку плагина в начало файла. Не забудьте начальный <?php. Обратите внимание, что я упростил заголовок для этого урока.

<?php

/**

* Название плагина: Моя библиотека шаблонов

* Описание: Простая библиотека шаблонов блоков.

* Версия: 0.1.0

* Требуется как минимум: 5.8

* Требуется PHP: 7.0

* Автор: Ваше имя

* Лицензия: GPL v2 или выше

* Текстовый домен: my-pattern-library

*/

Не стесняйтесь изменять информацию заголовка по своему усмотрению. Затем сохраните файл. Теперь у вас есть полнофункциональный плагин WordPress. Убедитесь, что он виден на странице плагинов администратора, и нажмите «Активировать». Это должно выглядеть так.

Хотя теперь у вас есть работающий плагин, на самом деле он ничего не делает. Давайте изменим это.

Шаг 3: Зарегистрируйте шаблоны и категории

На этом последнем этапе все, что вам нужно сделать, это скопировать регистрационный код шаблона и категории шаблона из ранее в этой статье в новый плагин. Ранее мы разместили этот код в файле functions.php темы. Теперь просто вставьте его под комментарием заголовка в файле my-pattern-library.php.

Сохраните файл и перейдите в редактор в WordPress. Откройте Инсертер, перейдите на вкладку «Шаблоны» и выберите категорию «Пользовательские». Вы должны увидеть два шаблона, зарегистрированных плагином.

Ваша библиотека шаблонов теперь работает! Если вам нужны новые пользовательские шаблоны или категории, просто добавьте их в плагин. Полный пример кода доступен в виде Gist на GitHub.

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

Подведение итогов

В этой статье вы узнали, как создавать, публиковать и регистрировать шаблоны блоков. Вы даже научились создавать простой плагин WordPress для размещения собственной библиотеки шаблонов. Я твердо верю, что шаблоны блоков являются неотъемлемой частью современной разработки тем, и мне не терпится увидеть, что нас ждет в будущем. Если вы еще не начали изучать шаблоны, я надеюсь, что эта статья вдохновит вас на это. Learn WordPress — это фантастический ресурс для дополнительного обучения, и если у вас есть какие-либо вопросы, дайте мне знать в комментариях.