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

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

Задний план

Выпуск Gutenberg в декабре 2018 года стал самым большим изменением в WordPress с момента его создания. Новый блочный интерфейс «перетаскивания» меняет способ создания тем разработчиками, то, как дизайнеры рассматривают разбиение сайтов на составные части и то, как редакторы контента управляют и планируют создание контента.

Это фундаментальный сдвиг в сторону дизайна веб-сайтов на основе шаблонов; система многоразовых элементов, которые можно последовательно применять на веб-сайте, чтобы обеспечить максимально удобное взаимодействие с пользователем и упростить рабочий процесс. Хотя многие из нас уже работали с шаблонами, Гутенберг ускоренными темпами продвигает это изменение. Поскольку WordPress поддерживает треть веб-сайтов по всему миру, влияние этого изменения невозможно переоценить.

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

Наша цель

Как специалист по созданию сайтов на WordPress, Гутенберг дал нам прекрасную возможность создать единую библиотеку шаблонов; набор настраиваемых блоков для использования со многими из наших пользовательских сборок веб-сайтов.

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

Полный набор блоков под рукой также означает, что нам не нужно создавать каждый блок с нуля для новых сборок веб-сайта Gutenberg. Это позволило бы нам тратить еще больше времени на улучшение внешнего вида сайта и добавление последних штрихов и оптимизаций, которые помогут отделить веб-сайт от конкурентов.

Вызовы

Гибкость дизайна

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

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

Сдвиг в развитии темы

До Гутенберга мы использовали несколько разных подходов к разработке тем. Самым распространенным было создание индивидуальных шаблонов страниц для отдельных частей сайта. Шаблоны будут очень предписывающими и включать настраиваемые поля для каждого разработанного раздела. Шаблон «Примеры из практики», например, может включать поля для текстового редактора, галереи изображений, отзывов и т. Д. Однако после включения в шаблон их нелегко изменить.

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

Чтобы адаптироваться к Гутенбергу, нам нужно было изменить наш подход к разработке, понять, как мы можем создавать повторно используемые компоненты, и принять гибкость, которую Гутенберг теперь предлагает нам для новых сборок веб-сайтов.

Гутенберг не такой гибкий

По умолчанию у Gutenberg доступно более 30 основных блоков. Все, от базовых компонентов контента, таких как абзацы, заголовки и элементы списка, до более сложных виджетов и встраиваемых приложений.

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

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

Шаблон для блока «содержимое и изображение», например, может требовать, чтобы заголовок, абзац, список и кнопка появлялись рядом с изображением и с возможностью отображения изображения слева или справа от этого содержимого, и чтобы эти элементы были отображается в согласованном макете.

Такой уровень свободы дается Гутенбергу нелегко. Несмотря на то, что есть несколько блоков, которые могут добавлять текст, изображения и кнопки, они довольно атомарны по своей природе и при добавлении по отдельности появляются как отдельные составные блоки. С самого начала стало ясно, что Гутенберг недостаточно гибок, и нам нужно иметь возможность создавать свои собственные блоки.

Наше решение

Универсальная система дизайна

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

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

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

После того, как мы разбили наши паттерны на блоки, мы были готовы начать строительство.

Строительные блоки с расширенными настраиваемыми полями

Каждый разработчик тем почти наверняка в какой-то момент сталкивался с расширенными настраиваемыми полями (ACF). Благодаря интуитивно понятному интерфейсу можно создать множество различных типов полей; все, что угодно, от базовых текстовых полей и редакторов контента до средств выбора дат, вставок карт и полей галереи. Их можно легко назначить различным областям сайта, таким как типы сообщений, шаблоны страниц, категории и страницы пользователей.

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

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

Теперь мы смогли создать набор настраиваемых блоков, которые давали всю гибкость Гутенберга, но были ограничены дизайном темы, что помогло бы с согласованными макетами.

Плагин библиотеки паттернов

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

Этот блочный плагин позволяет быстро развертывать пользовательские шаблоны для новых сборок веб-сайтов. Затем они дополнительно настраиваются на уровне темы.

Наш плагин Pattern Library включает несколько полезных функций:

1. Файлы шаблонов базовых блоков, чтобы мы могли быстро добавлять новые блоки;
2. Функции, позволяющие инициализировать основные и настраиваемые блоки и включать их в настраиваемые категории;
3. Экран настроек администратора, где каждый блок может быть включен или отключен;
4. Возможность переопределить макет и структуру блока в теме;
5. Возможность переопределения стиля блока на уровне темы;
6. Загрузка таблиц стилей уровня темы в Gutenberg, чтобы предварительный просмотр админки блока выглядел так же, как блоки внешнего интерфейса. Использование сетки CSS помогло нам максимизировать гибкость в эстетике и макете, минимизируя структурные изменения;
7. Конкретные блоки могут быть ограничены определенными типами сообщений для обеспечения согласованности.

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

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

Резюме

Мы действительно воодушевлены возможностями, которые открылись Гутенбергом и нашей собственной библиотекой шаблонов.

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

Прошло почти 2 месяца с тех пор, как мы впервые начали использовать нашу библиотеку шаблонов блоков Гутенберга, которую мы сейчас используем во многих новых сборках сайтов. Клиенты очень хотели использовать Gutenberg, и пока отзывы клиентов были действительно положительными.

«Мэтт и Пэмми рассказали об элементах сайта, которые вы создали, и они потрясающие !! Гибкость и профессионализм просто фантастические, и я так благодарен вам за всю вашу потрясающую работу над этим до сих пор ... Очень рад сайту сейчас. Спасибо"

- Рэйчел Смит, YMCA Nottingham

Мы продолжим расширять нашу библиотеку шаблонов пользовательских блоков и улучшать ее, проводя больше времени с Гутенбергом. В настоящее время мы работаем над нашим 5-м сайтом на базе Гутенберга, так что скоро ждите тематического исследования!

Если вам нужна помощь в разработке WordPress, не стесняйтесь обращаться к нам.