Bricks 2.0 — это не просто обновление, а фундаментальная переработка конструктора, направленная на профессионалов. Реализованы десятки самых ожидаемых функций, собравших в сумме более 30 тысяч голосов сообщества. В этом обзоре разберём все ключевые новинки.
Гибкие права доступа (Builder Capabilities)
Раньше доступ к редактору ограничивался тремя жёсткими пресетами. Теперь всё иначе: появился отдельный интерфейс Builder Capabilities (Настройки → Builder Access), где можно задавать более 50 индивидуальных прав для ролей и пользователей.
Настраиваются права на:
- Типы записей
- Доступ к инструментам (менеджеры шрифтов, иконок итд)
- Шаблоны
- Глобальные стили
- Компоненты
- Редактирование и добавление элементов
Хотя нововведение мощное, в одиночной разработке может и не быть критичным.
Менеджер элементов (Element Manager)
Bricks 2.0 позволяет централизованно управлять всеми доступными элементами конструктора: как встроенными, так и пользовательскими.
Доступны три режима:
- Активный — отображается и в редакторе, и на фронтенде
- Скрытый — не виден в панели, но используется
- Отключённый — не загружается вообще
Фильтрация по типам: неиспользуемые, нативные, кастомные. Удобный способ навести порядок и избавиться от перегруженного интерфейса.
Обновлённый интерфейс конструктора
Bricks слегка обновили визуальную часть редактора: улучшен контраст, переработаны панели, а тёмный экран загрузки стал полноценным. Псевдоклассы теперь удобно размещены в Selector UI, что логично и удобно. Собственно все это видно на скринах.
Менеджер шрифтов (Font Manager)
Теперь шрифтами можно управлять прямо внутри конструктора:
- Загружай кастомные шрифты с вариациями
- Импортируй Google Fonts локально (важно для GDPR или оптимизации производительности)
- Добавляй шрифты в избранное
- Удаляй или архивируй ненужные
Отличный шаг вперёд для дизайнеров и тех, кто следит за производительностью.
Менеджер иконок (Icon Manager)
Встроенный менеджер иконок теперь позволяет:
- Загружать собственные SVG-иконки наборами
- Использовать их в любом элементе с иконкой или SVG
- Настраивать цвет, обводку, размеры
- Отключать наборы (включая встроенные), не теряя текущие иконки
Раньше SVG можно было и так использовать, но теперь работа с иконками стала централизованной и более профессиональной.
SVG-стили по брейкпоинтам и классам
До версии 2.0 настройка стилей на значке SVG была возможна только для базовой точки брикпоинта. Другие брикпоинты должны были быть стилизованы с использованием пользовательского CSS. А теперь нет этих ограничений.
Теперь SVG-иконкам можно задавать стили для каждого брейкпоинта или класса: высоту, ширину, заливку, обводку и пр.
Массовое редактирование элементов
Наконец то можно выделить сразу несколько элементов на холсте или в панели структуры с помощью CMD/CTRL + SHIFT и применять изменения:
- Редактирование стилей (для всех)
- Контент (если элементы одного типа)
- Перемещение, удаление, оборачивание
- Назначение глобальных классов
Существенно ускоряет работу с повторяющимися блоками или элементами
Unwrap — новое действие в контекстном меню
Тот случай когда можно сказать "мелочь, а приятно :)"
Теперь можно «развернуть» элемент: удалить его, сохранив дочерние на месте. Полезно для рефакторинга.
Визуальный CSS Grid Builder
Долгожданная фича: теперь можно строить Grid-сетки визуально, не вводя текстовые значения. Есть поддержка Query Loop, drag-n-drop, изменение размеров, отступов и перемещение ячеек.
Для верстки карточек, каталогов и лендингов — просто must-have.
Индикатор наследуемых стилей
Учитывая, что вы можете определять настройки не только для разных точек останова, но и для классов, поиск того, откуда была унаследована конкретная настройка, а затем ее редактирование или удаление, раньше были исключительно ручным и трудоемким процессом переключения между точками останова и классами, пока вы, наконец, не найдете (или не найдете) унаследованную настройку.
А теперь появился визуальный индикатор, показывающий, откуда «пришёл» стиль — из класса, ID или брейкпоинта. Можно кликнуть и сразу перейти к нужному месту.
Пресвдо классы/элемент : Новое место
Интерфейс псевдокласса был еще одной областью, остро нуждающейся в капитальном ремонте в Bricks 2.0.
Поэтому переместили его из разрозненного расположения на верхней панели инструментов в пользовательский интерфейс селектора.
Чтобы получить к нему доступ, щелкните значок «курсор» с правой стороны текущего селектора.
А по сути это была больше необходимость так как появилась новая возможность о которой ниже.
Новый Selector UI и Selector Detector
Теперь можно визуально настраивать отдельные части элемента (например, span внутри заголовка). Больше не нужно копаться в DOM — просто выбираешь HTML-ноду и задаёшь стили.
Раньше приходилось писать стили вручную, чтобы например оформить туже ссылку внутри текста.
Контекстные отступы (Contextual Spacing)
Отключаем стандартные отступы браузера и задаём собственные правила вертикального ритма. Работает для параграфов, заголовков, списков и любых селекторов.
Появилась новая настройка Contextual Spacing. С ней можно настроить как будут располагаться элементы на странице по вертикали: заголовки, параграфы, списки и всё такое.
До этого приходилось бороться с настройками браузера или встроенными стилями, а сейчас всё просто. Заходишь в Настройки → Стили темы → Contextual Spacing и выбираешь, у каких элементов убрать стандартные отступы.
Формы: поддержка Webhook
Плакали и просили и теперь это можно 🙂
Теперь форма может отправлять данные в сторонние сервисы: CRM, Google Sheets, n8n, Bitrix24 итд. Настройка производится в виде отдельного действия.
Но тут конечно нужно понимать, что это универсальная интеграция и нужно немного понимать особенности работы вебхуков.
Карта: Query Loop и синхронизация
Карта теперь может отображать данные из Query Loop (например, адреса из ACF). Также есть режим Sync with Query — карта обновляется вместе с результатами фильтрации или пагинации.
WooCommerce: вариации в виде переключателей
Теперь вариации товаров можно отображать как:
- Цветовые круги
- Изображения
- Лейблы
Вложенные компоненты
Теперь можно использовать компоненты внутри других компонентов. Например, карточка содержит заголовок как отдельный компонент.
Компоненты — больше не эксперимент
Фича перешла в стабильную стадию. Компоненты можно использовать на рабочих сайтах.
Каскадные слои включены по умолчанию
Теперь все стили Bricks обёрнуты в @layer bricks. Это облегчает переопределение и избавляет от !important.
Удаление глобальных элементов
Создание новых глобальных элементов отключено. Используйте компоненты и конвертируйте старые через настройки.
Другие полезности
- Автопереименование переменных
- Поддержка иконок в MetaBox и ACF
- Query Filters для WooCommerce
- Полноэкранный редактор кода
- Новые фильтры и динамические теги
Заключение
Bricks 2.0 — это не косметика, а системный апгрейд. Наконец-то в визуальном редакторе появился продвинутый контроль, удобство и логика, которые раньше были доступны только через код. Это делает Bricks по-настоящему конкурентоспособным даже на фоне "как бы" топовых решений.