Gutenberg – выравнивание блока "Стих"

Признаться честно, я не хотел на моём сайте писать статьи о программировании – это слишком обширная тема, а тематика сайта – иная. Но всё же решил сделать исключение, ведь речь пойдёт о том, как разместить белый стих на сайте с системой управления WordPress (5.4) и блочным редактором Gutenberg – тема, которой скорей всего никто ещё не касался. Задача была такова: белый стих нужно было разместить по центру области содержимого. Это отрывок из недописанной трагедии "Александр Великий", где в подражание Шекспиру, я также разрываю строку, передавая реплику другому персонажу. Технически этого можно достигнуть по-разному. Можно поместить текст в блок HTML-код, создавая отступы символом-мнемоникой &nbsp; и переносы – тегами <br> - если объём текста очень большой, то вручную сделать это будет очень непросто. Можно также использовать "Классический блок" (Classic Block), где выбрать в выпадающем списке "Форматирование" (по умолчанию – "Абзац"). При этом весь текст будет обёрнут в тег <pre>. Но для форматированного текста имеется специальный блок "Форматированный" (Preformatted). Для стихотворений имеется специальный блок "Стих" (Verse). Приведу два способа выравнивания блока "Стих" по центру.

Способ первый

В настройках блока в поле "Дополнительно" нужно задать класс, например: verse-center и добавить следующие стили (в файл CSS дочерней темы или в настройках темы: "Настроить" → "Дополнительные стили"):

.verse-center {
    background: #fff;
    max-width: 420px;
    margin: 0 auto;
}

@media only screen and (max-width:544px) {
    .verse-center {
        margin: 0;
        padding: 0;
    }
}

Поясню код:

  • background: #fff; – цвет фона
  • max-width: 420px; – максимальная ширина
  • margin: 0 auto; – отступ сверху и снизу – 0, справа и слева – автоматически

Дальше я использовал медиазапрос, чтобы для телефона в портретной ориентации удалить отступы. Ширина (max-width: 420px;) должна быть задана для того, чтобы можно было центрировать по горизонтали (margin: 0 auto;). Для этого нужно примерно знать длину самой длинной строки стихотворения. Поэтому я отказался от этого способа.

Способ второй

Можно не задавать ширину – тогда придётся поступить несколько иначе. Потребуется вложить блок "Стих" (Verse) в блок "Группа" (Group) и задать CSS для обоих блоков – родительского и дочернего. Для выравнивания я воспользовался свойством flex:

.group-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.verse {
    background: #fff;
    white-space: pre-wrap;
}

Выравнивание по центру достигается с помощью justify-content: center;. Для блока "Стих" я задал цвет фона background: #fff; (это переопределяет цвет фона, который задаёт тема), а также добавил свойство white-space: pre-wrap;, благодаря которому длинный текст, обёрнутый в тег <pre>, будет переноситься на дисплеях телефонов.

Для поддержки старых браузеров я добавил свойства CSS с префиксами, для современных браузеров код можно упростить:

.group-center {
    display: flex;
    justify-content: center;
}

.verse {
    background: #fff;
    white-space: pre-wrap;
}

Если вы хотите, чтобы фон вашего блока "Стих" отличался от фона страницы, то для класса .verse нужно будет задать внутренний отступ, например: padding: 10px 15px;. Также вы можете изменить цвет текста, например: color: white;, сделать рамку, например: border: 5px solid Aquamarine;. Что касается шрифта, вы также можете его изменить, но тогда возникнут проблемы с пробелами, и особенно это касается белого стиха, где реплика передаётся от одного персонажа другому. Дело в том, что шрифт изменится только во фронтенде, но в бэкенде он останется тем же: font-family: "Courier 10 Pitch",Courier,monospace;. Конечно, вы можете несмотря на это различие опытным путём сдвигать слова на нужное расстояние, но гораздо удобней и правильней будет изменить шрифт в панели управления на точно такой же, как и тот, что вы зададите для класса .verse. Итак, для примера я задам размер шрифта – 100%, интерлиньяж (межстрочный интервал) – 1.5em и семейство шрифтов – Georgia, serif, кроме этого, я задам цвет фона – background: MediumSeaGreen;, цвет текста – color: white;, внутренний отступ – padding: 10px 15px; (10px – сверху и снизу и 15px – справа и слева), рамку – border: 5px solid Aquamarine; (толщиной 5px, одиночная, цвет – Aquamarine):

.verse {
    font: 100%/1.5em Georgia, serif;
    background: MediumSeaGreen;
    color: white;
    padding: 10px 15px;
    border: 5px solid Aquamarine;
    white-space: pre-wrap;
}

Для того, чтобы изменить шрифт в панели управления, нужно в файл functions.php вашей дочерней темы добавить следующий код:

function verse_css() {
    echo "<style>.edit-post-visual-editor pre {font: 100%/1.5em Georgia, serif;}</style>";
}
add_action( 'admin_head', 'verse_css' );

Хук добавляет в панель управления стили CSS для тега <pre>. Или конкретно для тега <pre>, имеющего класс.wp-block-verse:

function verse_css() {
    echo "<style>pre.wp-block-verse {font: 100%/1.5em Georgia, serif;}</style>";
}
add_action( 'admin_head', 'verse_css' );

Выбрать тег <pre> в блоке "Стих" также можно по значению data attribute родительского блока (тем самым не затрагивая блок "Форматированный", в котором также используется тег <pre>):

function verse_css() {
    echo "<style>[data-type='core/verse'] pre {font: 100%/1.5em Georgia, serif;}</style>";
}
add_action( 'admin_head', 'verse_css' );

Вот и всё. Если нужно разместить стихотворения "в газетном стиле", блоки "Стих" можно вложить в блок "Колонки". А результат вы можете увидеть на странице "Стихотворения". Я счёл семейство моноширинных шрифтов, заданное в WordPress, для белого стиха весьма подходящим. Однако у иного читателя возможно появится желание изменить шрифт.

Post Divider
albero
neve