Инспектор блока

Над самим блоком висит компактная панель с самым частым — выравнивание, жирный шрифт, ссылка. Всё остальное вынесено в инспектор: он открывается в боковой панели настроек, как только вы кликаете по блоку. Содержимое панели меняется от блока к блоку: у изображения — альтернативный текст и размер, у кнопки — ширина, у колонок — их число и поведение на мобильных.

Как устроены разделы

У многих блоков инспектор разделён на две вкладки. «Настройки» отвечают за поведение и содержание, «Стили» — за внешний вид: цвет текста и фона, типографику, внутренние и внешние отступы, рамку. Внизу почти всегда есть раздел «Дополнительно» с полем HTML-якоря для ссылок вида #dostavka и полем дополнительных CSS-классов.

Какие элементы оформления появятся, определяет сам блок через свою поддержку функций, а тема может часть из них отключить или ограничить. Например, в theme.json можно запретить произвольные цвета, оставив только палитру бренда, — тогда инспектор покажет только её.

Как добавить свои настройки в блок

Разработчик выводит поля в инспекторе компонентом InspectorControls:

import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { PanelBody, ToggleControl } from '@wordpress/components';

export default function Edit( { attributes, setAttributes } ) {
    return ( <>
        <InspectorControls>
            <PanelBody title="Вывод">
                <ToggleControl label="Показывать цену" checked={ attributes.showPrice }
                    onChange={ ( v ) => setAttributes( { showPrice: v } ) } />
            </PanelBody>
        </InspectorControls>
        <div { ...useBlockProps() }>Карточка товара</div>
    </> );
}

Значение сохраняется в атрибуте блока и попадает в разметку записи.

Чего ждать на практике

Свобода инспектора — палка о двух концах. Контент-менеджер, которому доступны любые цвета и размеры шрифта, за месяц превращает аккуратный сайт в пёстрый. Поэтому в проектах с несколькими авторами набор настроек обычно сужают через theme.json, а для повторяющихся элементов готовят паттерны и стили блоков. Заданные в инспекторе цвета и отступы сохраняются прямо в атрибутах конкретного блока, и смена темы их не перекрывает — это стоит учитывать при редизайне.