Home

🔷 Блок: Stack / Стек

📌 Что это

Stack — это блок Gutenberg для размещения нескольких блоков вертикально, один под другим.

То есть элементы внутри Stack идут сверху вниз.

Например:

заголовок;
текст;
кнопка;
изображение;
список;
иконка;
несколько ссылок;
карточка с описанием.

Простыми словами:

Stack = контейнер, где блоки стоят столбиком.

⚙️ Функции

Блок позволяет:

добавлять внутрь разные блоки;
располагать элементы вертикально;
настраивать расстояние между элементами;
выравнивать элементы слева, по центру или справа;
задавать общий фон;
настраивать цвет текста;
настраивать padding / внутренние отступы;
настраивать margin / внешние отступы;
добавлять рамку;
добавлять скругление углов;
использовать wide width / full width, если тема поддерживает;
преобразовывать Stack в Group или Row;
добавлять CSS-класс в Advanced.

Stack — это контейнерный блок: внутрь него можно вкладывать другие блоки, а сам Stack можно преобразовать в Group или Row без удаления содержимого.

🎯 Зачем нужен

Чтобы аккуратно собрать элементы в вертикальную группу.

Например:

[Заголовок]
[Описание]
[Кнопка]

Или:

[Иконка]
[Название услуги]
[Короткое описание]

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

📍 Где используется чаще всего

карточки услуг;
карточки товаров;
блоки преимуществ;
sidebar / боковая колонка;
футер;
CTA-блоки;
контактные блоки;
мини-секции;
обучающие страницы;
страницы услуг;
лендинги.

⚠️ Важно

Stack очень похож на Group, но с конкретным направлением.

Group — универсальный контейнер.
Stack — контейнер, где всё идёт вертикально.

Пример:

Stack
 ├─ Heading
 ├─ Paragraph
 └─ Button

На странице это будет выглядеть так:

Заголовок
Текст
[Кнопка]

⚠️ Stack или Row?

Они почти противоположны.

Row — элементы идут в ряд:

[Элемент 1] [Элемент 2] [Элемент 3]

Stack — элементы идут столбиком:

[Элемент 1]
[Элемент 2]
[Элемент 3]

То есть:

Row = горизонтально
Stack = вертикально

⚠️ Stack или Columns?

Stack — элементы внутри одного контейнера идут сверху вниз.

Columns — секция делится на несколько вертикальных колонок рядом.

Например Stack:

[Заголовок]
[Текст]
[Кнопка]

Например Columns:

[Колонка 1] [Колонка 2] [Колонка 3]

Если нужна карточка или вертикальная группа — используй Stack.
Если нужна секция из нескольких колонок — используй Columns.

⚠️ Очень частая схема

Stack часто используют внутри Columns.

Например:

Columns
 ├─ Column
 │   └─ Stack
 │       ├─ Icon
 │       ├─ Heading
 │       └─ Paragraph
 │
 ├─ Column
 │   └─ Stack
 │       ├─ Icon
 │       ├─ Heading
 │       └─ Paragraph
 │
 └─ Column
     └─ Stack
         ├─ Icon
         ├─ Heading
         └─ Paragraph

Так удобно делать карточки преимуществ или услуг.

⚠️ Настройка расстояния

Одна из главных настроек Stack — расстояние между внутренними блоками.

Например:

маленькое расстояние — элементы выглядят как плотная карточка;
большое расстояние — элементы выглядят более свободно и “воздушно”.

Это обычно настраивается через:

Dimensions → Block spacing

или похожую настройку в правой панели.

⚠️ Тема может влиять

Возможности Stack могут зависеть от темы.

Тема может влиять на:

отступы;
ширину;
цвета;
типографику;
рамки;
скругления;
wide/full width;
доступные настройки spacing.

Если какой-то настройки нет, это не обязательно ошибка. Возможно, текущая тема её не поддерживает.

🧠 Простыми словами

Stack — это блок для вертикального расположения элементов.

Если нужно поставить блоки один под другим и управлять ими как одной группой — используй Stack.