Как стилизовать блоки в WordPress: Полное руководство для разработчиков

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

Стилизация блоков позволяет улучшить визуальное восприятие и функциональность, а также создать уникальный дизайн для каждого элемента. Мы рассмотрим два ключевых подхода: inline-стили, добавляемые с помощью JavaScript, и внешние CSS-файлы, подключаемые через block.json. Эта информация поможет как начинающим, так и опытным разработчикам грамотно организовать стили для своих блоков и сделать их код более поддерживаемым и оптимизированным.

Зачем стилизовать блоки в WordPress?

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

Обзор методов стилизации блоков WordPress

В WordPress разработчики могут стилизовать блоки двумя основными способами: добавлением inline-стилей и использованием отдельных CSS-файлов. Inline-стили — это быстрый и удобный способ добавить немного CSS для отдельных блоков, особенно когда требуется изменить один-два параметра. Однако если стилизация требует более обширного кода, удобнее использовать отдельные файлы стилей. Подключение CSS-файлов через block.json упрощает управление стилями, а также позволяет избежать дублирования кода, особенно если блоки используются в нескольких местах.

Метод 1: Inline-стили для блоков

Добавление inline-стилей — это простой способ применить небольшое количество CSS напрямую к блоку. Этот метод позволяет задать стили непосредственно в коде блока с помощью React-хука useBlockProps. Inline-стили подойдут, если нужно внести локальные изменения для блока, не прибегая к созданию дополнительных файлов.

Пример кода:

import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';

registerBlockType('example-block/inline-style', {
    edit() {
        const blockProps = useBlockProps({
            style: { backgroundColor: '#090', color: '#fff', padding: '20px' }
        });
        return <p {...blockProps}>Привет из редактора (на зеленом фоне)</p>;
    },
    save() {
        const blockProps = useBlockProps.save({
            style: { backgroundColor: '#900', color: '#fff', padding: '20px' }
        });
        return <p {...blockProps}>Привет с фронтенда (на красном фоне)</p>;
    }
});

Преимущества:

• Быстрая реализация для небольшого количества CSS.
• Удобно для блоков с уникальными стилями.

Недостатки:

• Труднее поддерживать стили при увеличении их объема.
• Inline-стили не подходят для масштабируемых проектов.

Метод 2: Использование классов и подключение CSS-файлов для блоков

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

Пример кода:

import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';

registerBlockType('example-block/class-style', {
    edit() {
        const blockProps = useBlockProps();
        return <p {...blockProps}>Привет из редактора (стили через CSS-файл)</p>;
    },
    save() {
        const blockProps = useBlockProps.save();
        return <p {...blockProps}>Привет с фронтенда (стили через CSS-файл)</p>;
    }
});

Этот код создает блок с уникальным классом, сгенерированным на основе его имени. Например, если блок зарегистрирован как example-block/class-style, он получит класс wp-block-example-block-class-style, который можно использовать в CSS для настройки внешнего вида.

Добавление CSS-файлов через block.json

Чтобы подключить стили к блоку, используйте block.json. В этом файле можно указать:

• editorStyle для стилей, которые будут применяться только в редакторе;
• style для стилей, применимых и в редакторе, и на фронтенде;
• viewStyle для стилей, которые будут загружаться только на фронтенде.

Пример block.json:

{
    "apiVersion": 3,
    "name": "example-block/class-style",
    "title": "Example Block with CSS File",
    "icon": "smiley",
    "category": "layout",
    "editorScript": "file:./block.js",
    "editorStyle": "file:./editor.css",
    "style": "file:./style.css"
}

Файл editor.css (для редактора):

.wp-block-example-block-class-style {
    background-color: #090;
    color: #fff;
    padding: 20px;
}

Файл style.css (для фронтенда):

.wp-block-example-block-class-style {
    background-color: #900;
    color: #fff;
    padding: 20px;
}

Преимущества метода:

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

Построение и подключение зависимостей

Для правильного подключения стилей и скриптов необходимо собрать зависимости блока. Это можно сделать с помощью команды npm run build, которая генерирует все необходимые файлы, а также обновляет asset.php, который WordPress использует для отслеживания зависимостей и версий.

npm run build

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

Дополнительные методы подключения стилей

Если вы хотите подключить дополнительные стили для блоков, не используя block.json, можно использовать стандартные WordPress функции. Это полезно, если блок использует несколько файлов CSS или вам нужно более гибкое управление подключением стилей.

Пример подключения с помощью enqueue_block_editor_assets:

function my_block_editor_assets() {
    wp_enqueue_style(
        'my-block-editor-style',
        plugins_url('editor.css', __FILE__),
        array(),
        '1.0.0'
    );
}
add_action('enqueue_block_editor_assets', 'my_block_editor_assets');

Пример подключения с помощью enqueue_block_assets:

function my_block_assets() {
    wp_enqueue_style(
        'my-block-style',
        plugins_url('style.css', __FILE__),
        array(),
        '1.0.0'
    );
}
add_action('enqueue_block_assets', 'my_block_assets');

Эти хуки и функции wp_enqueue_style позволяют более гибко настраивать загрузку CSS-файлов как для редактора, так и для фронтенда, что особенно полезно, если блок требует нескольких файлов стилей.

Заключение

Стилизация блоков WordPress — важный аспект разработки, который помогает улучшить пользовательский интерфейс и оптимизировать визуальное восприятие. Мы рассмотрели два подхода к добавлению стилей: inline-стили и подключение CSS-файлов через block.json. Inline-стили лучше подходят для простых и небольших блоков, а использование классов и подключение файлов CSS удобно для более сложных и масштабируемых проектов. Грамотно выбрав подход к стилизации, вы сможете создать качественный код, удобный для поддержки и масштабирования.

Автор: Александр Сокирка

Занимаюсь веб разработкой с 2007 года. Имею большой опыт в веб-дизайне и разработке сайтов. Являюсь автором YouTube канала Быть Программистом. Основатель бренда Aletheme и автор тем для WordPress на маркетплэйсе Envato. С 2017 года занимаюсь обучением людей желающим стать программистами. Мои обучающие программы можно найти на этом сайте или на Udemy.