Как отключить AJAX-загрузку в Gutenberg блоках WordPress

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

Что такое AJAX-загрузка в Gutenberg и зачем ее отключать

AJAX (Asynchronous JavaScript and XML) в Gutenberg используется для обновления части контента без перезагрузки страницы. Для блоков, которые получают данные с сервера или выводят динамический контент, AJAX обеспечивает актуальность и интерактивность.

Однако AJAX-загрузка может вызвать следующие проблемы:

• Увеличение времени загрузки из-за дополнительных запросов.
• Конфликты с другими плагинами или скриптами.
• Сложности при кэшировании страниц.

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

Как определить, какие блоки используют AJAX

Первым делом нужно понять, какие блоки на вашем сайте используют AJAX-загрузку. Обычно это блоки с серверным рендерингом (server-side rendered blocks), которые регистрируются в PHP через функцию register_block_type() с параметром render_callback.

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

function wpboot_register_dynamic_block() {
    register_block_type('wpboot/dynamic-block', [
        'render_callback' => 'wpboot_render_dynamic_block',
    ]);
}
add_action('init', 'wpboot_register_dynamic_block');

Если блок использует render_callback, то скорее всего его содержимое подгружается через AJAX в редакторе и/или на фронтенде.

Способы отключения AJAX-загрузки в Gutenberg блоках

1. Отключение AJAX в конкретном блоке через PHP

Чтобы отключить AJAX-загрузку, можно изменить регистрацию блока, убрав render_callback и заменив его на статический контент или на клиентский рендеринг через JavaScript.

Пример функции для замены render_callback на статический вывод:

function wpboot_register_static_block() {
    register_block_type('wpboot/static-block', [
        'render_callback' => null, // отключаем серверный рендеринг
        'editor_script' => 'wpboot-block-script',
    ]);
}
add_action('init', 'wpboot_register_static_block');

Если блок не требует динамического контента, рекомендуется отказаться от render_callback.

2. Отключение AJAX на фронтенде через фильтр

Иногда нужно оставить динамический рендеринг в админке, но отключить AJAX-загрузку на фронтенде. Для этого можно использовать фильтр should_load_separate_core_block_assets или изменять поведение скриптов, отключая их загрузку.

Пример отключения AJAX-загрузки в блоке по условию:

function wpboot_disable_ajax_block_loading( $should_load, $handle ) {
    if ( 'wpboot-dynamic-block-script' === $handle ) {
        return false; // отключаем загрузку AJAX скриптов
    }
    return $should_load;
}
add_filter('should_load_separate_core_block_assets', 'wpboot_disable_ajax_block_loading', 10, 2);

3. Отключение AJAX-загрузки в редакторе через JavaScript

Если проблема с AJAX возникает только в редакторе Gutenberg, можно отключить загрузку динамических блоков через JavaScript, например, отключая fetch-запросы для определенных блоков.

Пример скрипта для отключения AJAX-загрузки блоков в редакторе:

wp.domReady(() => {
    const originalFetch = window.fetch;
    window.fetch = function() {
        const url = arguments[0];
        if (typeof url === 'string' && url.includes('wpboot/dynamic-block')) {
            return Promise.resolve(new Response(''));
        }
        return originalFetch.apply(this, arguments);
    };
});

Пример решения: отключение AJAX-загрузки для блока Expert Review

Плагин Expert Review использует динамический рендеринг в некоторых блоках. Чтобы отключить AJAX-загрузку и вывести блок статически, можно переопределить render_callback следующим образом:

function wpboot_render_expert_review_block_static( $attributes ) {
    // Статический вывод без AJAX
    return '<div class="expert-review-static">'
        . esc_html__('Экспертная оценка:', 'expert-review')
        . '<div>' . esc_html($attributes['rating']) . '</div></div>';
}
add_action('init', function() {
    register_block_type('wpshop/expert-review', [
        'render_callback' => 'wpboot_render_expert_review_block_static',
    ]);
});

Такой подход позволит избежать AJAX-загрузки и ускорить отображение блока на сайте.

Рекомендации по работе с AJAX в Gutenberg блоках

Чтобы грамотно работать с AJAX в Gutenberg, учитывайте следующие моменты:

• Используйте AJAX только для действительно динамического контента, который нельзя сгенерировать сразу.
• Тестируйте блоки с отключенным кэшем, чтобы избежать проблем с устаревшими данными.
• Обрабатывайте ошибки AJAX-запросов, чтобы блок не ломал страницу.
• Проверяйте совместимость с плагинами кэширования и оптимизации.

Если вы используете плагины из WPSHOP, например, Expert Review или другие, изучите их документацию — возможно, в настройках есть опция отключения AJAX или можно переопределить шаблоны блоков.

Заключение

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