Компонент Toolbar в WordPress предназначен для группировки связанных опций, как правило, в виде иконок с кнопками, облегчающих доступ к действиям. Например, Toolbar удобно использовать над блоком изображения для изменения стилей текста, добавления ссылок и других манипуляций.
Основные Рекомендации
- Коммуникация действия. При нажатии на элементы
Toolbarдолжно быть очевидно, что произойдет конкретное действие (например, выделение текста жирным или добавление ссылки). - Цветовые акценты. Используйте цвета с учётом их значения; например, красный — только для действий, которые сложно или невозможно отменить.
- Расположение. При использовании с блоками,
Toolbarдолжен размещаться в одном и том же месте (обычно сверху), чтобы не нарушать интерфейс.
Состояния
- Активные и доступные. Состояние
Toolbarдолжно показывать активный элемент (выделенный жирным шрифтом, подчеркивание и т.д.). При наведении и фокусировке отобразите доступные опции. - Отключенные элементы. Кнопки
Toolbar, которые недоступны, можно либо скрывать, либо отображать в виде неактивных (заблокированных).
Импортирование Компонента
Для работы с компонентом Toolbar и его элементами сначала нужно импортировать их из пакета WordPress:
import { Toolbar, ToolbarButton } from '@wordpress/components';
import { formatBold, formatItalic, link } from '@wordpress/icons';
Пример Создания Простого Toolbar
В следующем примере создается Toolbar, содержащий кнопки для форматирования текста: жирный, курсив и добавление ссылки.
function TextFormattingToolbar() {
return (
<Toolbar label="Форматирование текста">
<ToolbarButton
icon={ formatBold }
label="Жирный текст"
onClick={() => console.log('Выбран жирный шрифт')}
/>
<ToolbarButton
icon={ formatItalic }
label="Курсив"
onClick={() => console.log('Выбран курсив')}
/>
<ToolbarButton
icon={ link }
label="Ссылка"
onClick={() => console.log('Добавление ссылки')}
/>
</Toolbar>
);
}
В этом примере добавлены обработчики событий onClick, которые выводят сообщение в консоль при выборе опции.
Свойства (Props) Компонента
Компонент Toolbar принимает различные свойства, позволяющие его настройку.
className
- Тип:
string - Описание: Название класса для стилизации контейнера
Toolbar. - Обязательное: Нет
label
- Тип:
string - Описание: Атрибут для улучшения доступности (ария-метка), который описывает назначение
Toolbar. - Обязательное: Да
variant
- Тип:
'unstyled' | undefined - Описание: Стиль
Toolbar. По умолчанию у него есть граница, если же указано'unstyled', граница исчезнет, но сохранится стандартный стиль попапа. - Обязательное: Нет
- Значение по умолчанию:
undefined
orientation
- Тип:
'horizontal' | 'vertical' - Описание: Определяет ориентацию
Toolbar. Оставьтеundefinedили укажитеhorizontalдля горизонтального расположения,vertical— для вертикального. - Обязательное: Нет
- Значение по умолчанию:
horizontal
Расширенный Пример с Дополнительными Свойствами
function CustomToolbar() {
return (
<Toolbar
label="Настройки"
className="custom-toolbar"
variant="unstyled"
orientation="vertical"
>
<ToolbarButton
icon={ formatBold }
label="Жирный"
onClick={() => alert('Форматирование жирным шрифтом')}
/>
<ToolbarButton
icon={ formatItalic }
label="Курсив"
onClick={() => alert('Форматирование курсивом')}
/>
<ToolbarButton
icon={ link }
label="Вставка ссылки"
onClick={() => alert('Вставка ссылки')}
/>
</Toolbar>
);
}
В этом примере:
variant="unstyled"убирает границу, что делаетToolbarминималистичным.orientation="vertical"меняет расположение кнопок на вертикальное.
Связанные Компоненты
Внутри Toolbar можно использовать такие элементы, как:
ToolbarGroup– для организации кнопок в группы, если их много.ToolbarButton– кнопка действия, как в примерах выше.ToolbarItem– базовый элемент, позволяющий кастомизацию кнопок.
Пример с Группировкой Кнопок
import { Toolbar, ToolbarGroup, ToolbarButton } from '@wordpress/components';
import { formatBold, formatItalic, link } from '@wordpress/icons';
function GroupedToolbar() {
return (
<Toolbar label="Редактирование">
<ToolbarGroup>
<ToolbarButton icon={ formatBold } label="Жирный" />
<ToolbarButton icon={ formatItalic } label="Курсив" />
</ToolbarGroup>
<ToolbarGroup>
<ToolbarButton icon={ link } label="Ссылка" />
</ToolbarGroup>
</Toolbar>
);
}
Здесь ToolbarGroup позволяет логически объединить кнопки. Например, кнопки форматирования и кнопки для добавления ссылки размещаются в отдельных группах.
Заключение
Компонент Toolbar в WordPress — это мощный инструмент, с которым можно создавать интуитивно понятные панели инструментов для различных действий в блоках редактора. Следуя рекомендациям по дизайну и использованию, вы сможете улучшить пользовательский опыт и сделать интерфейс более функциональным.