BlockAlignmentMatrixToolbar — это экспериментальный компонент из библиотеки WordPress, позволяющий разработчикам Gutenberg-блоков управлять выравниванием элемента, подобно тому, как это делает AlignmentMatrixControl. Он часто используется для позиционирования фоновых изображений и предоставляет интуитивно понятный интерфейс для выбора выравнивания.
Основы использования BlockAlignmentMatrixToolbar
Компонент BlockAlignmentMatrixToolbar прост в интеграции и удобен для создания усовершенствованного пользовательского интерфейса в блоках. Ниже представлен пример, демонстрирующий, как включить его в пользовательский блок WordPress.
import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import {
useBlockProps,
__experimentalBlockAlignmentMatrixToolbar as BlockAlignmentMatrixToolbar
} from '@wordpress/block-editor';
import './editor.scss';
registerBlockType('custom/block-alignment-example', {
apiVersion: 2,
title: __('Block Alignment Example', 'custom-domain'),
category: 'design',
icon: 'align-center',
attributes: {
alignment: {
type: 'string',
default: 'center'
}
},
edit({ attributes, setAttributes }) {
const blockProps = useBlockProps();
return (
<div {...blockProps}>
<BlockAlignmentMatrixToolbar
label={__('Select Image Alignment', 'custom-domain')}
value={attributes.alignment}
onChange={(newAlignment) => setAttributes({ alignment: newAlignment })}
/>
<p>{__('Check the toolbar above to set alignment of the background image', 'custom-domain')}</p>
</div>
);
},
save() {
return <div {...useBlockProps.save()}>{__('Image alignment applied!', 'custom-domain')}</div>;
}
});Особенности и атрибуты
В данном компоненте используется атрибут alignment, который принимает значения типа string. Значение по умолчанию установлено как center. Выделив компонент в редакторе, пользователь может легко изменить выравнивание изображения, используя предоставленный интерфейс.
Ключевые моменты интеграции:
- Атрибуты: Обязательно указывайте начальные атрибуты и их типы для корректной работы.
- Пропсы:
BlockAlignmentMatrixToolbarтребуетlabel,valueиonChangeдля обработки ввода пользователя. - Выражение
useBlockPropsнеобходимое для передачи свойств блока в редактор и фронтенд.
Важно понимать, что
BlockAlignmentMatrixToolbarявляется экспериментальным компонентом. Важно следить за обновлениями WordPress, так как API может измениться.
Заключение
Компонент BlockAlignmentMatrixToolbar — это мощный инструмент создания пользовательских блоков в редакторе Gutenberg. Он обеспечивает гибкость при позиционировании элементов, улучшая пользовательский интерфейс. Однако, важно помнить о его экспериментальном статусе и потенциальных изменениях API.