Skip to content
WP2WP2

Ширины layout

Краткая модель колонок Blocks. Нужна, чтобы снова не сужать только фреймы или не путать оболочку с полезной шириной.

Три числа (не путать)

Section titled “Три числа (не путать)”
Имя px rem Токен / CSS Назначение
Shell 864 / 1148 54 / 71.75 layout-standard / layout-content Внешняя колонка страницы с gutter’ами
Usable 800 / 1084 50 / 67.75 = shell − 32×2 Полезная ширина контента внутри gutter’ов
Prose 800 50 layout-prose Узкий фрейм / основная текстовая колонка
Inner 1084 67.75 layout-inner Широкий / двухколоночный фрейм (800 + 20 + 264)
Aside 264 16.5 layout-aside Боковая колонка frame --two (UKS Sidebar)

Gutter desktop (page offset): 32px (--spacing-layout-gutter-md). Mobile: 16px.
Внутренние gaps секций/колонок/frame-two: Landing gutter 20 — см. GRID_UKS_MOS.md.

Wide-шаблон:
┌──────────────── shell 1148 ────────────────┐
│ 32 │──────── usable / inner 1084 ──────│ 32 │
│    │  prose 800 │ gap 20 │ aside 264  │    │  ← frame --two
└────┴───────────────────────────────────┴────┘

Формула: 800 + 20 + 264 = 1084 (Landing grid @1280: 12×72 + 11×20). Page offset 32 — только shell, не gap колонок.

Standard-шаблон: shell 864 → usable 800. Wide-фрейм на standard упирается в колонку (≤800/864 по контексту).

UKS Grid

Section titled “UKS Grid”

Профиль лонгрида = Landing; frame --two ≈ Sidebar (aside 264). Полный маппинг: GRID_UKS_MOS.md.

Фронт

Section titled “Фронт”

Источник токенов: wp2lms-turbo-blocks-mos/assets/src/styles/base/tokens.css (MOS).

Колонка страницы:

  • .wp2turbo-content-column → max-w-layout-standard (864) + px-layout-gutter-md
  • .wp2turbo-layout--wide … → max-w-layout-content (1148) + те же gutter’ы
  • Блоки внутри колонки: width: 100% (занимают usable)

Фреймы:

layout Класс max-width
narrow --narrow max-w-layout-prose (800)
wide --wide max-w-layout-inner (1084)
two --two max-w-layout-inner (1084); main + aside 264

Шаблон страницы (standard / wide) задаёт класс body через StaticPageRenderer / ContentLayoutResolver.

Редактор (Gutenberg)

Section titled “Редактор (Gutenberg)”

Цель: те же usable-ширины, что на фронте. Gutenberg режет блоки по --wp--style--global--content-size, поэтому в редакторе:

Переменная Standard Wide Кто выставляет
--wp--style--global--content-size 800px 1084px theme editor-layout.js
--skin-shell-max 864px 1148px тот же скрипт
--wp--style--global--wide-size 1148px 1148px тот же скрипт
Root padding 32 / 16 32 / 16 theme editor.css

Файлы темы MOS:

  • wp2lms-turbo-mos-theme/functions.php — …_layout_content_size() (usable), …_layout_shell_size() (shell)
  • wp2lms-turbo-mos-theme/assets/js/editor-layout.js — live-sync при смене шаблона страницы
  • wp2lms-turbo-mos-theme/theme.json — дефолт contentSize: 800px

Оверрайды фреймов в canvas:

  • assets/src/styles/editor/ (barrel → editor-canvas-overrides.css)

Поведение фреймов в editor:

  • wide / two → max-width: var(--wp--style--global--content-size) (как абзацы)
  • narrow → min(50rem, content-size)
  • левый край = колонка текста (margin-left по формуле content-size, не margin-inline: auto)

Hero / panel / cover inner в editor: max-width: var(--skin-shell-max) + padding gutters — не content-size + 2×gutter (иначе double-count после перехода на usable content-size).

Типичные ошибки

Section titled “Типичные ошибки”
Симптом Вероятная причина
Текст 1148, фрейм 1084 content-size снова = shell, а фрейм = inner
Фреймы на всю ширину canvas max-width: 100% без cap по content-size
Узкий фрейм «плавает» по центру margin-inline: auto вместо left-edge
Hero шире shell к usable content-size снова прибавили 2×gutter

Вертикальный ритм (Figma / base/tokens.css)

Section titled “Вертикальный ритм (Figma / base/tokens.css)”

Источник: assets/src/styles/base/tokens.css, assets/src/styles/base/prose.css.

Контекст Desktop Tablet Mobile
Page flow (sibling-блоки: абзац↔карточка, секции…) 48px 40px 32px
Typographic (p+p, абзац↔список — turbo siblings и classic HTML) 24px 20px 16px
Заголовок страницы → контент 48px 34px / 26px (header margin) —
H2 top / bottom 54 / 32 см. --space-prose-h2-* см. tokens
H3–H5 top / bottom 32 / 24 см. tokens см. tokens
Пункты списка (li+li) ~4–5px — —
Card inner 8px 8px 8px
Row/Stack layout gutter 32px — —

Page flow реализован через row-gap (--skin-flow-gap = --space-prose-block-gap, 48/40/32) на .skin-block-flow, .prose-skin, [data-turbo-flow]. Соседние типографские turbo-блоки (абзац↔абзац, абзац↔список) «подтягиваются» отрицательным margin до --space-prose-paragraph (24/20/16). Заголовки компенсируют gap отрицательным margin и собственным padding-block — их ритм не равен 48px.

Classic HTML внутри одного блока (freeform): p + p / p + ul используют --space-prose-paragraph*; turbo-блоки как siblings — только row-gap.

Separator: половина page flow gap (12 / 10 / 8 px).

Что не трогать без нужды

Section titled “Что не трогать без нужды”
  • Не менять фронтовые max-w-layout-prose / inner «под редактор».
  • Не ставить editor content-size обратно на 864/1148 без пересмотра всей модели.
  • editor-layout.js (MutationObserver / interval) держит CSS vars против reinject global-styles WP.

Сборка

Section titled “Сборка”

После правок blocks CSS:

Окно терминала
npm run build:blocks:mos
npm run build:theme:mos

Тема (functions.php, editor-layout.js, editor.css, theme.json) — после build:theme:mos hard refresh редактора (Ctrl+F5).