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

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

Почему появляются пустые блоки в Gutenberg: причины и последствия

Пустые блоки в Gutenberg могут появляться по разным причинам:

• Автоматическое добавление пустых параграфов для разделения контента.
• Импорт контента из других редакторов с некорректным форматированием.
• Ошибки в кастомных блоках или плагинах, которые создают блоки без содержимого.
• Удаление содержимого из блоков без их удаления.

Такие пустые блоки не только визуально портят страницу, но и могут замедлять загрузку, создавать лишние запросы и мешать SEO-оптимизации. Поэтому важно уметь их эффективно обнаруживать и удалять.

Как обнаружить пустые блоки в Gutenberg: проверка и диагностика

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

Просмотр кода блока в редакторе

В Gutenberg можно переключиться на режим просмотра кода блока и проверить, нет ли там пустых тегов. Для этого:

1. Выберите интересующий блок.
2. Нажмите на меню блока (три точки).
3. Выберите «Редактировать как HTML».
4. Проверьте, пустой ли блок.

Использование фильтрации блоков через JavaScript

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

function wpblock_checkEmptyBlocks() {
    const blocks = wp.data.select('core/block-editor').getBlocks();
    blocks.forEach(block => {
        if (!block.innerHTML || block.innerHTML.trim() === '') {
            console.log('Пустой блок:', block.name, block.clientId);
        }
    });
}

wpblock_checkEmptyBlocks();

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

Удаление пустых блоков: ручные и автоматические методы

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

Ручное удаление в редакторе Gutenberg

Самый простой способ — выделить пустой блок и нажать кнопку удаления (Delete или Backspace). Но если блоков много, это неудобно.

Автоматическое удаление с помощью фильтров PHP

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

add_filter('wpblock_filter_remove_empty_blocks', 'wpblock_remove_empty_blocks_callback');
function wpblock_remove_empty_blocks_callback($content) {
    if (empty($content)) {
        return $content;
    }

    // Разбор блоков в массив
    $blocks = parse_blocks($content);
    $filtered_blocks = array_filter($blocks, function($block) {
        // Проверяем, что блок не пустой
        return isset($block['innerHTML']) && trim(strip_tags($block['innerHTML'])) !== '';
    });

    // Реконструируем контент
    $new_content = '';
    foreach ($filtered_blocks as $block) {
        $new_content .= serialize_block($block);
    }

    return $new_content;
}

add_filter('content_save_pre', 'wpblock_remove_empty_blocks_callback');

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

Использование плагинов для очистки контента

Есть плагины, которые помогают оптимизировать содержимое, например, Clearfy Pro. Он может очищать пустые теги и блоки, а также оптимизировать вывод Gutenberg.

Подробнее о Clearfy Pro можно узнать на официальной странице.

Примеры кастомных решений и оптимизация работы с Gutenberg

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

Фильтрация блоков на фронтенде

Иногда пустые блоки появляются в выводе, даже если в админке они скрыты. Чтобы очистить вывод, можно использовать фильтр the_content:

add_filter('the_content', 'wpblock_filter_empty_blocks_frontend');
function wpblock_filter_empty_blocks_frontend($content) {
    $blocks = parse_blocks($content);
    $filtered_blocks = array_filter($blocks, function($block) {
        return isset($block['innerHTML']) && trim(strip_tags($block['innerHTML'])) !== '';
    });

    $new_content = '';
    foreach ($filtered_blocks as $block) {
        $new_content .= serialize_block($block);
    }

    return $new_content;
}

Добавление предупреждений в редакторе

Для улучшения UX можно добавить предупреждения в редактор, если пользователь создает пустой блок. Это можно реализовать через JavaScript в редакторе с использованием хуков Gutenberg.

wp.data.subscribe(() => {
    const blocks = wp.data.select('core/block-editor').getBlocks();
    blocks.forEach(block => {
        if (!block.innerHTML || block.innerHTML.trim() === '') {
            console.warn('Пустой блок обнаружен:', block.clientId);
            // Здесь можно добавить кастомное уведомление для пользователя
        }
    });
});

Заключение: почему важно контролировать пустые блоки в WordPress

Удаление пустых блоков — важный аспект поддержания чистоты и эффективности сайта на WordPress. Это улучшает пользовательский опыт, ускоряет загрузку страниц и положительно влияет на SEO. Используйте приведённые методы и примеры, чтобы автоматизировать этот процесс и избежать проблем с лишними пустыми блоками в Gutenberg.