Layout Builder - новый подход к созданию страниц в Drupal.

Layout Builder

Laoyut Builder - это один из модулей ядра Drupal, который появился в ветке 8.5 в списке экспериментальных модулей, сейчас в ветке 8.6 он по-прежнему экспериментальный, но уже уже не альфа, а бета и уже вполне пригоден к использованию, а движуха в issues даёт понять, что разработчики твёрдо нацелены сделать этот модуль стабильным.

Зачем же нужен этот модуль? Он позволяет настраивать отображение любых сущностей с использованием Layout API,то есть берём шаблон (лэйаут) и вставляем в его регионы блоки. Помимо всех стандартных блоков (Block Content, Views и прочее) есть блоки с полями сущности. Пытливый читатель уже наверняка задался вопросом, зачем это всё, если есть Page Manager, Panels, Display suite и Panelizer? Ответ прост - перечисленные модули были популярны в 7 версии Drupal, а с выходом 8 версии эти модули наспех были портированы, в то время, как в ядре параллельно велась работа по созданию этого функционала с нуля, учитывая особенности архитектуры восьмёрки. Как итог - Page Manager на данный момент практически заброшен своими создателями, которые переключились на разработку Layout Builder. Разработчики Panelizer признают, что Layout Builder полностью заменяет его, и ведут разработку способов миграции с Panelizer на Layout Builder. Кроме того, интерфейс Page Manager и Display Suite выглядит совершенно дубовым для 2019 года. Раньше я во всех своих проектах использовал Page Manager и Panels и за это время уже надоело, что с выходом каждой минорной версии ядра Page Manager начинает глючить и приходится ставить всё новые патчи. К слову в моей заготовке composer.json было три патча для пэйдж менеджера, один для панелей и один для ядра, который был необходим для нормальной работы пэйдж менеджера. Использование Layout Builder позволило отказаться от всего этого.

Перейдём к делу - как пользоваться модулем? Тут всё невероятно просто: нужно включить модуль, а затем включить его функционал на странице управления отображением нужной сущности:

Как видно, у каждого режима отображения появляются две галочки - первая просто включает Layout Builder для данного типа сущности и вместо привычного списка полей появляется кнопка Manage Layout. Вторая галочка - наиболее интересная - она позволяет настраивать лэйаут для каждой сущности отдельно! Причём это не значит, что поставив её, скажем для статей, вам придётся постоянно собирать лэйаут каждой статьи. По умолчанию в каждой статье будет использован лэйаут, который вы настроите в Manage Layout, а при редактировании и просмотре статей будет просто ещё одна вкладка "Макет" (в английской версии Layout), где вы при необходимости можете настроить вывод отдельно взятой сущности.

Страница редактирования макета выглядит так:

Разделы (они же Sections) представляют из себя отдельные лэйауты. Тут очень важное преимущество перед Panels - можно поледовательно поставить в столбик несколько лэйаутов, в то время, как Panels позволяет использовать одновременно лишь один лэйаут. Как видно на картинке, один лэйаут добавлен, и можно добавить лэйаут до и после него. Когда лэйаутов много, можно вставлять лэйауты между ними, а также перетаскивать. Также можно перетаскивать блоки из региона в регион и из лэйаута в лэйаут. На картинке выбран двухколоночный лэйаут, поэтому горят две кнопки "Добавить блок" по одной в каждом регионе. Кстати, интересный момент, при вставке блоков с полями сущности можно настраивать форматтер поля как угодно - отображение лэйбла поля и все настройки, например, стиль изображения для картинок. Это позволяет одно поле выводить многократно разными способами.

У некоторых лэйаутов есть настройки (см на рисунке надпись Configure Section). Всё зависит от того, как сделан сам лэйаут - у самых простых лэйаутов настроек вообще нет. Но я использую модуль Bootstrap Layouts, в котором у каждого лэйаута можно выбрать классы обёртки и классы регионов - там стандартные колоночные классы бустрапа, плюс классы оформления, плюс возможность добавить любые свои атрибуты, что порой очень полезно. Даже если вы не используете Bootstrap, я очень рекомендую вам посмотреть модуль Bootstrap Layouts, ведь вы по образу и подобию сможете сделать настраиваемые лэйауты и для вашего сайта. Ниже скрины настроек лэйаута и списка выбора блоков:

      

Кнопка Create Custom Block заслуживает отдельного внимания - она создаёт обычный блок, но параметр reusable у него имеет значение FALSE. Это значит, что этот блок нельзя будет нигде повторно использовать, он не появится на странице "Пользовательские блоки" или "Схема блоков", а редактировать его можно будет только по "карандашику" из формы редактирования лэйаута. Если вы хотите использовать блоки повторно, то создате блок обычным способом через меню Структура - Схема блоков - Добавить блок и выберите этот блок из списка.

Преимущества Layout Builder перед похожими модулями:

1. Можно настраивать лэйаут как для типа сущности в целом, так и для отдельной сущности.

2. Можно ставить несколько лэйаутов подряд.

3. Более быстрый доступ к редактированию лэйаутов (по сравнению с Page Manager, где нужно было кликнуть 4 ссылки, чтобы добраться до страницы с перетаскиванием блоков) и в целом боле удобный UX.

4. Более наглядный интерфейс - редактирование происходит в теме сайта по умолчанию, то есть все стили применяются сразу, а блоки при возможности показываются с нужным содержимым (иногда используются плэйсхолдеры, в зависимости от особенностей самих блоков). Также по субъективному ощущению - формы и ajax-коллбэки у Layout Builder работают значительно быстрее, чем у Page Manager.

Ложка дёгтя.

Обзор был бы нечестным, если бы не были затронуты недостатки.

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

Второй недостаток: Layout Builder не может полностью заменить Page Manager, ведь лэйаут билдер - это просто настройка отображения сущностей, соответственно, нет возможности перекрыть существующий роут, создать разные варианты для разных ролей или создать страницу с несколькими аргументами. Правда для себя я этот вопрос решил через кастомный модуль, который создаёт ещё один тип Section Storage, который можно прикрепить к своей Config Entity, и вызвать в своём кастомном контроллере, но это вариант для очень продвинутых.

Третий недостаток: модуль пока ещё экспериментальный, поэтому есть некоторые "детские болячки" и для некоторых вещей приходится ставить патчи, но насколько мне известно, часть этих "болячек" будут исправлены с выходом версии 8.7.

Как бы то ни было, взвесив все за и против, по личному опыту использования уже более, чем на пяти проектах, я однозначно могу сказать, что Layout Builder значительно лучше, чем Page Manager

И напоследок пару советов, как использовать лэйауты более эффективно:

1. Вы можете создать тип ноды, в которой не будет вообще никаких полей (даже Body можно выпилить), оставить только метатеги.Это позволит вам собирать произвольные страницы из произвольного набора блоков. Очень удобно для главной страницы, страниц-лэндингов и просто страниц с уникальным дизайном.

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

2.1. Добавляйте в блоки параграфы. У меня есть тип "Блок с виджетами", у которого виджеты - это разные типы параграфов на выбор.

3. По аналогии с "пустым" типом нод вы можете создать пустой тип блока, в который можете собирать другие блоки.

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

Поделиться: