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

В число достоинств Drupal CMS всегда включают её доступность для пользователей, которые не умеют программировать, и главным образом эти пользователи — контент-менеджеры. Оно и правильно: хочешь занять заметное место на рынке — снижай порог вхождения. Но такие конкуренты, как Tilda и WordPress, снизили его раньше. Tilda со дня запуска позиционировала себя как платформу, на которой можно было верстать сайты по массе готовых макетов, таскать по экрану элементы и компоновать их, как душа пожелает, а результат всё равно получится классный — словно поработал профессиональный веб-дизайнер. В свою очередь, WordPress в 2018 году включил в своё ядро плагин Gutenberg, позволяющий редактировать сайт полностью через модульный подход: все блоки с контентом, хэдер, футер и виджеты можно расставлять в свободном порядке.

Tilda и Gutenberg не предполагают использования кода. И вот когда настала очередь Drupal, комьюнити предложило модуль Layout Builder. В этой статье мы быстро расскажем о принципе его работы, особенностях и установке.

Глоссарий

В этом разделе мы дадим определения терминам, связанным с созданием страниц Drupal-сайта, и в частности — с помощью Layout Builder. Термины особенно понадобятся нам в следующей статье, где мы объясним, как разрабатывать страницы с помощью Layout Builder.

• Раздел (section) — область страницы, структура которой составлена по одному из макетов (см. следующий пункт). Разделы в Drupal можно добавлять по обе стороны от других разделов и менять местами.
• Макет, он же шаблон (layout) — модель, по которой будет организован контент в секции. Макеты открываются и добавляются на страницу через функцию «Добавить раздел»/Add section. На выбор даются четыре дефолтных Drupal-макета: одно-, двух-, трёх- и четырёхколоночный, но можно создавать свои. Внутри макета размещаются блоки.
• Блок (block) — область внутри макета под различные сущности контента: заголовки, описания, иллюстрации, пользователи и т. д. Блоки в Drupal можно перетаскивать внутри макета и между секциями.

А всё же, макет или шаблон?

В разговоре между собой Drupal-разработчики говорят по-разному и понимают друг друга. Но эти понятия не тождественны, потому что внутри темы Drupal есть twig-файлы, которые хранят в себе HTML-код — эти файлы как раз принято называть шаблон (template). В контексте же разработки с помощью Layout Builder говорят «макет» (layout).

• Объект, сущность (entity) — это PHP-объект, который отображает данные, взятые из хранилища (базы данных или файла). Это могут быть данные о странице, статье, кейсе (сущность Node); имя пользователя, почта, пароль (сущность User); иллюстрации, pdf-документы (сущность File).

• Сущность контента (content entity) — что угодно, что видит и с чем взаимодействует пользователь сайта, начиная со страницы и заканчивая полями для комментариев. Этими сущностями наполняются блоки внутри секций.
• Типы контента (content types) — любой статичный контент, который можно сгруппировать по какому-либо признаку, например, по типам страниц (статьи, продукты, новости, продавцы). В каждом типе контента лежит определённый набор полей.
• Поле (field) — это место в базе, которое отводится под определённую информацию. При добавлении поля в Drupal нужно указывать, контент какого типа будет (текст, ссылка на что-то, картинка и т. д.).
• Node (у этого термина нет легитимного русского аналога в среде разработчиков, так что все называют это нодой) — любой представитель типа контента. Например, любая страница контент-типа является в Drupal нодой.

Что такое Layout Builder

Layout Builder — это модуль, совмещающий в себе принципы drag-and-drop и WYSIWYG: элементы интерфейса свободно компонуются на странице, а посмотреть результат своих действий можно тут же. Получается готовая структура страницы, но в большинстве случаев без CSS, который прописывается дополнительно. Модуль впервые появился в Drupal 8.5 как экспериментальный, а стабилизировался к маю 2019 года, когда вышла версия 8.7. Сейчас Layout Builder входит в ядро Drupal.

