wpwebsite.ru wordpress WPWebSite

Как удалить пустые блоки в редакторе Gutenberg WordPress

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

Почему появляются пустые блоки в Gutenberg и зачем их удалять

Пустые блоки — это блоки без содержимого, которые не несут смысловой нагрузки, но занимают место в структуре страницы. Они могут появляться по разным причинам:

  • Копирование и вставка контента из других редакторов с форматированием, которое Gutenberg не обрабатывает корректно.
  • Удаление текста или элементов внутри блоков, оставляющее пустой блок.
  • Ошибки в работе сторонних плагинов, которые добавляют или модифицируют блоки.

Удаление пустых блоков важно для:

  • Оптимизации HTML-кода страницы, что улучшает скорость загрузки.
  • Повышения удобства редактирования контента для пользователей.
  • Улучшения индексации страниц поисковыми системами.

Использование плагинов для удаления пустых блоков

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

Плагин Clearfy Pro для оптимизации Gutenberg

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

Преимущества Clearfy Pro:

  • Простая настройка без необходимости писать код.
  • Дополнительные инструменты для оптимизации и безопасности сайта.
  • Совместимость с большинством тем и плагинов.

Плагин Gutenberg Cleanup

Gutenberg Cleanup — бесплатный плагин, который фокусируется на удалении пустых блоков и минимизации HTML-кода. Он работает автоматически при сохранении поста и удаляет все пустые параграфы и другие блоки.

Для установки:

  1. Перейдите в админку WordPress раздел «Плагины» → «Добавить новый».
  2. В строке поиска введите «Gutenberg Cleanup».
  3. Установите и активируйте плагин.

Плагин не имеет настроек и работает сразу после активации.

Удаление пустых блоков программно: примеры кода для функций темы

Если вы предпочитаете более гибкий и кастомизированный подход, можно добавить код, который будет удалять пустые блоки при сохранении записи. Рассмотрим пример с использованием фильтра 'wp_insert_post_data'.

PHP-функция для очистки контента от пустых блоков

Добавьте следующий код в файл functions.php вашей активной темы или в кастомный плагин:

function wpwebsite_remove_empty_gutenberg_blocks($data, $postarr) {
    if ($data['post_type'] !== 'post' && $data['post_type'] !== 'page') {
        return $data;
    }
    // Разбор содержимого на блоки
    $blocks = parse_blocks($data['post_content']);
    // Функция для фильтрации пустых блоков
    $filter_empty_blocks = function($block) use (&$filter_empty_blocks) {
        // Если блок пустой, пропускаем его
        if (empty(trim(strip_tags(render_block($block))))) {
            return false;
        }
        // Если блок содержит вложенные блоки, рекурсивно фильтруем их
        if (!empty($block['innerBlocks'])) {
            $block['innerBlocks'] = array_filter($block['innerBlocks'], $filter_empty_blocks);
        }
        return true;
    };
    $filtered_blocks = array_filter($blocks, $filter_empty_blocks);
    // Восстановление контента из отфильтрованных блоков
    $data['post_content'] = serialize_blocks($filtered_blocks);
    return $data;
}
add_filter('wp_insert_post_data', 'wpwebsite_remove_empty_gutenberg_blocks', 10, 2);

Что делает этот код:

  • При сохранении поста или страницы он разбирает содержимое на блоки.
  • Удаляет все блоки, которые после рендеринга оказываются пустыми (без текста и HTML).
  • Рекурсивно очищает вложенные блоки.
  • Обновляет содержимое записи без пустых блоков.

Этот подход позволяет поддерживать контент в чистоте без лишних блоков.

JavaScript-решение для удаления пустых блоков в редакторе Gutenberg

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

wp.domReady(() => {
    const { select, dispatch } = wp.data;
    const blocks = select('core/block-editor').getBlocks();
    blocks.forEach(block => {
        const content = wp.blocks.getBlockContent(block);
        if (!content || content.trim() === '') {
            dispatch('core/block-editor').removeBlock(block.clientId);
        }
    });
});

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

Рекомендации по работе с пустыми блоками и оптимизация контента

Удаление пустых блоков — важный шаг, но помимо этого стоит обратить внимание на следующие моменты:

  • Регулярно проверяйте контент на наличие избыточных блоков, особенно после импорта или массового редактирования.
  • Используйте плагины оптимизации, например, Clearfy Pro, который помогает поддерживать структуру сайта в порядке.
  • Обучите редакторов правильно работать с блоками, чтобы минимизировать появление пустых элементов.
  • Тестируйте совместимость плагинов с Gutenberg, чтобы избежать ошибок при добавлении и удалении блоков.

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

×
WPShop
партнерка без «но»!

До 3225₽ за каждую продажу

Подключиться к игре