editor.BlockEdit — это важный хук WordPress, который позволяет модифицировать компонент редактирования блока. Этот хук предоставляет возможность обернуть существующий компонент BlockEdit конструктором высшего порядка, добавляя дополнительную функциональность или интерфейсные элементы к блокам редактора.
Использование editor.BlockEdit
Чтобы расширить функционал редактора блоков, можно использовать хук editor.BlockEdit. Он позволяет внедрять кастомные элементы управления в интерфейс каждого блока, например, добавляя свои панели инспектора только когда нужный блок выбран. Рассмотрим пример, как можно добавить пользовательскую панель управления.
Пример: Добавление пользовательской панели инспектора для выбранных блоков
const { createHigherOrderComponent } = wp.compose;
const { InspectorControls } = wp.blockEditor;
const { PanelBody, PanelRow, TextControl } = wp.components;
const { useSelect } = wp.data;
const enhanceBlockEdit = createHigherOrderComponent((BlockEdit) => {
return (props) => {
const shouldRenderPanel = useSelect(select => select('core/block-editor').getSelectedBlockClientId() === props.clientId);
return (
<>
<BlockEdit {...props} />
{shouldRenderPanel && (
<InspectorControls>
<PanelBody title="Настройки компонента" initialOpen={true}>
<PanelRow>
<TextControl
label="Пользовательское поле"
value={props.attributes.customField}
onChange={(value) => props.setAttributes({ customField: value })}
/>
</PanelRow>
</PanelBody>
</InspectorControls>
)}
</>
);
};
}, 'enhanceBlockEdit');
wp.hooks.addFilter(
'editor.BlockEdit',
'my-custom-plugin/enhance-blockedit',
enhanceBlockEdit
);Важно учитывать производительность
Поскольку
editor.BlockEditприменяется ко всем блокам, это может повлиять на производительность редактора. Поэтому следует всегда проверять необходимость выполнения дополнительных операций, например, рендеринг компонентов только при выбранном блоке используяprops.isSelectedили состояние выделенного блока.
Практика: Условное отображение по состоянию блока
Попробуем добавить панель, отображающуюся только для определённых блоков, и только тогда, когда они выделены.
const enhanceSelectiveBlockEdit = createHigherOrderComponent((BlockEdit) => {
return (props) => {
if (props.name !== 'core/paragraph') {
return <BlockEdit {...props} />;
}
return (
<>
<BlockEdit {...props} />
{props.isSelected && (
<InspectorControls>
<PanelBody title="Только для параграфов">
<PanelRow>
<TextControl
label="Специальное поле для параграфов"
value={props.attributes.specialField}
onChange={(value) => props.setAttributes({ specialField: value })}
/>
</PanelRow>
</PanelBody>
</InspectorControls>
)}
</>
);
};
}, 'enhanceSelectiveBlockEdit');
wp.hooks.addFilter(
'editor.BlockEdit',
'my-custom-plugin/enhance-selective-blockedit',
enhanceSelectiveBlockEdit
);Заключение
Хук editor.BlockEdit является мощным инструментом для разработки кастомных расширений в редакторе блоков WordPress. Корректное использование этого хука позволяет создавать более интерактивный и настраиваемый интерфейс, потенциально влияя на производительность. Следует внимательно подходить к его применению, чтобы обеспечить оптимальный пользовательский опыт.