Модуль позволяет как использовать один из четырёх готовых макетов (layout), так и добавлять свои и кастомизировать их, чтобы получить оригинальный результат. Страница может состоять из нескольких разделов (section), каждый из которых собран по своему макету. Макеты наполняются блоками (block), где каждый блок — это скомпонованные сущности контента (content entity), например, имя автора, дата выхода публикации, кнопки, поля для комментариев или ввода каких-либо данных и т. п. Параграфы (Paragraphs) не являются сущностью контента, но сущности могут ссылаться на них. Layout Builder не позволяет добавлять параграфы в разделы из коробки, но Drupal-сообщество уже придумало модули, которые позволяют это делать путём оборачивания параграфов в блоки.

Разработчик действительно не нужен?

Важно знать, что контент-менеджер только заполняет контентом готовую структуру. Создание же готовой структуры лучше доверить профессионалам: бэкенд-разработчик прописывает поля, компонует типы контента, views и прочее, из чего собирается страница, а фронтенд-разработчик стилизует структуру согласно дизайну. Поэтому сравнивать работу модуля Layout Builder с Tilda пока рано.

Как появился Layout Builder

В панели администратора Drupal-сайта есть вкладка Структура (Structure), в которой есть раздел с функциональностью Block layout, входящей в модуль Blocks — там разработчик определяет, в каких регионах страницы какой блок должен выводиться. В библиотеке кастомных блоков (Custom block library) создаётся структура, которую можно переиспользовать.

Позже появился модуль Paragraphs — он не входит в ядро Drupal, с ним нельзя работать по принципу drag-and-drop и он требует полного участия разработчика.

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

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

Layout Builder вобрал в себя лучшие практики работы с классическими модулями, позволяет структурировать все нужные типы контента и собрать всю настройку отображения в одном месте, чтобы под капотом сложного сайта не лежала куча кастомного кода, ожидающая изнурительной оптимизации и code review.

Особенности и преимущества Layout Builder

• Полная настройка дизайна, структуры, макета вашего контента.
• Принципы drag-and-drop и WYSIWYG. Перетаскивать можно не только блоки, но и поля типов контента.
• Гибкость в создании кастомизированных страниц.
• Сохранение и использование созданных Drupal-макетов на всех страницах отдельного типа контента.
• Конфигурация макетов для разных случаев.
• Создание макетов как для различных типов контента на сайте, так и для контента с особенным дизайном. Например, эта особенность незаменима в случае, когда владельцы интернет-магазинов хотят выделить один или несколько товаров из общего ассортимента.
• Лёгкий запуск модулей, входящих в Layout Builder, и для запуска не нужны новые типы сущностей.
• Соответствие интерфейса Layout Builder и создаваемой им разметки уровню AA в стандартах веб-доступности WCAG и ATAG.

Будущее за Layout Builder?

Не нужно думать, что с появлением в Drupal модуля Layout Builder сразу стали не нужны Paragraphs, Blocks и Views — конечно, нужны, ведь модуль расширяет их, но не заменяет. Мнений о Layout Builder много: одни разработчики предпочли бы с его помощью сделать на сайте вообще всё; другие говорят, что разработчикам удобнее пользоваться параграфами, но для редакторов контента Layout Builder, безусловно, ключ к быстрой, самостоятельной работе.

Разработчик ADCI Solutions:

На одном из проектов нас попросили разработать несколько блоков, каждый — разного типа и с разной структурой: например, картинка слева, текст справа и наоборот, или только текст и только картинка. Контент-менеджерам нужно было только выбирать уже готовые блоки из списка, составлять из них страницу и наполнять контентом — и всё сразу выглядело красиво. Мы сделали для них страницу, на которой были представлены все блоки, около 20 штук. Таким образом, они видели, как всё будет выглядеть. Насколько я знаю, они так наполнили очень много страниц и уже не нуждались в нашем постоянном участии. Думаю, за таким подходом будущее.

И если вы спросите, какие сайты лучше делать на Layout Builder, вы не получите однозначного ответа (в отличие от, например, React.js, который идеален для высоконагруженных интерактивных приложений).

Вывод: использование модуля обусловлено предпочтениями и обстоятельствами, но среднее арифметическое мнение о Layout Builder высокое.

Оригинал статьи был опубликован в блоге ADCI Solutions.