Как создать блок с встроенным отладчиком в Gutenberg WordPress

Разработка блоков для Gutenberg в WordPress требует тщательного тестирования и отладки, особенно когда блоки становятся сложными и динамическими. В этой статье мы рассмотрим, как создать собственный Gutenberg блок с встроенным отладчиком, который поможет вам оперативно видеть внутренние состояния, параметры и работу блоков прямо в редакторе, без необходимости постоянной проверки консоли браузера или лога PHP.

Зачем нужен встроенный отладчик в Gutenberg блоке

Когда блоки содержат сложную логику, взаимодействие с REST API, динамическое состояние или пользовательские настройки, обычные методы отладки становятся неудобными. Встроенный отладчик позволяет:

• Отображать текущие значения props и состояния блока прямо в интерфейсе редактора;
• Быстро выявлять ошибки и некорректные данные без переключения на консоль браузера;
• Экономить время при тестировании и доработке блоков;
• Делать разработку более прозрачной и понятной, особенно в команде.

Рассмотрим, как это реализовать на примере простого блока с React и WordPress API.

Создание базового Gutenberg блока с отладочной панелью

Для начала создадим стандартный блок с использованием @wordpress/scripts и React. Мы добавим в интерфейс блоков панель с отладочной информацией — это может быть JSON с текущими атрибутами и состояниями.

Пример кода регистрации блока:

import { registerBlockType } from '@wordpress/blocks';
import { useState } from '@wordpress/element';
import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, TextControl } from '@wordpress/components';

registerBlockType('wpblock/debuggable-block', {
    title: 'Блок с отладчиком',
    icon: 'admin-tools',
    category: 'common',
    attributes: {
        content: {
            type: 'string',
            default: '',
        },
    },
    edit: (props) => {
        const { attributes, setAttributes } = props;
        const [debugOpen, setDebugOpen] = useState(false);

        // Функция для обновления контента
        const onChangeContent = (value) => {
            setAttributes({ content: value });
        };

        return (
            <>
                <InspectorControls>
                    <PanelBody title="Отладчик блока" initialOpen={false}>
                        <TextControl
                            label="Текущий контент"
                            value={attributes.content}
                            onChange={onChangeContent}
                        />
                        <button type="button" onClick={() => setDebugOpen(!debugOpen)}>
                            {debugOpen ? 'Скрыть отладчик' : 'Показать отладчик'}
                        </button>
                        {debugOpen && (
                            <pre style={{ whiteSpace: 'pre-wrap', marginTop: '10px' }}>
                                {JSON.stringify(attributes, null, 2)}
                            </pre>
                        )}
                    </PanelBody>
                </InspectorControls>
                <div>
                    <p>{attributes.content || 'Введите текст в настройках блока'}</p>
                </div>
            </>
        );
    },
    save: (props) => {
        return <p>{props.attributes.content}</p>;
    },
});

В этом примере мы сделали следующее:

• Добавили боковую панель с настройками блока через InspectorControls;
• Добавили кнопку для показа и скрытия отладочной информации;
• Отображаем текущие атрибуты блока в формате JSON;
• Позволяем редактировать основной текст блока через панель настроек.

Это уже дает удобный механизм для отладки, который легко расширять и кастомизировать.

Расширение отладчика: вывод состояния и внешних данных

Часто нужно не только видеть атрибуты, но и внутреннее состояние компонента или данные из API. Добавим в блок дополнительное состояние и имитацию загрузки данных, чтобы отладчик показывал их тоже.

import { useEffect } from '@wordpress/element';

// Внутри функции edit
const [externalData, setExternalData] = useState(null);
const [loading, setLoading] = useState(false);

useEffect(() => {
    setLoading(true);
    // Симуляция запроса к API
    setTimeout(() => {
        setExternalData({ time: new Date().toLocaleTimeString(), info: 'Данные загружены' });
        setLoading(false);
    }, 1500);
}, []);

// В JSX блока внутри отладчика
{debugOpen && (
    <pre style={{ whiteSpace: 'pre-wrap', marginTop: '10px' }}>
        {JSON.stringify({ attributes, externalData, loading }, null, 2)}
    </pre>
)}

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

Практические советы и рекомендации

1. Используйте условный рендеринг для отладчика

Отладочную панель лучше показывать только при необходимости, чтобы не загромождать интерфейс. Для этого добавьте кнопку переключения и храните состояние видимости отладчика.

2. Форматируйте вывод JSON

Для удобства чтения используйте JSON.stringify с отступами и <pre> для сохранения форматирования.

3. Логируйте ошибки в отладчик

Добавьте перехват ошибок в блок и отображайте их в отладочной панели — это ускорит поиск багов.

4. Интеграция с плагинами

Если вы используете плагины как Clearfy Pro для оптимизации или WPGPT для AI-ассистирования, можно расширить блоки с отладкой, например, выводить данные от этих сервисов в отладчик.

Где использовать такие блоки с отладчиком

Встроенные отладчики полезны для:

• Сложных кастомных блоков с динамическим контентом;
• Блоков, работающих с REST API и внешними сервисами;
• Обучения и демонстраций разработки блоков;
• Работы в командах для облегчения коммуникации разработчиков.

Подобный подход значительно упрощает процесс разработки и поддержки Gutenberg блоков.

Заключение: практическая реализация и ссылки

Создание Gutenberg блока с встроенным отладчиком — простое, но мощное решение для улучшения процесса разработки. Вы можете использовать приведенный пример как шаблон и расширять его под свои задачи.

Если хотите автоматизировать проверку и оптимизацию вашего WordPress сайта, рекомендую обратить внимание на Clearfy Pro — плагин для оптимизации и безопасности.

Для удобного создания Gutenberg блоков и визуальных редакторов можно посмотреть WPVisual Editor — инструмент для ускорения разработки.