Как создать собственный CSS класс для Gutenberg блока в WordPress

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

Почему стоит использовать собственные CSS классы в Gutenberg блоках

По умолчанию Gutenberg позволяет добавлять классы через поле «Дополнительные CSS классы», но часто этого недостаточно для комплексной стилизации блоков. Создание собственного CSS класса даёт следующие преимущества:

• Чёткий контроль над стилями без риска конфликтов с другими блоками или темой.
• Возможность использовать классы для условного применения скриптов и стилей.
• Удобство поддержки и масштабирования кода, особенно в крупных проектах.

Для реализации этого мы будем использовать хуки WordPress и возможности JavaScript редактора блоков.

Добавление собственного CSS класса через PHP: регистрация блоков и фильтры

Первый шаг — зарегистрировать блок и добавить поддержку своего CSS класса. Предположим, у нас есть блок с именем wpblock/custom-class-block. Ниже пример кода в файле плагина или темы:

function wpblock_register_custom_class_block() {
    register_block_type('wpblock/custom-class-block', [
        'render_callback' => 'wpblock_render_custom_class_block',
        'attributes' => [
            'customClass' => [
                'type' => 'string',
                'default' => '',
            ],
        ],
    ]);
}
add_action('init', 'wpblock_register_custom_class_block');

function wpblock_render_custom_class_block($attributes, $content) {
    $class = !empty($attributes['customClass']) ? esc_attr($attributes['customClass']) : '';
    return '<div class="wpblock-custom-block '. $class .'">' . $content . '</div>';
}

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

Как добавить поле для ввода CSS класса в редакторе Gutenberg

Чтобы пользователь мог в редакторе вводить значение CSS класса, добавим контрол в панель настроек блока на стороне редактора. Для этого используем JavaScript и API расширения блоков:

const { __ } = wp.i18n;
const { InspectorControls } = wp.blockEditor;
const { PanelBody, TextControl } = wp.components;
const { createHigherOrderComponent } = wp.compose;
const { addFilter } = wp.hooks;

const withCustomClassControl = createHigherOrderComponent( ( BlockEdit ) => {
    return ( props ) => {
        if ( props.name !== 'wpblock/custom-class-block' ) {
            return <BlockEdit { ...props } />;
        }

        return (
            <>
                <BlockEdit { ...props } />
                <InspectorControls>
                    <PanelBody title={ __( 'Настройки CSS класса', 'wpblock' ) } initialOpen={ true }>
                        <TextControl
                            label={ __( 'Дополнительный CSS класс', 'wpblock' ) }
                            value={ props.attributes.customClass }
                            onChange={ ( value ) => props.setAttributes( { customClass: value } ) }
                        />
                    </PanelBody>
                </InspectorControls>
            </>
        );
    };
}, 'withCustomClassControl' );

addFilter(
    'editor.BlockEdit',
    'wpblock/with-custom-class-control',
    withCustomClassControl
);

Этот код добавит в боковую панель редактора дополнительное поле для ввода CSS класса, который попадёт в атрибут customClass.

Пример стилизации блока с собственным CSS классом

Теперь, когда у блока есть возможность принимать дополнительный класс, можно добавить стили в CSS темы или плагина. Например:

.wpblock-custom-block.red-background {
    background-color: #ffdddd;
    padding: 15px;
}

.wpblock-custom-block.blue-border {
    border: 2px solid #0073aa;
    padding: 15px;
}

Пользователь может ввести в поле «Дополнительный CSS класс» значения red-background или blue-border для изменения внешнего вида блока.

Автоматическое добавление уникального CSS класса с префиксом

Для предотвращения конфликтов удобно автоматически добавлять префикс к пользовательским классам. Для этого изменим функцию рендера следующим образом:

function wpblock_render_custom_class_block($attributes, $content) {
    $class = '';
    if (!empty($attributes['customClass'])) {
        // Разбиваем строку с классами на массив
        $classes = preg_split('/\s+/', $attributes['customClass']);
        // Добавляем префикс wpblock- к каждому классу
        $prefixed = array_map(function($cls) {
            return 'wpblock-' . sanitize_html_class($cls);
        }, $classes);
        $class = implode(' ', $prefixed);
    }
    return '<div class="wpblock-custom-block '. esc_attr($class) .'">' . $content . '</div>';
}

Так пользователь вводит привычные им классы, а в разметке они автоматически получают префикс wpblock-, что снижает вероятность конфликтов и упрощает поддержку.

Использование плагина Clearfy Pro для управления CSS классами и оптимизации

Если вы используете Clearfy Pro, этот плагин позволит дополнительно оптимизировать загрузку стилей блоков, отключить ненужные классы и улучшить производительность сайта.

Clearfy Pro умеет автоматически очищать код от неиспользуемых CSS классов, что особенно полезно при большом количестве кастомных блоков с динамическими стилями.

Подводим итоги: рекомендации и лучшие практики

Создание собственного CSS класса для Gutenberg блока — это простой и мощный способ улучшить кастомизацию и контроль над внешним видом. Вот несколько советов:

• Всегда используйте префиксы для классов, чтобы избежать конфликтов.
• Добавляйте поля для кастомных классов через InspectorControls в редакторе.
• Соблюдайте стандарты безопасности: фильтруйте и экранируйте все пользовательские значения.
• Используйте Clearfy Pro для оптимизации CSS и повышения производительности.
• Тестируйте стили в разных браузерах и при разных режимах редактирования.

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