BlockVerticalAlignmentToolbar в WordPress — это мощный React-компонент, позволяющий разработчикам легко задавать вертикальное выравнивание контента в блоках. Будучи дочерним элементом BlockControls, он предоставляет функциональность для установки выравнивания верхнего, среднего или нижнего уровня, наподобие того, как работает AlignmentToolbar.
Использование BlockVerticalAlignmentToolbar
Компонент BlockVerticalAlignmentToolbar позволяет пользователям гибко управлять выравниванием контента. Это делает возможным создание насыщенных и интуитивно понятных интерфейсов, что особенно полезно в компонентах, где требуется точное управление отображением контента.
Пример реализации
Давайте рассмотрим пример, чтобы понять, как можно интегрировать этот компонент в Gutenberg блок:
import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import {
useBlockProps,
BlockControls,
BlockVerticalAlignmentToolbar
} from '@wordpress/block-editor';
import './editor.scss';
const BLOCK_ID = 'my-unique-vertical-align-block';
const BLOCK_NAMESPACE = `custom-blocks/${BLOCK_ID}`;
registerBlockType(BLOCK_NAMESPACE, {
apiVersion: 2,
title: __('Vertical Align Block', 'custom-blocks'),
description: __('Block with vertical alignment option', 'custom-blocks'),
category: 'layout',
icon: 'align-center',
attributes: {
verticalAlign: {
type: 'string',
default: 'top'
}
},
edit: ({ attributes, setAttributes }) => {
const blockProps = useBlockProps();
const onChangeAlignment = (newAlignment) => {
setAttributes({ verticalAlign: newAlignment });
};
return (
<div {...blockProps}>
<BlockControls>
<BlockVerticalAlignmentToolbar
value={attributes.verticalAlign}
onChange={onChangeAlignment}
/>
</BlockControls>
<p>{__('This is a vertically aligned block', 'custom-blocks')}</p>
</div>
);
},
save: ({ attributes }) => {
return (
<div style={{ verticalAlign: attributes.verticalAlign }}>
<p>{__('This is a vertically aligned block', 'custom-blocks')}</p>
</div>
);
},
});
Интеграция
BlockVerticalAlignmentToolbarв блок не только добавляет функциональность, но и улучшает пользовательский интерфейс, делая его более гибким и дружественным.
Применение и стилизация
Для обеспечения визуальной согласованности вашего блока в редакторе используйте CSS стили. Это можно сделать путем импорта собственного файла стилей, например, editor.scss. Это важно, чтобы компонент выглядел и работал предсказуемо в редакторе и на фронтенде.
Заключение
BlockVerticalAlignmentToolbar — это важный инструмент для гибкой настройки вертикального выравнивания в Gutenberg блоках. Благодаря простоте интеграции и эффективности, он остается необходимым компонентом в арсенале разработчиков WordPress, стремящихся к созданию дружественных к пользователю интерфейсов.