Редактор Gutenberg в WordPress значительно облегчает создание контента, позволяя работать с блоками. Однако часто при работе с ним возникают проблемы с пустыми блоками, которые могут появляться после копирования и вставки контента, удаления текста или некорректной работы плагинов. Эти пустые блоки не только портят внешний вид страницы, но и могут негативно влиять на производительность и SEO вашего сайта. В этой статье мы подробно рассмотрим, как удалить пустые блоки в Gutenberg, используя как готовые плагины, так и собственные решения на PHP и JavaScript.
Почему появляются пустые блоки в Gutenberg и зачем их удалять
Пустые блоки — это блоки без содержимого, которые не несут смысловой нагрузки, но занимают место в структуре страницы. Они могут появляться по разным причинам:
- Копирование и вставка контента из других редакторов с форматированием, которое Gutenberg не обрабатывает корректно.
- Удаление текста или элементов внутри блоков, оставляющее пустой блок.
- Ошибки в работе сторонних плагинов, которые добавляют или модифицируют блоки.
Удаление пустых блоков важно для:
- Оптимизации HTML-кода страницы, что улучшает скорость загрузки.
- Повышения удобства редактирования контента для пользователей.
- Улучшения индексации страниц поисковыми системами.
Использование плагинов для удаления пустых блоков
Самый простой и безопасный способ — использовать готовые плагины, которые автоматически удаляют пустые блоки или помогают их выявлять. Рассмотрим два популярных варианта.
Плагин Clearfy Pro для оптимизации Gutenberg
Clearfy Pro — мощный инструмент для оптимизации WordPress, который включает функции очистки редактора Gutenberg от пустых и ненужных блоков. После установки и активации плагина в настройках Clearfy активируйте опцию очистки пустых блоков. Плагин будет автоматически удалять пустые блоки при сохранении записи.
Преимущества Clearfy Pro:
- Простая настройка без необходимости писать код.
- Дополнительные инструменты для оптимизации и безопасности сайта.
- Совместимость с большинством тем и плагинов.
Плагин Gutenberg Cleanup
Gutenberg Cleanup — бесплатный плагин, который фокусируется на удалении пустых блоков и минимизации HTML-кода. Он работает автоматически при сохранении поста и удаляет все пустые параграфы и другие блоки.
Для установки:
- Перейдите в админку WordPress раздел «Плагины» → «Добавить новый».
- В строке поиска введите «Gutenberg Cleanup».
- Установите и активируйте плагин.
Плагин не имеет настроек и работает сразу после активации.
Удаление пустых блоков программно: примеры кода для функций темы
Если вы предпочитаете более гибкий и кастомизированный подход, можно добавить код, который будет удалять пустые блоки при сохранении записи. Рассмотрим пример с использованием фильтра '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 чистым и быстрым, улучшая качество контента и удобство работы с ним.