В экосистеме WordPress React компонент BlockVariationPicker играет ключевую роль в представлении различных вариаций блоков. Этот компонент, часто используемый в качестве интерфейса выбора в определенных блоках, как, например, в ядре блока «колонки», значимо упрощает процесс выбора варианта и настройки блоков.
Пример использования BlockVariationPicker
Рассмотрим, как можно создать кастомный блок для WordPress, используя BlockVariationPicker. Это позволит пользователям выбирать из нескольких вариантов оформления блока, что может быть полезно для применения различных стилей и компоновок.
import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import {
useBlockProps,
__experimentalBlockVariationPicker as BlockVariationPicker,
} from '@wordpress/block-editor';
import './editor.scss';
const MY_BLOCK_NAME = "custom-variation-block";
const MY_BLOCK_PATH = `myplugin/${MY_BLOCK_NAME}`;
registerBlockType( MY_BLOCK_PATH, {
apiVersion: 2,
title: __( 'Custom Variation Block', 'myplugin' ),
description: __( 'A custom block with multiple variations.', 'myplugin' ),
category: 'design',
icon: 'grid-view',
attributes: {
variation: {
type: 'string',
default: ''
},
},
edit: ( { attributes, setAttributes } ) => {
const blockProps = useBlockProps();
const variations = [
{
name: 'grid',
title: __('Grid', 'myplugin'),
icon: 'screenoptions',
description: __('Display items in a grid layout.', 'myplugin'),
},
{
name: 'list',
title: __('List', 'myplugin'),
icon: 'list-view',
description: __('Display items in a list format.', 'myplugin'),
},
];
return (
<div { ...blockProps }>
{ attributes.variation ? (
<p>{ __( `Selected variation: ${attributes.variation}`, 'myplugin' ) }</p>
) : (
<BlockVariationPicker
label={ __( 'Choose Layout', 'myplugin' ) }
variations={ variations }
onSelect={ ( variation ) => setAttributes( { variation: variation.name } ) }
/>
)}
</div>
);
},
save: () => {
return null; // Save function to be updated with dynamic render logic.
},
} );
Детали реализации
В данном примере мы создаем блок под названием Custom Variation Block, регистрируем его в registerBlockType и передаем атрибуты для хранения выбранной вариации. Внутри функции edit используется BlockVariationPicker, который предоставляет пользователю интерфейс выбора между разными формами отображения контента: в виде сетки или списка.
Совет: не забудьте подключить нужные стили в ‘editor.scss’, чтобы отображение в редакторе было наилучшим.
Заключение
Использование BlockVariationPicker в вашем плагине или теме WordPress позволяет разработчикам значительно улучшать пользовательский интерфейс, предоставляя удобный выбор вариаций блоков. Этот инструмент мощный и гибкий, он может расширяться в зависимости от потребностей, помогая создать динамичные и реагирующие дизайны.