Создание модификаторов – дополнительных стилей блоков в темах WordPress

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

WordPress представил API стилей блоков в версии 5.3 как возможность для авторов тем создавать настройки блоков, которые невозможны с помощью встроенных средств оформления. Однако он часто недоиспользуется в темах. И, когда он используется, результаты иногда лучше заменить вариациями или шаблонами.

Что такое стили блоков?

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

Разработчики могут зарегистрировать любое количество стилей для отдельных блоков Gutenberg, и WordPress отобразит их в панели боковой панели блока в редакторе. Пользователи затем могут выбрать свой предпочтительный стиль, такой как дизайн “Закругленный”, показанный на следующем скриншоте:

Встроенный стиль “Закругленный” для блока Изображение.

В целом функция – это просто интерфейс, наложенный на простой класс-основанный селектор.

Когда стоит создавать пользовательский стиль блока

Общее правило большого пальца состоит в том, что стили блоков должны использоваться, когда вы исчерпали другие варианты и нуждаетесь в настройке CSS. Из коробки большинство ядерных блоков поддерживают массив средств дизайна, которые обычно соответствуют существующим CSS-свойствам. Со временем это привело к меньшему количеству сценариев, в которых требуются пользовательские стили блоков.

Если вы хотели бы дать блоку Изображение толстую границу, нет необходимости в пользовательском стиле для этого. WordPress уже имеет встроенные параметры для границ, как показано на следующем скриншоте:

Добавление черной границы к изображению с помощью встроенных средств дизайна.

Авторы тем могут также использовать theme.json для определения значений по умолчанию для каждого из доступных параметров.

Что если вы хотели бы придать “рукописный” вид границе? WordPress не имеет никаких параметров для обработки этого сценария. Это потребовало бы некоторого пользовательского CSS. Это делает его хорошим кандидатом для пользовательского стиля блока.

Блок изображения с рукописной границей.

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

Регистрация пользовательского стиля блока

Для этого учебного пособия вы создадите пользовательский стиль блока, который дает блоку Изображение “рукописную” рамку, как показано на скриншоте в предыдущем разделе. Первый шаг в этом – использование функции PHP [register_block_style()](<https://developer.wordpress.org/reference/functions/register_block_style/>) .

Приведенный ниже кодовый фрагмент представляет собой быстрый обзор функции и ее параметров:

register_block_style(
    $block_name,
    $style_properties
);

Параметр $block_name должен быть именем типа блока (например, core/image). Параметр $style_properties – ассоциативный массив аргументов, которые можно передать для настройки стиля:

• name: (обязательный) уникальный идентификатор, который используется для генерации класса CSS (например, is-style-{name})
• label: (обязательный) интернационализированная, дружественная для пользователя метка для стиля
• inline_style: встроенный CSS, который будет напечатан при использовании стиля
• style_handle: обработка зарегистрированного стилевого листа для подключения стиля
• is_default: следует ли выбрать стиль в качестве значения по умолчанию для блока

Обратите внимание, что style_handle в настоящее время имеет ошибку, при которой он подключает лист стилей только в редакторе, но не на фронтенде. Поэтому его использование не рекомендуется.

Для регистрации пользовательского стиля создайте обратный вызов функции в файле functions.php темы и добавьте его в действие init. Следующий код регистрирует стиль hand-drawn блока:

add_action( 'init', 'themeslug_register_block_styles' );

function themeslug_register_block_styles() {
    register_block_style( 'core/image', array(
        'name'         => 'hand-drawn',
        'label'        => __( 'Hand-Drawn', 'themeslug' ),
        'inline_style' => '.wp-block-image.is-style-hand-drawn img {
            border: 2px solid currentColor;
            overflow: hidden;
            box-shadow: 0 4px  10px 0 rgba( 0, 0, 0, 0.3 );
            border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important;
        }'
    ) );
}

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

Загрузка стилей отдельно

Использование параметра inline_style и запись CSS внутри PHP хорошо подходит для одноразовых стилей, но может стать беспорядочным и превратиться в проблему управления в долгосрочной перспективе. Для большинства сценариев вы захотите управлять CSS внутри CSS-файлов и позволить WordPress автоматически встраивать их.

