Компонент InspectorControls в WordPress позволяет добавлять настройки блоков в боковую панель редактора. Он используется для отображения панелей с параметрами, влияющими на весь блок. Настройки появляются в боковой панели при выборе блока и доступны как в режиме визуального редактирования, так и в режиме HTML.
В этой статье мы подробно рассмотрим использование InspectorControls и InspectorAdvancedControls, опишем все параметры и предоставим уникальные примеры их применения.
Что такое InspectorControls?
Компонент InspectorControls используется для добавления пользовательских настроек в интерфейс редактора. Это могут быть чекбоксы, текстовые поля, выпадающие списки и другие элементы управления, которые позволяют редактировать атрибуты блока. Они появляются в боковой панели под вкладкой «Настройки» и предоставляют интуитивный способ изменения параметров блока.
Использование InspectorControls: Простой пример
В следующем примере мы создадим блок с несколькими типами настроек:
- Чекбокс для логического значения.
- Радиокнопки для выбора одного значения из нескольких.
- Текстовое поле для ввода текста.
- Переключатель (toggle) для включения/выключения опции.
- Выпадающий список для выбора одного из нескольких вариантов.
Полный пример кода
import { registerBlockType } from '@wordpress/blocks';
import {
CheckboxControl,
RadioControl,
TextControl,
ToggleControl,
SelectControl,
PanelBody,
} from '@wordpress/components';
import { InspectorControls, useBlockProps, RichText } from '@wordpress/block-editor';
registerBlockType('my-plugin/inspector-controls-example', {
apiVersion: 2,
title: 'Inspector Controls Example',
icon: 'admin-generic',
category: 'design',
attributes: {
content: {
type: 'string',
source: 'html',
selector: 'p',
},
checkboxField: {
type: 'boolean',
default: false,
},
radioField: {
type: 'string',
default: 'option1',
},
textField: {
type: 'string',
default: '',
},
toggleField: {
type: 'boolean',
default: false,
},
selectField: {
type: 'string',
default: 'optionA',
},
},
edit({ attributes, setAttributes }) {
const blockProps = useBlockProps();
const { content, checkboxField, radioField, textField, toggleField, selectField } = attributes;
return (
<>
<InspectorControls>
<PanelBody title="Настройки блока" initialOpen={true}>
<CheckboxControl
label="Чекбокс"
checked={checkboxField}
onChange={(value) => setAttributes({ checkboxField: value })}
/>
<RadioControl
label="Выберите значение"
selected={radioField}
options={[
{ label: 'Опция 1', value: 'option1' },
{ label: 'Опция 2', value: 'option2' },
]}
onChange={(value) => setAttributes({ radioField: value })}
/>
<TextControl
label="Текстовое поле"
value={textField}
onChange={(value) => setAttributes({ textField: value })}
/>
<ToggleControl
label="Переключатель"
checked={toggleField}
onChange={(value) => setAttributes({ toggleField: value })}
/>
<SelectControl
label="Выпадающий список"
value={selectField}
options={[
{ label: 'Опция A', value: 'optionA' },
{ label: 'Опция B', value: 'optionB' },
{ label: 'Опция C', value: 'optionC' },
]}
onChange={(value) => setAttributes({ selectField: value })}
/>
</PanelBody>
</InspectorControls>
<RichText
{...blockProps}
tagName="p"
value={content}
onChange={(value) => setAttributes({ content: value })}
placeholder="Введите текст..."
/>
</>
);
},
save({ attributes }) {
const { content } = attributes;
const blockProps = useBlockProps.save();
return <RichText.Content {...blockProps} tagName="p" value={content} />;
},
});
Описание параметров компонентов
CheckboxControl
- label: Текст метки чекбокса.
- checked: Логическое значение (true/false).
- onChange: Функция, вызываемая при изменении значения.
RadioControl
- label: Текст метки радио-кнопок.
- options: Массив объектов
{ label, value }. - selected: Выбранное значение.
- onChange: Функция, вызываемая при выборе опции.
TextControl
- label: Текст метки текстового поля.
- value: Текущее значение.
- onChange: Функция, вызываемая при изменении текста.
ToggleControl
- label: Текст метки переключателя.
- checked: Логическое значение (true/false).
- onChange: Функция, вызываемая при изменении значения.
SelectControl
- label: Текст метки выпадающего списка.
- value: Текущее выбранное значение.
- options: Массив объектов
{ label, value }. - onChange: Функция, вызываемая при выборе нового значения.
Расширенные настройки: InspectorAdvancedControls
Компонент InspectorAdvancedControls добавляет элементы управления в раздел «Дополнительно». Обычно эти настройки включают редкие параметры, например, HTML-якоря или дополнительные классы CSS.
Пример использования InspectorAdvancedControls
import { TextControl } from '@wordpress/components';
import { InspectorAdvancedControls } from '@wordpress/block-editor';
function MyBlockEdit({ attributes, setAttributes }) {
return (
<>
<InspectorAdvancedControls>
<TextControl
label="HTML-якорь"
value={attributes.anchor}
onChange={(value) => setAttributes({ anchor: value })}
/>
</InspectorAdvancedControls>
</>
);
}
Заключение
Использование компонентов InspectorControls и InspectorAdvancedControls позволяет создавать мощные настройки для блоков WordPress. Эти элементы управления делают блоки более интерактивными и удобными для пользователей. Примеры из статьи помогут вам интегрировать данные компоненты в свои блоки и адаптировать их под собственные проекты.