Компонент ToolbarGroup в WordPress: Полное руководство с примерами

Главная - WordPress Codex - Компонент ToolbarGroup в WordPress: Полное руководство с примерами
Доступна с версии: 5.0
Раздел: Gutenberg
Написал: Александр Сокирка

ToolbarGroup — это компонент в WordPress, который позволяет создавать подгруппы элементов управления внутри панели инструментов (Toolbar). Он особенно полезен для организации связанных действий и кнопок, что делает интерфейс более структурированным и удобным для пользователей.

Использование ToolbarGroup

Для создания панели инструментов с подгруппами необходимо импортировать Toolbar, ToolbarGroup, а также другие компоненты, такие как ToolbarButton, иконки и другие элементы интерфейса.

Базовый пример использования

В этом примере создадим две подгруппы. Первая подгруппа включает кнопку для абзаца, а вторая — кнопки для форматирования текста (жирный, курсив) и вставки ссылки.

import { Toolbar, ToolbarGroup, ToolbarButton } from '@wordpress/components';
import { paragraph, formatBold, formatItalic, link } from '@wordpress/icons';

function MyCustomToolbar() {
    return (
        <Toolbar label="Опции">
            <ToolbarGroup>
                <ToolbarButton icon={paragraph} label="Абзац" onClick={() => console.log('Абзац выбран')} />
            </ToolbarGroup>
            <ToolbarGroup>
                <ToolbarButton icon={formatBold} label="Жирный" onClick={() => console.log('Жирный текст')} />
                <ToolbarButton icon={formatItalic} label="Курсив" onClick={() => console.log('Курсивный текст')} />
                <ToolbarButton icon={link} label="Ссылка" onClick={() => console.log('Добавить ссылку')} />
            </ToolbarGroup>
        </Toolbar>
    );
}

Параметры компонента ToolbarGroup

Компонент ToolbarGroup принимает все стандартные HTML-свойства, которые передаются на базовый элемент. Это позволяет адаптировать внешний вид и поведение группы в зависимости от потребностей интерфейса.

СвойствоТипОписание
classNamestringКласс CSS, добавляемый к ToolbarGroup для дополнительных стилей.
labelstringТекст метки, описывающий назначение группы. Используется для улучшения доступности.

Использование с другими компонентами

ToolbarGroup часто содержит такие дочерние элементы, как ToolbarButton и ToolbarItem. Это обеспечивает единый стиль и функциональность в рамках панели инструментов.

Пример с несколькими ToolbarGroup

Добавим еще одну группу для дополнительных действий, таких как выравнивание текста. Каждое действие выполняется при нажатии кнопки, и логируется в консоли.

import { Toolbar, ToolbarGroup, ToolbarButton } from '@wordpress/components';
import { paragraph, formatBold, formatItalic, link, alignLeft, alignCenter, alignRight } from '@wordpress/icons';

function ExtendedToolbar() {
    return (
        <Toolbar label="Инструменты форматирования">
            <ToolbarGroup>
                <ToolbarButton icon={paragraph} label="Абзац" onClick={() => console.log('Абзац добавлен')} />
            </ToolbarGroup>
            <ToolbarGroup>
                <ToolbarButton icon={formatBold} label="Жирный" onClick={() => console.log('Применить жирный')} />
                <ToolbarButton icon={formatItalic} label="Курсив" onClick={() => console.log('Применить курсив')} />
                <ToolbarButton icon={link} label="Ссылка" onClick={() => console.log('Добавить ссылку')} />
            </ToolbarGroup>
            <ToolbarGroup>
                <ToolbarButton icon={alignLeft} label="Влево" onClick={() => console.log('Выравнивание влево')} />
                <ToolbarButton icon={alignCenter} label="По центру" onClick={() => console.log('Выравнивание по центру')} />
                <ToolbarButton icon={alignRight} label="Вправо" onClick={() => console.log('Выравнивание вправо')} />
            </ToolbarGroup>
        </Toolbar>
    );
}

Добавление класса стиля к ToolbarGroup

Можно добавить пользовательский класс стиля к ToolbarGroup, чтобы настроить внешний вид группы кнопок.

import { Toolbar, ToolbarGroup, ToolbarButton } from '@wordpress/components';
import { paragraph, formatBold, formatItalic } from '@wordpress/icons';

function StyledToolbarGroup() {
    return (
        <Toolbar label="Форматирование">
            <ToolbarGroup className="custom-group-style">
                <ToolbarButton icon={paragraph} label="Абзац" onClick={() => console.log('Добавлен абзац')} />
            </ToolbarGroup>
            <ToolbarGroup className="custom-group-style">
                <ToolbarButton icon={formatBold} label="Жирный" onClick={() => console.log('Применен жирный стиль')} />
                <ToolbarButton icon={formatItalic} label="Курсив" onClick={() => console.log('Применен курсив')} />
            </ToolbarGroup>
        </Toolbar>
    );
}

В этом примере:

  • Свойство className в ToolbarGroup присваивает класс custom-group-style, который можно стилизовать через CSS.

Пример с использованием метки (label)

Использование свойства label в ToolbarGroup помогает создать текстовое описание для улучшения доступности.

import { Toolbar, ToolbarGroup, ToolbarButton } from '@wordpress/components';
import { paragraph, formatBold, formatItalic } from '@wordpress/icons';

function AccessibleToolbarGroup() {
    return (
        <Toolbar label="Редактирование текста">
            <ToolbarGroup label="Базовые инструменты">
                <ToolbarButton icon={paragraph} label="Абзац" onClick={() => console.log('Добавлен абзац')} />
            </ToolbarGroup>
            <ToolbarGroup label="Стили">
                <ToolbarButton icon={formatBold} label="Жирный" onClick={() => console.log('Применен жирный стиль')} />
                <ToolbarButton icon={formatItalic} label="Курсив" onClick={() => console.log('Применен курсив')} />
            </ToolbarGroup>
        </Toolbar>
    );
}

В этом примере:

  • Свойство label добавлено в ToolbarGroup для указания описания для каждой группы, что полезно для пользователей с экранными читалками.

Заключение

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

Стартовая премиум тема для WordPress
Демо импорт тестового контента в 1 клик.
SEO оптимизированный и валидный код.
Множество готовых стартовых сайтов.
Лучшая документация и поддержка.
Опции персонализации контента.
Креативный и современный дизайн.
Тема для WordPress

Дополнительно по: Gutenberg