Сначала удалите свойство inline_style из функции, определенной ранее, как показано в следующем:

add_action( 'init', 'themeslug_register_block_styles' );

function themeslug_register_block_styles() {
    register_block_style( 'core/image', array(
        'name'  => 'hand-drawn',
        'label' => __( 'Hand-Drawn', 'themeslug' )
    ) );
}

Выше зарегистрирует стиль блока, но теперь у него не будет никакого встроенного CSS.

Теперь вы создадите блок-специфичный лист стилей. WordPress загрузит его содержимое и встроит CSS только при использовании блока. Дополнительные сведения о пер-блоковых листах стилей см. в Использование theme.json и пер-блоковых стилей для более производительных тем.

Для этого упражнения предположим, что у вас пустой assets/blocks/core-image.css, который содержит пользовательский CSS для блока Изображение. Чтобы загрузить его только при использовании блока, добавьте следующий код в файл functions.php:

add_action( 'init', 'themeslug_enqueue_block_styles' );

function themeslug_enqueue_block_styles() {
    wp_enqueue_block_style( 'core/image', array(
        'handle' => 'themeslug-block-image',
        'src'    => get_theme_file_uri( 'assets/blocks/core-image.css' ),
        'path'   => get_theme_file_path( 'assets/blocks/core-image.css' )
    ) );
}

Затем добавьте следующий CSS в файл core-image.css:

.wp-block-image.is-style-hand-drawn img {
    border: 2px solid currentColor;
    overflow: hidden;
    box-shadow: 0 4px  10px 0 rgba( 0, 0, 0, 0.3 );
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important;
}

Снятие регистрации стилей блоков

В некоторых сценариях вы можете захотеть удалить зарегистрированный стиль блока, например скрывая основные параметры или удаляя что-то зарегистрированное родительской темой или плагином. В большинстве сценариев вы будете использовать функцию [unregister_block_style()](<https://developer.wordpress.org/reference/functions/unregister_block_style/>) для этого.

Предположим, вы создаете дочернюю тему для темы, которая зарегистрировала стиль Hand Drawn. Вам нужно знать тип блока (core/image) и имя стиля (hand-drawn). Следующий PHP-код снимет регистрацию:

add_action( 'init', 'themeslug_unregister_block_styles', 15 );

function themeslug_unregister_block_styles() {
    unregister_block_style( 'core/image', 'hand-drawn' );
}

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

Предположим, в файле assets/js/block-editor.js в папке assets/js вашей темы, подключите JavaScript, как показано в следующем фрагменте кода:

add_action( 'enqueue_block_editor_assets', 'themeslug_block_editor_assets' );

function themeslug_block_editor_assets() {
    wp_enqueue_script(
        'themeslug-block-editor',
        get_theme_file_uri( 'assets/js/block-editor.js' ),
        array(
            'wp-blocks',
            'wp-dom-ready',
            'wp-edit-post'
        )
    );
}

Добавьте следующий код в файл block-editor.js, чтобы снять регистрацию стиля rounded на блоке Image:

wp.domReady( function () {
    wp.blocks.unregisterBlockStyle( 'core/image', 'rounded' );
} );

Несколько стилей на блок

Часто запрашиваемое дополнение к функции стилей блоков – возможность выбирать несколько стилей. В настоящее время это не поддерживается в WordPress. В некоторых сценариях это имеет смысл. Кроме того, под капотом стили блоков представляют собой просто класс CSS, и большинство разработчиков знают, что нет ограничений на классы, которые вы можете добавить к элементу.

Однако на практике множественные стили блоков легко могут конфликтовать друг с другом.

Чаще всего стили блоков, которые можно было бы объединить, являются простыми настройками, которые могут быть лучше отнесены к встроенным средствам дизайна. Блоки WordPress теперь поддерживают широкий спектр функций CSS, подходящих для таких базовых потребностей. И когда эти основы нужно объединять, блок-вариант, возможно, будет лучшим выбором.

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

Фотографии @kharisblank, @stephendumba1, и @roytanck из каталога фотографий WordPress.

Telegram WordPress

Телеграм канал и чат про WordPress

Будьте в теме и общайтесь про улучшение своих проектов и сайтов на WordPress

Подписаться