---
title: Block-first мышление
description: "Философия блочного мышления в WordPress: модульный подход к дизайну, переиспользуемые компоненты, принципы композиции блоков."
---

## Что такое 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 мышление, вы не просто дизайните страницы — вы создаёте **гибкую систему компонентов**. Ключ: мыслить модульно, проектировать для переиспользования через блоки и паттерны.

## Материалы и источники

- [Designing with a block-first mindset (learn.wordpress.org)](https://learn.wordpress.org/lesson/designing-with-a-block-first-mindset/)

## Связанные страницы

- [Паттерны (Block Patterns)](https://wpcraft.ru/kb/stacks/wordpress/themes/patterns.md)
- [Иерархия блочной темы](https://wpcraft.ru/kb/stacks/wordpress/themes/practices/block-theme-hierarchy.md)
- [Дизайн-системы в WordPress](https://wpcraft.ru/kb/stacks/wordpress/themes/design-systems.md)

## Материалы и источники

- [Designing with a block-first mindset (learn.wordpress.org)](https://learn.wordpress.org/lesson/designing-with-a-block-first-mindset/)

## Связанные страницы

- [Иерархия блочной темы](https://wpcraft.ru/kb/stacks/wordpress/themes/practices/block-theme-hierarchy.md)
- [Композиция макетов](https://wpcraft.ru/kb/stacks/wordpress/themes/practices/layout-composition.md)
- [Site Editor для прототипирования](https://wpcraft.ru/kb/stacks/wordpress/themes/practices/site-editor-prototyping.md)