Поддержка тем - Wordpress Gutenberg - новости, руководства, оптимизация WordPress

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

Есть несколько новых концепций, которые следует учитывать при создании тем:

Цветовая палитра редактора — предоставляется набор цветов по умолчанию, но темы могут регистрировать свои собственные и при необходимости блокировать выбор пользователей из определенной палитры.
Палитра размеров текста в редакторе — предоставляется набор размеров по умолчанию, но темы и регистрируются самостоятельно и, при необходимости, блокируют пользователей на выбор из предварительно выбранных размеров.
Responsive Embeds — Темы должны подписаться на отзывчивые встраивания.
Стили внешнего интерфейса и редактора. Чтобы получить максимальную отдачу от блоков, авторы тем захотят убедиться, что основные стили выглядят хорошо и подходят, или написать свои собственные стили, которые наилучшим образом соответствуют их тематике.
Темный режим — если тема является темной темой с темным фоном, содержащим светлый текст, автор темы может подключиться к темному режиму.

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

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

Чтобы включить одну из этих функций, позвоните add_theme_supportв functions.phpфайл темы. Например:

function mytheme_setup_theme_supported_features() {
    add_theme_support( 'editor-color-palette', array(
        array(
            'name' => __( 'strong magenta', 'themeLangDomain' ),
            'slug' => 'strong-magenta',
            'color' => '#a156b4',
        ),
        array(
            'name' => __( 'light grayish magenta', 'themeLangDomain' ),
            'slug' => 'light-grayish-magenta',
            'color' => '#d0a5db',
        ),
        array(
            'name' => __( 'very light gray', 'themeLangDomain' ),
            'slug' => 'very-light-gray',
            'color' => '#eee',
        ),
        array(
            'name' => __( 'very dark gray', 'themeLangDomain' ),
            'slug' => 'very-dark-gray',
            'color' => '#444',
        ),
    ) );
}

add_action( 'after_setup_theme', 'mytheme_setup_theme_supported_features' );

Широкое выравнивание:

Некоторые блоки, такие как блок изображения, имеют возможность определять «широкое» или «полное» выравнивание путем добавления соответствующего имени класса в оболочку блока ( alignwideили alignfull). Тема может подписаться на эту функцию, позвонив:

add_theme_support( 'align-wide' );

Для получения дополнительной информации об этой функции см. Документацию для разработчиковadd_theme_support() .

Широкие выравнивания и поплавки

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

Гутенберг добавляет дополнительную разметку к плавающим изображениям, чтобы упростить их оформление.

Вот разметка для Imageс подписью:

<figure class="wp-block-image">
    <img src="..." alt="" width="200px" />
    <figcaption>Short image caption.</figcaption>
</figure>

Вот разметка для левого плавающего изображения:

<div class="wp-block-image">
    <figure class="alignleft">
        <img src="..." alt="" width="200px" />
        <figcaption>Short image caption.</figcaption>
    </figure>
</div>

Вот пример использования вышеуказанной разметки для создания адаптивного макета с боковой панелью, широкими изображениями и плавающими элементами с ограниченными заголовками: https://codepen.io/joen/pen/zLWvrW.

Блок цветовых палитр

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

add_theme_support( 'editor-color-palette', array(
    array(
        'name' => __( 'strong magenta', 'themeLangDomain' ),
        'slug' => 'strong-magenta',
        'color' => '#a156b4',
    ),
    array(
        'name' => __( 'light grayish magenta', 'themeLangDomain' ),
        'slug' => 'light-grayish-magenta',
        'color' => '#d0a5db',
    ),
    array(
        'name' => __( 'very light gray', 'themeLangDomain' ),
        'slug' => 'very-light-gray',
        'color' => '#eee',
    ),
    array(
        'name' => __( 'very dark gray', 'themeLangDomain' ),
        'slug' => 'very-dark-gray',
        'color' => '#444',
    ),
) );

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

Темы отвечают за создание классов, которые применяют цвета в разных контекстах. Базовые блоки используют контексты «цвет» и «цвет фона». Поэтому для правильного применения «сильного пурпурного» ко всем контекстам основных блоков тема должна реализовывать следующие классы:

.has-strong-magenta-background-color {
    background-color: #313131;
}

.has-strong-magenta-color {
    color: #f78da7;
}

Имя класса создается с добавлением ‘has-‘, за которым следует имя класса с использованием регистра kebab и заканчивая именем контекста.

Размер шрифта блока:

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

add_theme_support( 'editor-font-sizes', array(
    array(
        'name' => __( 'Small', 'themeLangDomain' ),
        'size' => 12,
        'slug' => 'small'
    ),
    array(
        'name' => __( 'Normal', 'themeLangDomain' ),
        'size' => 16,
        'slug' => 'normal'
    ),
    array(
        'name' => __( 'Large', 'themeLangDomain' ),
        'size' => 36,
        'slug' => 'large'
    ),
    array(
        'name' => __( 'Huge', 'themeLangDomain' ),
        'size' => 50,
        'slug' => 'huge'
    )
) );

