Ширины layout

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

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

Имя	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

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

Фронт

Источник токенов: 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)

Цель: те же 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).

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

Симптом	Вероятная причина
Текст 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)

Источник: 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).

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

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

Сборка

После правок 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).