В системе WordPress редактора блоков компонент BlockBreadcrumb служит навигационной подсказкой для пользователей, предоставляя понимание структуры, в которой находится выбранный блок. Это полезный инструмент для более точной ориентации в сложных структурах страниц. В сегодняшней статье мы рассмотрим, как интегрировать его в пользовательские блоки.
Что такое BlockBreadcrumb?
Компонент BlockBreadcrumb в WordPress представляет собой средство визуализации структуры блоков текущей страницы, отображающее путь до выбранного блока. Это упрощает навигацию и редактирование, особенно когда используются вложенные блоки.
Регистрация блока с использованием BlockBreadcrumb
При создании пользовательского блока с компонентом BlockBreadcrumb, вы можете следовать следующему шаблону кода, чтобы настроить и зарегистрировать блок:
import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import {
useBlockProps,
BlockBreadcrumb
} from '@wordpress/block-editor';
import './editor.css';
const BLOCK_IDENTIFIER = 'example-breadcrumb-block';
const BLOCK_DIRECTORY = `custom-plugin/${BLOCK_IDENTIFIER}`;
registerBlockType( BLOCK_DIRECTORY, {
apiVersion: 2,
title: __( 'Example Breadcrumb Block', 'custom-plugin' ),
description: __( 'A block that demonstrates the use of BlockBreadcrumb.' ),
category: 'layout',
icon: 'admin-site',
edit: () => {
const blockProps = useBlockProps();
return (
<div { ...blockProps }>
<BlockBreadcrumb />
<p>{ __('Breadcrumb example block', 'custom-plugin') }</p>
</div>
);
},
save: () => {
return (
<p>{ __('Breadcrumb example block', 'custom-plugin') }</p>
);
}
} );
Параметры и атрибуты
Компонент BlockBreadcrumb автоматически отслеживает текущий выбранный блок в редакторе, не требуя дополнительных входных параметров. Он предоставляет пользователям функциональный и упрощенный опыт взаимодействия с иерархией блоков.
Улучшение пользовательского интерфейса
Добавление стилей в файл editor.css позволяет ориентироваться на улучшение визуальной составляющей вашего блока. Вы также можете добавить CSS для улучшения отображения хлебных крошек в соответствии с вашим UI-дизайном.
Совет: Используйте блоки BlockBreadcrumb для упрощения навигации по сложным страницам с множеством вложенных структур блоков, что обеспечивает большее удобство для конечных пользователей.
Заключение
Компонент BlockBreadcrumb в WordPress значительно улучшает навигацию в редакторе, позволяя пользователям легко понимать положение блоков на странице. Его интеграция в пользовательские блоки является важным аспектом создания удобного пользовательского интерфейса. Применив данные из этой статьи, вы сможете добавить эту полезную функциональность в свои проекты.