InspectorAdvancedControls — это компонент WordPress, который позволяет разработчикам блоков размещать дополнительные опции в панели «Advanced» в Inspector Controls. Этот компонент особенно полезен для создания более сложных и настраиваемых блоков, предоставляя пользователю расширенные настройки.
Создание блока с InspectorAdvancedControls
Для начала, нам нужно зарегистрировать новый блок, который будет использовать InspectorAdvancedControls. В этом примере мы создадим блок с селектором, позволяющий выбрать пользователя, отображаемого в расширенных настройках.
import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import { SelectControl } from '@wordpress/components';
import { useBlockProps, InspectorAdvancedControls } from '@wordpress/block-editor';
import './editor.scss';
const BLOCK_IDENTIFIER = "advanced-user-selector";
const BLOCK_NAMESPACE = `custom-block/${BLOCK_IDENTIFIER}`;
registerBlockType(BLOCK_NAMESPACE, {
apiVersion: 2,
title: __( 'User Selector', 'custom-block' ),
description: __( 'Block with advanced settings to select a user', 'custom-block' ),
category: 'common',
icon: 'admin-users',
attributes: {
selectedUser: {
type: 'string',
default: ''
}
},
edit: ({ attributes, setAttributes }) => (
<div {...useBlockProps()}>
<InspectorAdvancedControls>
<SelectControl
label={__('Select User', 'custom-block')}
value={attributes.selectedUser}
onChange={(selectedUser) => setAttributes({ selectedUser })}
options={[
{ value: '', label: __('Select a user', 'custom-block') },
{ value: 'john', label: 'John' },
{ value: 'jane', label: 'Jane' },
{ value: 'doe', label: 'Doe' }
]}
/>
</InspectorAdvancedControls>
</div>
)
});В приведенном примере использования InspectorAdvancedControls, мы используем SelectControl для добавления взаимодействия. Это позволяет пользователю выбрать из нескольких предопределенных значений.
В edit компоненте блока, InspectorAdvancedControls обернут SelectControl, что делает его доступным в секции Advanced панелей настроек редактора.
Заключение
InspectorAdvancedControls — это инструмент для разработчиков WordPress, который помогает интегрировать продвинутые настройки в блоки, делая их более настраиваемыми и удобными для пользователя. Использовать его достаточно просто, добавляя гибкость в процесс настройки блоков в редакторе.
