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

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

Почему важно автоматическое сохранение блоков Gutenberg

Редактор Gutenberg — современный подход к созданию контента в WordPress, где каждый элемент — это отдельный блок. Несмотря на удобство, иногда пользователи теряют данные, если забывают сохранить пост или происходит сбой. Автоматическое сохранение блоков позволяет:

• Минимизировать риск потери данных.
• Обеспечить мгновенную обратную связь и сохранение изменений.
• Позволить частично сохранять контент для сложных или динамических блоков.

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

Создание кастомного блока с поддержкой автосохранения

Для начала создадим простой кастомный блок, который будет автоматически сохранять своё содержимое через AJAX при изменении. Используем JavaScript API Gutenberg и REST API WordPress.

Регистрация блока и скрипта

В файле functions.php или отдельном плагине зарегистрируем скрипт и блок:

add_action('init', 'wptavern_register_autosave_block');
function wptavern_register_autosave_block() {
    wp_register_script(
        'wptavern-autosave-block',
        plugins_url('autosave-block.js', __FILE__),
        array('wp-blocks', 'wp-element', 'wp-editor', 'wp-components', 'wp-data'),
        filemtime(plugin_dir_path(__FILE__) . 'autosave-block.js')
    );

    register_block_type('wptavern/autosave-block', [
        'editor_script' => 'wptavern-autosave-block',
        'render_callback' => 'wptavern_autosave_block_render',
        'attributes' => [
            'content' => [
                'type' => 'string',
                'default' => '',
            ],
        ],
    ]);
}

function wptavern_autosave_block_render($attributes) {
    return '<div class="wptavern-autosave-block">' . esc_html($attributes['content']) . '</div>';
}

JavaScript: логика автосохранения

В файле autosave-block.js реализуем:

• Отслеживание изменения содержимого блока.
• Отправку AJAX-запроса на сервер с новой версией содержимого.
• Обработку ответа и уведомление пользователя.

const { registerBlockType } = wp.blocks;
const { TextControl } = wp.components;
const { useState, useEffect } = wp.element;
const { useSelect, useDispatch } = wp.data;

registerBlockType('wptavern/autosave-block', {
    title: 'Автосохраняемый блок',
    icon: 'update',
    category: 'common',
    attributes: {
        content: { type: 'string', default: '' },
    },

    edit({ attributes, setAttributes }) {
        const { content } = attributes;
        const [saving, setSaving] = useState(false);
        const [message, setMessage] = useState('');

        // Функция для автосохранения
        const autosaveContent = (value) => {
            setSaving(true);
            wp.apiRequest({
                path: '/wptavern/v1/autosave',
                method: 'POST',
                data: { content: value },
            })
                .then(() => {
                    setSaving(false);
                    setMessage('Сохранено автоматически');
                    setTimeout(() => setMessage(''), 2000);
                })
                .catch(() => {
                    setSaving(false);
                    setMessage('Ошибка сохранения');
                });
        };

        // Отслеживаем изменения в поле
        const onChangeContent = (value) => {
            setAttributes({ content: value });
            autosaveContent(value);
        };

        return (
            wp.element.createElement('div', null,
                wp.element.createElement(TextControl, {
                    label: 'Текст блока',
                    value: content,
                    onChange: onChangeContent,
                }),
                saving && wp.element.createElement('div', { style: { color: 'blue' } }, 'Сохраняем...'),
                message && wp.element.createElement('div', { style: { color: 'green' } }, message)
            )
        );
    },

    save() {
        return null; // Рендерим на сервере
    },
});

Создание REST API эндпоинта для сохранения

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

add_action('rest_api_init', function () {
    register_rest_route('wptavern/v1', '/autosave', [
        'methods' => 'POST',
        'callback' => 'wptavern_autosave_rest_callback',
        'permission_callback' => function () {
            return current_user_can('edit_posts');
        },
    ]);
});

function wptavern_autosave_rest_callback(WP_REST_Request $request) {
    $content = sanitize_text_field($request->get_param('content'));
    $user_id = get_current_user_id();

    if (!$user_id) {
        return new WP_Error('no_user', 'Пользователь не авторизован', ['status' => 403]);
    }

    // Сохраняем контент как user meta для примера
    update_user_meta($user_id, 'wptavern_autosave_block_content', $content);

    return ['success' => true];
}

Дополнительные рекомендации и улучшения

Автоматическое сохранение можно значительно улучшить:

• Добавить debounce, чтобы не отправлять запрос при каждом вводе, а через определённый интервал.
• Сохранять данные в пост мета, если блок привязан к конкретному посту.
• Использовать nonce для безопасности AJAX-запросов.
• Реализовать восстановление данных из автосохранения при загрузке редактора.

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

Заключение

Автоматическое сохранение блоков Gutenberg — практичное решение для повышения надёжности и удобства работы с редактором. С помощью простого REST API и JavaScript можно реализовать кастомные сценарии автосохранения, которые подойдут под любые задачи. Такой подход минимизирует риск потери данных и улучшает опыт пользователей, особенно при работе с большими и сложными блоками.