ToolsPanel — это экспериментальный компонент в WordPress, позволяющий организовать элементы управления, такие как настройки блочных опций, с помощью прогрессивного раскрытия. Это означает, что пользователи могут настраивать отдельные элементы, используя удобное меню для включения или отключения параметров.
Основные Принципы Использования
Компонент ToolsPanel создает контейнер с заголовком и выпадающим меню, которое генерируется автоматически на основе дочерних элементов ToolsPanelItem. Каждый элемент меню позволяет включать или отключать отображение соответствующего дочернего элемента, а события onSelect и onDeselect дают возможность дополнительной настройки. Например, можно сбрасывать атрибуты блока, если конкретный элемент ToolsPanelItem отключен.
Импортирование Компонента
Для использования ToolsPanel и ToolsPanelItem, импортируем их из библиотеки WordPress:
import {
BoxControl,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
__experimentalUnitControl as UnitControl,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import styled from '@emotion/styled';
Создание Простой Панели с Настройками Размеров
В этом примере создадим панель ToolsPanel с элементами управления для высоты, ширины, отступов и полей. Это позволит пользователям настраивать размеры и отступы блока.
const PanelDescription = styled.div`
grid-column: span 2;
`;
export function DimensionSettingsPanel() {
const [height, setHeight] = useState();
const [width, setWidth] = useState();
const [padding, setPadding] = useState();
const [margin, setMargin] = useState();
const resetAll = () => {
setHeight(undefined);
setWidth(undefined);
setPadding(undefined);
setMargin(undefined);
};
return (
<ToolsPanel label={ __('Размеры') } resetAll={ resetAll }>
<PanelDescription>
Выберите параметры размеров или отступов для дополнительных настроек.
</PanelDescription>
<ToolsPanelItem
hasValue={ () => !!height }
label={ __('Высота') }
onDeselect={ () => setHeight(undefined) }
isShownByDefault
>
<UnitControl
label={ __('Высота') }
value={ height }
onChange={ setHeight }
/>
</ToolsPanelItem>
<ToolsPanelItem
hasValue={ () => !!width }
label={ __('Ширина') }
onDeselect={ () => setWidth(undefined) }
isShownByDefault
>
<UnitControl
label={ __('Ширина') }
value={ width }
onChange={ setWidth }
/>
</ToolsPanelItem>
<ToolsPanelItem
hasValue={ () => !!padding }
label={ __('Отступы') }
onDeselect={ () => setPadding(undefined) }
>
<BoxControl
label={ __('Отступы') }
values={ padding }
onChange={ setPadding }
/>
</ToolsPanelItem>
<ToolsPanelItem
hasValue={ () => !!margin }
label={ __('Поля') }
onDeselect={ () => setMargin(undefined) }
>
<BoxControl
label={ __('Поля') }
values={ margin }
onChange={ setMargin }
/>
</ToolsPanelItem>
</ToolsPanel>
);
}
Свойства (Props) Компонента ToolsPanel
Компонент ToolsPanel поддерживает несколько свойств, которые можно настроить для изменения его поведения и внешнего вида.
label
- Тип:
string - Описание: Текст, отображаемый в заголовке панели, а также используемый как
aria-labelдля выпадающего меню. - Обязательное: Да
resetAll
- Тип:
(filters?: ResetAllFilter[]) => void - Описание: Функция, вызываемая при выборе опции «Сбросить все» в меню. Принимает массив с функциями сброса для каждого элемента
ToolsPanelItem. - Обязательное: Да
hasInnerWrapper
- Тип:
boolean - Описание: Указывает, что элементы внутри
ToolsPanelбудут размещены во внутреннем оберточном элементе для правильного размещения. - Обязательное: Нет
- Значение по умолчанию:
false
dropdownMenuProps
- Тип:
object - Описание: Пропсы для настройки выпадающего меню панели.
- Обязательное: Нет
headingLevel
- Тип:
1 | 2 | 3 | 4 | 5 | 6 - Описание: Уровень заголовка панели.
- Обязательное: Нет
- Значение по умолчанию:
2
panelId
- Тип:
string | null - Описание: Идентификатор панели. Если установлен, панель будет ограничена элементами, у которых такой же
panelId. - Обязательное: Нет
shouldRenderPlaceholderItems
- Тип:
boolean - Описание: Указывает, что все элементы
ToolsPanelItemдолжны отображать «заглушки» (вместоnull), если они отключены. - Обязательное: Нет
- Значение по умолчанию:
false
Пример: Панель с Описанием и Группировкой Элементов
В этом примере добавим описание, а также сгруппируем некоторые элементы в две колонки.
const PanelDescription = styled.div`
grid-column: span 2;
`;
export function AdvancedDimensionPanel() {
const [height, setHeight] = useState();
const [width, setWidth] = useState();
const [padding, setPadding] = useState();
const [margin, setMargin] = useState();
return (
<ToolsPanel label={ __('Настройки размеров') } resetAll={ resetAll }>
<PanelDescription>
Настройте параметры размеров и отступов. Выберите нужные параметры из меню.
</PanelDescription>
<ToolsPanelItem
hasValue={ () => !!height }
label={ __('Высота') }
onDeselect={ () => setHeight(undefined) }
isShownByDefault
>
<UnitControl
label={ __('Высота') }
value={ height }
onChange={ setHeight }
/>
</ToolsPanelItem>
<ToolsPanelItem
hasValue={ () => !!width }
label={ __('Ширина') }
onDeselect={ () => setWidth(undefined) }
isShownByDefault
>
<UnitControl
label={ __('Ширина') }
value={ width }
onChange={ setWidth }
/>
</ToolsPanelItem>
<ToolsPanelItem
hasValue={ () => !!padding }
label={ __('Отступы') }
onDeselect={ () => setPadding(undefined) }
>
<BoxControl
label={ __('Отступы') }
values={ padding }
onChange={ setPadding }
/>
</ToolsPanelItem>
<ToolsPanelItem
hasValue={ () => !!margin }
label={ __('Поля') }
onDeselect={ () => setMargin(undefined) }
>
<BoxControl
label={ __('Поля') }
values={ margin }
onChange={ setMargin }
/>
</ToolsPanelItem>
</ToolsPanel>
);
}
Заключение
Компонент ToolsPanel — это гибкий инструмент для организации параметров и настроек блоков в WordPress. Он упрощает пользовательский интерфейс, предоставляя возможность скрытия и показа элементов управления. Умение настраивать этот компонент позволит вам создавать более адаптивные и интуитивно понятные панели.