Автоматическое сохранение контента через AJAX в редакторе Gutenberg WordPress

Редактор Gutenberg в WordPress уже имеет встроенную функцию автосохранения, но иногда требуется реализовать дополнительное или кастомное автоматическое сохранение для специализированных блоков или метаполей. В этой статье мы подробно разберём, как добавить собственное автоматическое сохранение через AJAX в редакторе Gutenberg с использованием REST API WordPress.

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

Стандартное автосохранение в Gutenberg сохраняет весь пост целиком и работает через систему блоков. Однако, если вы работаете с кастомными метаполями, сложными формами или хотите реализовать промежуточное сохранение определённых данных без обновления поста, встроенных возможностей может быть недостаточно.

Например, если у вас есть плагин, который добавляет сложные настройки в редактор, и вы хотите, чтобы они сохранялись независимо и чаще, чем стандартное автосохранение, то кастомная AJAX-логика позволит реализовать это гибко и эффективно.

Кроме того, подобный подход повышает UX, так как данные пользователя будут сохраняться без необходимости ручного клика по кнопке «Обновить».

Использование REST API для обработки AJAX-запросов

В WordPress для взаимодействия с сервером через AJAX в современных реалиях лучше использовать REST API. Это позволяет писать чистый и масштабируемый код с поддержкой nonce для безопасности.

Для начала зарегистрируем новый REST маршрут в вашем плагине или в functions.php темы:

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

function wpid_handle_autosave(WP_REST_Request $request) {
    $post_id = $request->get_param('post_id');
    $content = $request->get_param('content');

    if (!$post_id || !$content) {
        return new WP_Error('invalid_data', 'Отсутствуют обязательные параметры', ['status' => 400]);
    }

    // Обновим поле post_content или метаполе, если нужно
    $post_update = wp_update_post([
        'ID' => $post_id,
        'post_content' => $content,
    ], true);

    if (is_wp_error($post_update)) {
        return $post_update;
    }

    return ['success' => true, 'post_id' => $post_id];
}

В этом примере создаётся маршрут /wpid/v1/autosave, который принимает POST-запрос с параметрами post_id и content, и обновляет содержимое поста.

Клиентская часть: отправка данных AJAX из редактора Gutenberg

Следующим шагом будет написание JavaScript-кода, который будет автоматически отправлять содержимое поста на сервер с помощью fetch API и REST API.

Для подключения скрипта используйте стандартные хуки WordPress:

add_action('enqueue_block_editor_assets', function() {
    wp_enqueue_script('wpid-autosave', plugins_url('autosave.js', __FILE__), ['wp-data', 'wp-edit-post', 'wp-api-fetch', 'wp-element'], '1.0', true);
    wp_localize_script('wpid-autosave', 'wpidAutosave', [
        'nonce' => wp_create_nonce('wp_rest'),
    ]);
});

Пример файла autosave.js:

import { select } from '@wordpress/data';
import apiFetch from '@wordpress/api-fetch';

let timer = null;

function wpidSendAutosave() {
    const postId = select('core/editor').getCurrentPostId();
    const content = select('core/editor').getEditedPostContent();

    apiFetch({
        path: '/wpid/v1/autosave',
        method: 'POST',
        data: {
            post_id: postId,
            content: content
        },
        headers: {
            'X-WP-Nonce': wpidAutosave.nonce
        }
    }).then(response => {
        console.log('Автосохранение успешно', response);
    }).catch(error => {
        console.error('Ошибка автосохранения', error);
    });
}

function wpidSetupAutosave() {
    document.addEventListener('keydown', () => {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            wpidSendAutosave();
        }, 3000); // Отправка через 3 секунды после последнего нажатия клавиши
    });
}

wp.domReady(() => {
    wpidSetupAutosave();
});

В этом скрипте мы слушаем нажатия клавиш в редакторе и спустя 3 секунды после последнего изменения отправляем текущий контент на сервер.

Реализация автосохранения кастомных метаполей

Если вам нужно сохранять не весь контент, а только кастомные метаполя, то код на сервере можно адаптировать следующим образом:

function wpid_handle_autosave(WP_REST_Request $request) {
    $post_id = $request->get_param('post_id');
    $meta_value = $request->get_param('custom_meta');

    if (!$post_id || is_null($meta_value)) {
        return new WP_Error('invalid_data', 'Отсутствуют обязательные параметры', ['status' => 400]);
    }

    update_post_meta($post_id, '_wpid_custom_meta', sanitize_text_field($meta_value));

    return ['success' => true, 'post_id' => $post_id];
}

И на клиенте отправлять в body параметр custom_meta с нужным значением.

Полезные плагины для расширения автосохранения и оптимизации

Если не хочется писать код с нуля, можно обратить внимание на плагины, которые расширяют функционал автосохранения или добавляют улучшенные средства резервного копирования и восстановления:

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

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

Советы по безопасности и производительности

При реализации кастомного автосохранения важно учитывать:

• Используйте wp_create_nonce и проверяйте nonce на сервере для защиты от CSRF.
• Ограничьте права доступа в permission_callback, чтобы только авторизованные пользователи могли сохранять данные.
• Оптимизируйте частоту отправки AJAX-запросов, чтобы не создавать избыточную нагрузку на сервер и не ухудшать пользовательский опыт.
• Валидация и санитизация данных обязательна для предотвращения уязвимостей.

Соблюдение этих правил позволит реализовать надёжное и удобное автосохранение с минимальными затратами ресурсов.