Block-first мышление

Что такое block-first мышление

Block-first мышление — это сдвиг от проектирования страниц к проектированию модульных, переиспользуемых компонентов. Вместо того чтобы рисовать каждую страницу отдельно, вы создаёте систему блоков, которые комбинируются в разнообразные макеты.

Аналогия: блоки — это кубики LEGO. Из простых кирпичиков можно построить и маленький домик, и сложный замок. Так же и в WordPress: из фундаментальных блоков собираются сложные дизайны.

Блоки не требуют кода

Блоки позволяют создавать сложные дизайны без единой строки кода. Они связаны с theme.json, который задаёт стили по умолчанию. В Site Editor через Global Styles эти значения можно корректировать визуально, сохраняя консистентность.

Переиспользуемые компоненты

Типичные дизайн-задачи, решаемые через паттерны:

Компонент	Пример использования
Featured item	Карточка товара, ключевой пост, ценовая таблица
Newsletter sign-up	Форма подписки, размещаемая на разных страницах
Testimonial	Отзыв клиента — одиночный или группа
Call-to-action	Призыв к действию с кнопкой

Принципы композиции

1. Начинайте с малого

Начните с фундаментальных элементов в Style Book: текст, изображения, кнопки. Это основа вашей дизайн-системы.

2. Стройте вверх

Комбинируйте базовые элементы в более сложные блоки. Например:

Создайте Media & Text паттерн
Сохраните как несинхронизированный паттерн
Настройте макет

3. Думайте responsively

Проектируйте блоки так, чтобы они работали на всех размерах экрана. Columns block умеет «Stack on mobile» — колонки автоматически выстраиваются вертикально на мобильных.

Всегда проверяйте дизайн в превью для планшета и мобильного.

Пример анатомии паттерна

Group block (контейнер)
└── Columns block
    ├── Левая колонка
    │   ├── Paragraph (надпись)
    │   ├── Heading (заголовок)
    │   ├── Paragraph (описание)
    │   └── Buttons (CTA)
    └── Правая колонка
        └── Image (изображение)

Итог

Принимая block-first мышление, вы не просто дизайните страницы — вы создаёте гибкую систему компонентов. Ключ: мыслить модульно, проектировать для переиспользования через блоки и паттерны.