Размеры шрифта отображаются в средстве выбора размера шрифта в том порядке, в котором они указаны.

Темы отвечают за создание классов, которые применяют стили правильного размера шрифта.
Имя класса строится с добавлением ‘has-‘, за которым следует имя размера шрифта с использованием регистра kebab и заканчивая на -font-size.

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

.has-regular-font-size {
    font-size: 16px;
}

Отключение пользовательских размеров шрифта

Темы могут отключить возможность установки нестандартных размеров шрифта с помощью следующего кода:

add_theme_support('disable-custom-font-sizes');

Если установлено, пользователи будут ограничены размерами по умолчанию, указанными в Gutenberg, или размерами, указанными в editor-font-sizesнастройке поддержки тем.

Отключение пользовательских цветов в блоке Цветовые палитры

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

Темы могут отключить эту функцию, используя:

add_theme_support( 'disable-custom-colors' );

Этот флаг гарантирует, что пользователи смогут выбирать цвета только из editor-color-paletteпредоставленной темы или из цветов редактора по умолчанию, если тема не предоставила их.

Редактор стилей

Гутенберг поддерживает стили редактора темы , однако работает немного иначе, чем в классическом редакторе.

В классическом редакторе таблица стилей редактора загружается непосредственно в iframe редактора WYSIWYG без изменений. Гутенберг, однако, не использует фреймы. Чтобы убедиться, что ваши стили применяются только к содержимому редактора, мы автоматически преобразуем ваши стили редактора, выборочно переписывая или корректируя определенные селекторы CSS. Это также позволяет Гутенбергу использовать ваш стиль редактора в предварительном просмотре вариантов блока.

Например, если вы пишете body { ... }в своем стиле редактора, это переписывается в .editor-styles-wrapper { ... }. Это также означает, что вы не должны указывать ни на одно из имен классов редактора напрямую.

Поскольку это работает немного по-другому, вам нужно включить это, добавив дополнительный фрагмент в вашу тему, в дополнение к функции add_editor_style:

add_theme_support('editor-styles');

Вам не нужно слишком сильно менять стили вашего редактора; Большинство тем могут добавить фрагмент выше и получить аналогичные результаты в классическом редакторе и внутри Гутенберга.

Темные фоны

Если ваш стиль редактора основан на темном фоне, вы можете добавить следующее, чтобы настроить цвет интерфейса для работы на темном фоне:

add_theme_support( 'editor-styles' );
add_theme_support( 'dark-editor-style' );

Обратите внимание, что вам не нужно добавлять add_theme_support( 'editor-styles' );дважды, но это правило должно присутствовать, чтобы dark-editor-styleправило работало.

Ставим в очередь стиль редактора

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

add_editor_style( 'style-editor.css' );

Достаточно вставить это в ваш functions.phpфайл, чтобы стиль был загружен и проанализирован.

Основные цвета

Вы можете стилизовать редактор как любую другую веб-страницу. Вот как можно изменить цвет фона и шрифта на синий:

/* Add this to your `style-editor.css` file */
body {
    background-color: #d3ebf3;
    color: #00005d;
}

Изменение ширины редактора

Чтобы изменить ширину основного столбца редактора, добавьте следующий CSS style-editor.css:

/* Main column width */
.wp-block {
    max-width: 720px;
}

/* Width of "wide" blocks */
.wp-block[data-align="wide"] {
    max-width: 1080px;
}

/* Width of "full-wide" blocks */
.wp-block[data-align="full"] {
    max-width: none;
}

Вы можете использовать эти ширины редактора, чтобы соответствовать тем в вашей теме. Вы можете использовать любую единицу ширины CSS, включая %или px.

Дополнительная информация: Применение стилей с помощью таблиц стилей .

Стили блоков по умолчанию

Основные блоки включают стили по умолчанию. Стили ставятся в очередь для редактирования, но не ставятся в очередь для просмотра, если тема не подключена к основным стилям. Если вы хотите использовать в своей теме стили по умолчанию, добавьте поддержку тем для wp-block-styles:

add_theme_support( 'wp-block-styles' );

Адаптивный встроенный контент

Встраиваемые блоки автоматически применяют стили к встроенному содержимому, чтобы отражать соотношение сторон содержимого, встроенного в iFrame. Блок, стилизованный под адаптивные стили соотношения сторон, будет выглядеть так:

<figure class="wp-embed-aspect-16-9 wp-has-aspect-ratio">...</figure>

Чтобы изменить размер содержимого и сохранить его пропорции, <body>элементу нужен wp-embed-responsiveкласс. Это не установлено по умолчанию и требует, чтобы тема включила эту responsive-embedsфункцию:

add_theme_support( 'responsive-embeds' );