Вертикальный ритм

Это тестовая страница для проверки типографики и вертикального ритма разных блоков Gutenberg и обычного HTML-контента в теме WPBox. Ниже собраны абзацы, заголовки, списки, цитаты, таблицы, изображения, группы, колонки, кнопки, медиа-блоки, код и другие типовые сценарии. Текст специально поясняет, что именно в этом месте сейчас проверяется.

Обычный текстовый блок

Это стандартный абзац для проверки базового размера шрифта, межстрочного интервала и нижнего отступа. Такой сценарий встречается в любой записи чаще всего, поэтому именно он должен выглядеть максимально спокойно и предсказуемо.

Это второй абзац подряд. Здесь удобно смотреть, правильно ли работает вертикальный ритм между соседними абзацами и нет ли ощущения, что текст слипается или, наоборот, слишком разъезжается.

Заголовки подряд

Подзаголовок третьего уровня сразу после второго

Подзаголовок четвёртого уровня сразу после третьего без текста между ними

Этот блок нужен для проверки сценария, когда пользователь сначала набрасывает структуру статьи, а потом начинает заполнять её текстом. Здесь сразу видно, не слишком ли большой отступ между заголовками.

Маркированный список

• Первый пункт списка для проверки стандартного отступа сверху и снизу.
• Второй пункт чуть длиннее, чтобы проверить перенос строки внутри элемента списка и расстояние между строками внутри одного пункта.
• Третий пункт завершает тестовую группу и помогает оценить расстояние после списка.

Нумерованный список

1. Первый нумерованный пункт.
2. Второй нумерованный пункт с более длинным текстом, чтобы было видно, как выглядит перенос строки и насколько аккуратно выглядит многострочный элемент списка.
3. Третий нумерованный пункт для проверки общего ритма.

Definition list

Термин 1Это описание первого термина. Здесь полезно смотреть, не выглядит ли список слишком сжатым.Термин 2Описание второго термина длиннее, чтобы проверить перенос строк и расстояние между разными парами терминов и описаний.

Цитата

Это тестовая цитата. Она нужна для проверки отступов до и после блока, внутренней типографики и общей контрастности относительно основного текста.

Подпись к цитате или имя автора

Горизонтальная линия

Ниже расположен разделитель. Он нужен, чтобы посмотреть, как он вписывается в ритм текста и не выглядит ли слишком тяжёлым или слишком бледным.

---

После разделителя идёт новый абзац, чтобы можно было оценить расстояние после hr.

Inline-элементы

В этом абзаце есть жирный текст, курсив, ссылка, inline code, Ctrl + S, подсветка и мелкий текст. Этот блок помогает сразу проверить, не выбиваются ли встроенные элементы из ритма строки.

Блок кода

<section class="wpbox-example">
  <h2>Пример блока</h2>
  <p>Этот код нужен для проверки pre/code внутри контентной зоны.</p>
</section>

Таблица

Колонка 1	Колонка 2	Колонка 3
Короткий текст	Средний текст для проверки ширины ячеек	Ещё один текст
Вторая строка	Эта ячейка длиннее и показывает, как работает высота строки внутри таблицы	Финальная ячейка

Изображение и подпись

Галерея

Группа Gutenberg

Заголовок внутри Group

Это тест группы Gutenberg. Она полезна для проверки, не ломается ли ритм, если контент находится не напрямую в .entry-content, а внутри вложенного контейнера.

• Первый пункт внутри группы.
• Второй пункт внутри группы.

Колонки Gutenberg

Первая колонка

Текст в первой колонке. Здесь нужно проверить внутренние отступы и вертикальный ритм в более узком контейнере.

Вторая колонка

Текст во второй колонке. Этот блок помогает увидеть, не ломаются ли заголовки и абзацы в много колоночной сетке.

Медиа и текст

Блок Media & Text

Здесь можно проверить поведение текста рядом с изображением, расстояния между элементами и общий вид составного Gutenberg-блока.

Это второй абзац внутри текстовой части блока.

Кнопки Gutenberg

Cover block

Заголовок внутри Cover

Этот блок нужен для проверки внутренних отступов и типографики внутри сложных Gutenberg-блоков.

Separator block

---

Quote block Gutenberg

Это Gutenberg quote block. Он может немного отличаться от обычного HTML blockquote, поэтому его полезно проверять отдельно.

Автор цитаты

Pullquote block

Это Pullquote. Здесь удобно смотреть, насколько тема корректно обрабатывает более декоративный вид цитаты.

Подпись к pullquote

File block

Пример файла для скачивания.pdf
Скачать

Details block

Нажмите, чтобы открыть скрытый контент

Verse block

Это тестовый verse block.
В нём сохраняются переносы строк.
Полезно проверить, не выглядит ли он слишком похоже на обычный pre.

Buttons после текста

Сейчас после обычного абзаца идёт блок кнопок. Здесь нужно проверить, не слишком ли большой отступ перед блоком интерфейса после текстового контента.

Смешанный блок для общего теста ритма

Ниже идёт большой комбинированный кусок: заголовок, абзац, список, цитата и таблица подряд. Такой сценарий очень похож на реальную статью или документацию.

Подраздел внутри смешанного теста

Это абзац после H3. Здесь проверяется типовой переход от подзаголовка к обычному тексту.

• Первый пункт списка внутри смешанного теста.
• Второй пункт списка для оценки расстояния до следующего блока.

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

Элемент	Что проверяем
Заголовок	Размер, line-height, отступы
Абзац	Читаемость, ритм, перенос строк
Список	Отступы, маркеры, переносы

Эта финальная строка завершает страницу и помогает проверить, убирается ли нижний отступ у последнего элемента контентной зоны, если ты решишь использовать такую логику в WPBox.