Расширить представление списка в редакторе Гутенберг?

На чтение 2 мин Опубликовано 12.01.2025

Вопрос или проблема

Можно ли настроить вид списка в редакторе блоков WordPress? Я бы хотел поставить значок, если пользовательский атрибут содержит определенное значение, аналогично тому, как это реализовано в основном плагине core/image.

Ответ или решение

Вопрос о возможности кастомизации списка в редакторе блоков Гутенберг является актуальным для многих разработчиков, работающих с WordPress. Давайте рассмотрим, как можно реализовать добавление иконки в список, если пользовательский атрибут содержит определенное значение, как это сделано в плагине core/image.

Теория

В блоковом редакторе Гутенберг все элементы страницы — это блоки, которые можно настраивать и расширять. Каждый блок может иметь свои атрибуты, определяемые в его JavaScript конфигурации. Список блоков (или List View) позволяет просмотреть и управлять структурой всех блоков на текущей странице. Чтобы модифицировать отображение конкретного блока в этом списке, необходимо вмешаться в механизмы использования атрибутов и отображения иконок в List View.

Пример

Предположим, у нас есть кастомизированный блок с атрибутом status. Мы хотим отображать иконку рядом с блоком в List View, если этот атрибут имеет значение "important". Аналогичным образом это реализуется в плагине для блока core/image, где в зависимости от свойств изображения отображаются особые маркеры. Такой подход требует добавления функциональной логики в редакторе блоков, чтобы понимать и обрабатывать кастомные атрибуты.

Применение

Для внедрения этой функции потребуется следующее:

JavaScript коды редактора блоков: Используйте фильтры и хуки WordPress чтобы добавлять кастомную функциональность. Например, создайте фильтр, который будет проверять значение атрибута status и добавлять соответствующую иконку.
Использование блоковых фильтров: Примените фильтры, такие как wp.data.dispatch, для возможности подключения новых иконок по условию на уровне интерфейса.
Добавление пользовательских стилей: Внесите изменения в стили, чтобы при отображении иконок интерфейс оставался понятным и визуально непротиворечивым.

Примерный код для решения может выглядеть следующим образом:

wp.hooks.addFilter(
    'editor.BlockListBlock',
    'my-plugin/with-custom-icon',
    (BlockListBlock) => (props) => {
        if (props.attributes.status === 'important') {
            return (
                <>
                    <span className="my-custom-icon"></span>
                    <BlockListBlock {...props} />
                </>
            );
        }
        return <BlockListBlock {...props} />;
    }
);

Таким образом, правильная реализация фильтрации и отображения дополнительных элементов управления в редакторе блоков Гутенберг требует знаний JavaScript и понимания структур редактора. Это решение позволит сделать интерфейс более информативным и гибким под ваши задачи.