Сохранение данных из блочного редактора в базу данных

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

Я разрабатываю плагин для WordPress и ищу способ сохранить данные, введенные в блок, в таблице mySQL. Это всё. Но как можно отправить данные из редактора блоков на серверную сторону? Я spent две недели, ища подходящую технику, но без успеха.

Сценарий прост:

    registerBlockType("bla/quote-block", {   //...
        attributes: { quoteAtt: { type: 'string' } },
        edit: function(props) {
            props.setAttributes( { quoteAtt: getQuote() } );
            // ?? Отправить props.quoteAtt на сервер ??
        }

Я нашел, как использовать AJAX + jQuery + wp_localize_script, но этот метод, по всей видимости, подходит только для отправки данных с фронтенда (например, данных формы). REST API ужасно сложен, и вся документация касается чтения данных постов [мета], а не сохранения данных в таблицу.

Спасибо!

Я нашел решение, используя Ajax с нативным Javascript следующим образом:

// Имя файла send2server.js
const sendToServer = function() {
   /* Подготовьте объект для отправки: ********************************************************************/
   var params = new FormData();
   params.append('action',   'update_sql');                // update_sql реализован на PHP (см. ниже)
   params.append('quoteAtt', props.attributes.quoteAtt);   // Фактические данные

   /* Создайте объект соединения Ajax: ****************************************************************/
   var request = new XMLHttpRequest();
   request.open('POST', ajax_object.ajax_url, true);       // ajax_object.ajax_url определен в PHP (ниже)
   request.send(params);                                   // Отправить запрос на сервер
}

На серверной стороне следующие функции принимают запрос следующим образом:

// Файл plugin.php
function load_ajax_script() {
    wp_enqueue_script(
        'send2server',
        plugins_url( 'send2server.js', __FILE__ ),
        array(),
        filemtime( plugin_dir_path( __FILE__ ) . 'send2server.js' )
    );

    wp_localize_script(                                // сделать ajaxurl доступным для Javascript
        'send2server', 
        'ajax_object', 
        array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) 
    );  
}
add_action('init', 'load_ajax_script');

function update_sql() {                                // Вызывается через request.send()
    $received = $_POST["quoteAtt"];                    // Содержимое quoteAtt
    // ...
}
add_action('wp_ajax_update_sql', 'update_sql');        // 'update_sql' соответствует 'action' в params

Это лучшее решение? Я не знаю, но оно работает.

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

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

Шаг 1: Использование AJAX для передачи данных

Ваш код представляет собой правильный подход к передаче данных с клиента на сервер с использованием AJAX через объект XMLHttpRequest. Давайте подробнее разберем ключевые моменты вашего решения.

Подготовка данных на клиенте

Вы используете FormData, что позволяет легко организовать данные для отправки на сервер:

var params = new FormData();
params.append('action', 'update_sql'); // Задаем действие для обработки на сервере
params.append('quoteAtt', props.attributes.quoteAtt); // Добавляем данные, которые нужно отправить

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

Создание AJAX-соединения

Отправка данных выполняется через объект XMLHttpRequest:

var request = new XMLHttpRequest();
request.open('POST', ajax_object.ajax_url, true); // Открываем соединение
request.send(params); // Отправляем параметры на сервер

Ваш подход имеет следующие преимущества:

  • Простота использования.
  • Отправка данных асинхронно, не блокируя интерфейс пользователя.
  • Легкость интеграции с текущей логикой вашего блока.

Шаг 2: Обработка запроса на сервере

На стороне сервера, ваша функция update_sql() обрабатывает входящие данные и извлекает информацию, полученную из AJAX-запроса:

function update_sql() {
    $received = $_POST["quoteAtt"]; // Получаем данные из запроса
    // Здесь можно выполнить запрос к базе данных для сохранения $received
}
add_action('wp_ajax_update_sql', 'update_sql'); // Регистрация обработчика для AJAX

Не забудьте добавить проверки безопасности при работе с входящими данными. Например, можно использовать check_ajax_referer() для проверки подлинности запроса.

Альтернативные подходы

Хотя ваше решение работает, важно рассмотреть другие подходы, которые могут быть более удобными:

  1. REST API WordPress: Несмотря на то, что документация может показаться сложной, REST API WordPress предлагает мощный и стандартизированный способ взаимодействия с данными. С помощью API можно создавать, читать, обновлять и удалять записи в базе данных. Это может упростить интеграцию с другими сервисами в будущем.

  2. Использование wp_localize_script более активно: Вы можете использовать этот метод для создания нескольких параметров и функций для взаимодействия с вашим плагином, включая строки для обработки ошибок и подтверждения успешной отправки.

  3. Групповая обработка данных: Если у вас есть несколько блоков, вы можете отправлять их данные вместе, что уменьшит количество запросов к серверу и повысит производительность.

Заключение

Ваше решение с использованием AJAX и JavaScript является вполне приемлемым для отправки данных из редактора блоков на сервер в WordPress. Обязательно удостоверяйтесь, что данные обрабатываются безопасно на серверной стороне, и не забывайте о возможности расширения функционала через REST API в будущем.

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

Оцените материал
Добавить комментарий

Капча загружается...