BlockControls — это компонент библиотеки WordPress React, который активно используется для улучшения пользовательского интерфейса в редакторе блоков WordPress. Это средство позволяет добавлять инструменты в панель управления, которые всплывают при выборе блока, обеспечивая гибкость и контроль при редактировании.
Применение BlockControls в разработке блоков
Компонент BlockControls может значительно упростить добавление настроек форматирования и выравнивания для пользовательского блока, который можно зарегистрировать с помощью функции registerBlockType из пакета @wordpress/blocks. Давайте рассмотрим на примере, как его можно встроить в редактор.
Регистрация блока с использованием BlockControls
Перед началом обязательно импортируйте необходимые компоненты из редактора блоков:
import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import {
useBlockProps,
BlockControls,
BlockAlignmentToolbar
} from '@wordpress/block-editor';
import './editor.scss';Зарегистрируйте новый блок с уникальным адресом и настройками:
const BLOCK_ID = 'custom/block-controls-demo';
registerBlockType(BLOCK_ID, {
apiVersion: 2,
title: __('Block Controls Demo', 'custom'),
description: __('A demo block showcasing BlockControls.', 'custom'),
category: 'custom',
icon: 'admin-customizer',
attributes: {
align: {
type: 'string',
default: 'center'
},
textAlign: {
type: 'string',
default: 'left'
}
},
edit: ( { attributes, setAttributes } ) => {
const blockProps = useBlockProps();
return (
<div { ...blockProps }>
<BlockControls>
<BlockAlignmentToolbar
value={ attributes.align }
onChange={ ( newAlignment ) => setAttributes( { align: newAlignment } ) }
/>
</BlockControls>
<p>Customize your block here.</p>
</div>
);
}
});Интеграция BlockControls в редактор блока
В приведенном выше примере, BlockControls позволяет добавить панель инструментов с элементами управления выравниванием текста. Использование BlockAlignmentToolbar обеспечивает возможность выбирать выравнивание для блока, делая интерфейс интуитивно понятным.
Важно отметить, что элементы, передаваемые в качестве Children в
BlockControls, появляются только когда блок активен. Это обеспечивает динамизм интерфейса, сокрытие ненужных элементов в неактивном состоянии, улучшая UX.
Заключение
Компонент BlockControls — мощный инструмент для добавления интерактивности и функциональности в блоки WordPress. Он позволяет разработчикам создавать настраиваемые панели инструментов, что облегчает настройку и управление контентом в редакторе. Это ключевой элемент для создания интуитивно понятных интерфейсов и улучшения взаимодействия с пользователем.