Редакторы часто просят возможность перетаскивать блоки без участия разработчика. Штатный Layout Builder в Drupal начиная с версии 8.7 даёт визуальный конструктор макетов, встроенный в Drupal. Мы настраивали его для десятков проектов и знаем, как выжать максимум без боли. На одном из проектов с 500 страницами уникальные макеты увеличили время ответа на 40% — пришлось перепроектировать подход.
Как Layout Builder решает проблемы редакторов
Типовая ситуация: маркетологу нужно быстро поменять структуру лендинга — добавить карусель, вынести форму захвата. Без Layout Builder приходится писать новый тип контента или лезть в twig. С ним — drag-and-drop прямо на странице. Два режима: общий шаблон для всех материалов типа и персональные макеты для каждой записи. Второй режим — мощь, но и источник проблем: каждая уникальная страница генерирует дополнительные запросы к БД. Экономия времени редактора на правках — до 70%.
Пошаговая настройка Layout Builder
- Установите модули через Drush:
drush en layout_builder layout_discovery -y drush cr - Перейдите в админке: Структура → Типы контента → выберите тип → Управление отображением. Нажмите «Enable Layout Builder».
- Выберите режим: Defaults (один макет для всех нод) или «Allow each content item to have its layout customized» (уникальный макет для каждой ноды).
- Настройте макет по умолчанию: добавьте секции, блоки, поля.
- Ограничьте доступные блоки с помощью модуля Layout Builder Restrictions (см. ниже).
Настройка для типа контента
После включения Layout Builder откройте вкладку «Manage layout». Вы увидите пустую сетку. Добавьте секцию (например, one column) и поместите в неё блоки — поля ноды, кастомные блоки, вьюхи. Для типов контента с сотнями нод используйте только режим Defaults — персональные макеты сильно нагружают БД.
Как создать кастомную секцию?
Секции регистрируются через плагин layout. Пример: Hero с сайдбаром.
// custom_layouts/layouts/my_hero/my_hero.php namespace Drupal\custom_layouts\Plugin\Layout; use Drupal\Core\Layout\LayoutDefault; /** * @Layout( * id = "my_hero_layout", * label = @Translation("Hero + Sidebar"), * category = @Translation("Custom"), * template = "layouts/my-hero", * regions = { * "hero" = { "label" = @Translation("Hero Area") }, * "sidebar" = { "label" = @Translation("Sidebar") } * } * ) */ class HeroSidebarLayout extends LayoutDefault {} Twig-шаблон layouts/my-hero.html.twig:
<div class="layout-hero-sidebar"> <div class="layout-hero-sidebar__hero"> {{ content.hero }} </div> <aside class="layout-hero-sidebar__sidebar"> {{ content.sidebar }} </aside> </div> После создания очистите кэш — секция появится в списке при редактировании.
Ограничение блоков с Layout Builder Restrictions
Без этого модуля редактор может вставить в колонку блок, который ломает вёрстку. Модуль Layout Builder Restrictions позволяет на уровне типа контента указать, какие блоки доступны в каждой секции. Устанавливаем:
composer require drupal/layout_builder_restrictions drush en layout_builder_restrictions -y Настройка: Структура → [тип контента] → Управление отображением → Layout Builder → Restrictions. Там задаётся whitelist блоков для каждой секции.
Почему Layout Builder может тормозить?
Основные причины:
- Blob-данные уникальных макетов — каждый раз парсятся.
- Отсутствие кэша для макетов — повторные запросы к БД.
- Большое количество блоков на странице (более 20).
| Причина | Решение |
|---|---|
| Blob-данные при каждом рендеринге | Используйте Dynamic Page Cache и BigPipe для кэширования частей страницы. |
| Отсутствие кэша макетов | Включите BigPipe и настройте кэширование через hook_layout_builder_defaults_alter(). |
| Много блоков на странице | Сократите количество блоков, используйте Layout Builder Restrictions. |
Также для типов контента с более чем 50 нодами откажитесь от персональных макетов. В Drupal Performance Documentation подчёркивается важность кэширования для Layout Builder.
Сравнение Layout Builder и Paragraphs
| Параметр | Layout Builder | Paragraphs |
|---|---|---|
| Интерфейс | Drag-and-drop | Форма добавления |
| Структура данных | Blob | Чистые сущности |
| Поддержка API | Плохая | Отличная |
| Производительность | Тяжелый | Лёгкий |
| Кастомизация | Секции | Вложенные параграфы |
Layout Builder удобнее для маркетологов — визуальный drag-and-drop. Paragraphs удобнее для разработчиков — чистая структура данных, предсказуемый вывод в templates, хорошая поддержка API. Выбор зависит от задачи: если нужна максимальная гибкость для редактора без кода — Layout Builder; если проект сложный или headless — Paragraphs.
Что входит в настройку
В настройку Layout Builder под ключ входит:
| Этап | Описание |
|---|---|
| Включение и конфигурация | Настройка для 2-3 типов контента |
| Создание кастомных секций | 3-5 секций с уникальными регионами |
| Ограничения блоков | Настройка Layout Builder Restrictions для каждой секции |
| Интеграция | Подключение существующих блоков и вьюх |
| Проверка производительности | Аудит кэширования, рекомендации |
| Документация | Инструкция для редакторов со скриншотами |
Сроки
Настройка Layout Builder для 2–3 типов контента с кастомными секциями — от 3 до 5 рабочих дней. Срок может варьироваться в зависимости от сложности макетов и необходимости интеграции с другими модулями.
Типовые ошибки и как их избежать
- Не включать Restrictions — редактор ломает вёрстку неподходящими блоками. Решение: всегда настраивать Restrictions.
- Давать персональные макеты всем нодам — убивает производительность. Решение: давать персональные макеты только типам контента с малым числом нод (до 50).
- Игнорировать кэширование — Layout Builder генерирует много запросов. Решение: включить BigPipe и Dynamic Page Cache.
Если нужна помощь с настройкой Layout Builder или хотите избежать типовых ошибок — свяжитесь с нами. Наши инженеры имеют более 5 лет опыта работы с Drupal и настроили Layout Builder для 40+ проектов. Получите консультацию по кэшированию и кастомным секциям — это бесплатно.