Как отключить стили Gutenberg в WordPress и убрать лишний CSS

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

Проблема возникает на сайтах, где Gutenberg практически не используется. Например, страницы могут быть полностью построены на Elementor, Bricks, WPBakery или собственной теме, а записи редактироваться через Classic Editor. В таком случае часть ресурсов WordPress может оказаться ненужной.

Отключение лишних стилей позволяет уменьшить количество CSS на странице и сделать исходный код немного чище. Но выполнять такую оптимизацию нужно осторожно: некоторые системные стили действительно необходимы блокам WordPress.

Краткий ответ: чтобы отключить стандартные стили Gutenberg на фронтенде WordPress, можно удалить wp-block-library, wp-block-library-theme и при необходимости classic-theme-styles через wp_dequeue_style(). Однако безопаснее сначала проверить, используются ли блоки Gutenberg на сайте. Для смешанных сайтов лучше включить загрузку CSS блоков только по требованию, а не отключать библиотеку полностью.

Какие стили Gutenberg загружает WordPress

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

wp-block-library

Он содержит базовые правила оформления стандартных блоков WordPress.

Кроме него, в зависимости от темы, конфигурации и версии WordPress могут встречаться:

• wp-block-library-theme;
• classic-theme-styles;
• global-styles;
• CSS отдельных блоков;
• inline-стили, сформированные системой Global Styles;
• стили, созданные на основании theme.json.

Сам WordPress использует wp-block-library как общую библиотеку стилей блоков. Если включена раздельная загрузка ресурсов Core-блоков, вместо одного большого файла WordPress может подключать отдельные таблицы стилей только для необходимых блоков.

Поэтому перед оптимизацией важно понимать разницу между двумя подходами:

полностью удалить Gutenberg CSS или оставить Gutenberg, но заставить WordPress загружать стили более избирательно.

В большинстве современных проектов второй вариант безопаснее.

Зачем отключать CSS Gutenberg

Основная причина — оптимизация фронтенда.

Если сайт вообще не использует стандартные блоки WordPress, загрузка CSS для Button, Columns, Gallery, Quote и других блоков не приносит практической пользы.

Удаление ненужных ресурсов потенциально позволяет:

• уменьшить объём загружаемого CSS;
• сократить число запросов;
• уменьшить количество неиспользуемого CSS;
• сделать HTML-код страницы чище;
• немного ускорить обработку CSS браузером;
• улучшить результаты аудита PageSpeed Insights и Lighthouse.

Однако ожидать огромного прироста скорости только от удаления Gutenberg CSS не стоит.

На реальном WordPress-сайте гораздо большее влияние часто оказывают изображения, шрифты, JavaScript, плагины, сторонние виджеты, аналитика, реклама и CSS самого шаблона.

Отключение Gutenberg CSS — это скорее один из этапов комплексной оптимизации.

Способ №1. Полностью отключить основные стили Gutenberg

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

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

function my_remove_gutenberg_block_styles() {
    wp_dequeue_style( 'wp-block-library' );
    wp_dequeue_style( 'wp-block-library-theme' );
}
add_action( 'wp_enqueue_scripts', 'my_remove_gutenberg_block_styles', 100 );

Функция wp_dequeue_style() является стандартной функцией WordPress и предназначена для удаления ранее поставленной в очередь таблицы стилей.

Приоритет 100 используется для того, чтобы функция выполнялась достаточно поздно — после того как WordPress и тема успели добавить соответствующие CSS в очередь.

Куда вставлять код

Есть несколько вариантов:

1. functions.php дочерней темы;
2. собственный небольшой плагин;
3. MU-plugin;
4. специализированный плагин для PHP-сниппетов.

Для постоянной технической оптимизации предпочтительнее собственный плагин или MU-plugin. Тогда изменение темы не приведёт к исчезновению оптимизации.

Не рекомендуется изменять functions.php родительской темы, поскольку изменения могут быть потеряны после её обновления.

Способ №2. Отключить classic-theme-styles.css

Для классических тем WordPress может подключать:

classic-theme-styles

Эти стили появились для обеспечения обратной совместимости некоторых Core-блоков в классических темах.

Если блоки WordPress на фронтенде вообще не используются, файл также можно убрать:

function my_remove_classic_theme_styles() {
wp_dequeue_style( 'classic-theme-styles' );
}
add_action( 'wp_enqueue_scripts', 'my_remove_classic_theme_styles', 100 );

Особенно важно не отключать этот ресурс вслепую.

WordPress использует Classic Theme Styles, в частности, для совместимости блоков Button и File в классических темах. Поэтому после отключения обязательно проверьте внешний вид кнопок и ссылок на файлы.

Способ №3. Объединить отключение стилей в одну функцию

Если Gutenberg на фронтенде не используется вообще, код можно сделать компактнее:

function my_disable_unused_block_css() {

    wp_dequeue_style( 'wp-block-library' );
    wp_dequeue_style( 'wp-block-library-theme' );
    wp_dequeue_style( 'classic-theme-styles' );

}
add_action( 'wp_enqueue_scripts', 'my_disable_unused_block_css', 100 );

Это простой вариант для сайтов, полностью построенных без Core-блоков.

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

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

Способ №4. Загружать CSS Gutenberg только там, где он нужен

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

WordPress умеет разделять CSS стандартных блоков вместо подключения общей библиотеки стилей.

Для этого существует фильтр:

add_filter( 'should_load_separate_core_block_assets', '__return_true' );

При таком режиме Core-блоки могут использовать отдельные таблицы стилей вместо единого wp-block-library.

Это принципиально отличается от полного отключения Gutenberg CSS.

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

Такой подход особенно интересен для сайтов, где Gutenberg используется частично.

Например:

• записи создаются в Gutenberg;
• главная страница сделана в Elementor;
• некоторые посадочные страницы используют Core-блоки;
• остальные страницы построены собственными шаблонами.

Вместо полного удаления CSS можно позволить WordPress загружать ресурсы более избирательно.

Загрузка стилей блоков по требованию в современных версиях WordPress

В современных версиях WordPress механизм оптимизации стал ещё более гибким.

WordPress имеет функцию определения необходимости загрузки ресурсов блоков непосредственно при их использовании. Для управления этим поведением предусмотрен фильтр:

should_load_block_assets_on_demand

Его можно использовать следующим образом:

add_filter( 'should_load_block_assets_on_demand', '__return_true' );

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

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

Важно понимать, что should_load_separate_core_block_assets относится прежде всего к разделению CSS стандартных Core-блоков, тогда как should_load_block_assets_on_demand отвечает за загрузку ресурсов блоков по факту их рендеринга.

Для новых проектов разумно сначала рассмотреть эти механизмы и только затем переходить к агрессивному wp_dequeue_style().

Способ №5. Отключить Global Styles

WordPress может добавлять в страницу стили, связанные с Global Styles.

Их можно увидеть в исходном HTML примерно как:

<style id="global-styles-inline-css">
...
</style>

Если проект вообще не использует эту систему, встречается следующий вариант оптимизации:

function my_remove_global_styles() {
    wp_dequeue_style( 'global-styles' );
}
add_action( 'wp_enqueue_scripts', 'my_remove_global_styles', 100 );

Но здесь требуется значительно больше осторожности.

Global Styles тесно связаны с theme.json, настройками блоков, цветов, типографики, spacing и другими возможностями современных тем WordPress.

Если используется блочная тема или активно применяется theme.json, бездумно отключать Global Styles не следует.

Что делать с SVG-фильтрами Duotone

Gutenberg поддерживает эффект Duotone для изображений. Для его работы WordPress может добавлять SVG-фильтры.

На сайте, который совершенно не использует соответствующие возможности Gutenberg, такой код иногда также удаляют.

Например:

function my_remove_wp_duotone_filters() {
    remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );
    remove_action( 'wp_footer', 'wp_global_styles_render_svg_filters' );
}
add_action( 'wp_enqueue_scripts', 'my_remove_wp_duotone_filters', 100 );

Однако подобные сниппеты особенно важно проверять на актуальной версии WordPress.

Внутренние механизмы Global Styles и Duotone менялись вместе с развитием Gutenberg. Поэтому оптимизацию, найденную несколько лет назад в блоге или на форуме, нельзя автоматически считать универсальной для любой современной версии WordPress.

Нужно ли отключать сам Gutenberg

Нет.

Отключение CSS Gutenberg и отключение редактора Gutenberg — разные операции.

Можно оставить Block Editor в административной панели и оптимизировать только ресурсы фронтенда.

Но если для определённого типа записей Gutenberg действительно не нужен, WordPress позволяет отключить Block Editor отдельно.

Например:

function my_disable_gutenberg_for_post_types( $use_block_editor, $post_type ) {

    $disabled_post_types = array(
        'page',
        'product'
    );

    if ( in_array( $post_type, $disabled_post_types, true ) ) {
        return false;
    }

    return $use_block_editor;
}

add_filter(
    'use_block_editor_for_post_type',
    'my_disable_gutenberg_for_post_types',
    10,
    2
);

Так можно, например, оставить Gutenberg для обычных записей, но отключить его для страниц или определённого Custom Post Type.

Это полезнее, чем глобально отключать редактор, если сайт использует смешанную архитектуру.

Как отключить поиск блоков в Block Directory

Есть ещё одна функция Gutenberg, которая не относится непосредственно к CSS, но может быть лишней.

Block Directory позволяет искать дополнительные блоки непосредственно из редактора WordPress.

Если такая возможность редакторам сайта не нужна, её можно отключить:

function my_disable_block_directory_assets() {
    remove_action(
        'enqueue_block_editor_assets',
        'wp_enqueue_editor_block_directory_assets'
    );
}
add_action( 'init', 'my_disable_block_directory_assets' );

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

Какой вариант выбрать

Выбор зависит от архитектуры сайта.

Главный принцип здесь простой:

не отключайте ресурс только потому, что PageSpeed Insights помечает часть CSS как неиспользуемую. Сначала определите, какой функциональности принадлежит этот CSS.

Почему после удаления wp-block-library может «поехать» дизайн

Рассмотрим типичную ситуацию.

Вы отключили:
wp_dequeue_style( 'wp-block-library' );

Главная страница работает идеально.

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

Причина проста: эта конкретная запись содержит Core-блок.

Например:

<div class="wp-block-columns">

или:

<div class="wp-block-buttons">

CSS был удалён глобально, поэтому HTML блока сохранился, но часть стандартного оформления исчезла.

Именно поэтому выборочная загрузка ресурсов зачастую лучше полного удаления.

Как проверить, используются ли Gutenberg-блоки

Перед изменением functions.php откройте несколько типичных страниц сайта и изучите HTML.

Ищите классы:

wp-block-

Например:

wp-block-image
wp-block-gallery
wp-block-columns
wp-block-button
wp-block-group
wp-block-cover
wp-block-quote

Если они присутствуют, полностью удалять CSS Gutenberg рискованно.

Но одного просмотра главной страницы недостаточно.

Проверить желательно:

• главную;
• обычную страницу;
• запись блога;
• архив;
• результаты поиска;
• страницу товара WooCommerce;
• корзину;
• оформление заказа;
• страницу 404;
• старые публикации.

Особое внимание уделите старому контенту. Сайт мог перейти на Elementor несколько лет назад, но сотни старых записей всё ещё могут содержать Gutenberg-блоки.

Как проверить результат после оптимизации

После добавления кода очистите:

1. кэш WordPress;
2. кэш оптимизирующего плагина;
3. серверный кэш;
4. CDN/Cloudflare;
5. кэш браузера.

Затем откройте Chrome DevTools → Network и выберите фильтр CSS.

Проверьте наличие:

wp-block-library
wp-block-library-theme
classic-theme-styles

Дополнительно откройте исходный код страницы и найдите:

global-styles

Если нужного ресурса больше нет, сниппет сработал.

Но техническая проверка — только половина работы.

После неё необходимо визуально проверить страницы на desktop и mobile.

Что проверить в PageSpeed Insights

До внесения изменений желательно провести тест, сохранить показатели, а затем повторить измерение.

Обращайте внимание прежде всего на:

• First Contentful Paint;
• Largest Contentful Paint;
• Total Blocking Time;
• объём переданного CSS;
• количество запросов;
• рекомендации по сокращению неиспользуемого CSS.

При этом один тест PageSpeed нельзя считать доказательством ускорения.

Результаты Lighthouse могут меняться между запусками. Лучше провести несколько измерений до и после оптимизации и сравнить общую тенденцию.

Почему не стоит копировать старые сниппеты без проверки

Gutenberg развивается очень быстро.

Решение, опубликованное для WordPress 5.x или ранних WordPress 6.x, может быть технически рабочим, но уже не оптимальным.

В частности, WordPress постепенно развивает:

• раздельные CSS Core-блоков;
• загрузку block assets по требованию;
• theme.json;
• Global Styles;
• Style Engine;
• Block Supports API;
• отдельные frontend-ресурсы блоков.

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

Отключение Gutenberg CSS в Elementor, Bricks и других конструкторах

Наличие page builder'а ещё не означает, что wp-block-library можно автоматически удалить.

Например, сайт может использовать Elementor для страниц, но Gutenberg для записей блога.

В таком случае глобальный:

wp_dequeue_style( 'wp-block-library' );

может привести к проблемам именно в статьях.

Более разумная архитектура:

Page Builder → минимум Gutenberg CSS

Gutenberg Posts → необходимые стили блоков

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

Можно ли отключать стили только на определённых страницах

Да. Это часто безопаснее глобального отключения.

Например:

function my_conditional_gutenberg_css_cleanup() {

    if ( is_page_template( 'templates/landing.php' ) ) {
        wp_dequeue_style( 'wp-block-library' );
        wp_dequeue_style( 'wp-block-library-theme' );
        wp_dequeue_style( 'classic-theme-styles' );
    }

}
add_action( 'wp_enqueue_scripts', 'my_conditional_gutenberg_css_cleanup', 100 );

Теперь оптимизация применяется только к конкретному шаблону.

Аналогично можно использовать условия:

is_front_page()
is_home()
is_page()
is_single()
is_singular()
is_post_type_archive()

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

functions.php или отдельный плагин?

Для быстрого теста можно использовать functions.php дочерней темы.

Для рабочего сайта лучше рассмотреть site-specific plugin.

Простейший вариант:

<php
/**
 * Plugin Name: Site Performance Tweaks
 * Description: Custom frontend performance optimizations.
 * Version: 1.0
 */

function site_performance_remove_unused_block_css() {

    wp_dequeue_style( 'wp-block-library' );
    wp_dequeue_style( 'wp-block-library-theme' );
    wp_dequeue_style( 'classic-theme-styles' );

}

add_action(
    'wp_enqueue_scripts',
    'site_performance_remove_unused_block_css',
    100
);

Так оптимизация не зависит от активной темы и не исчезнет при её замене.

Типичные ошибки

1. Удалить все стили сразу

После этого сложно определить, какой именно ресурс вызвал проблему.

Лучше отключать их по одному.

2. Не проверять старые записи

На главной Gutenberg может отсутствовать, а в статьях за последние пять лет — активно использоваться.

3. Отключать Global Styles в block theme

Это может нарушить цвета, размеры, spacing и другие параметры дизайна.

4. Редактировать родительскую тему

После обновления изменения исчезнут.

5. Проверять только desktop

CSS некоторых блоков особенно важен для адаптивного отображения.

6. Ориентироваться исключительно на PageSpeed

Цель оптимизации — ускорить сайт без нарушения функциональности, а не просто получить максимальный балл Lighthouse.

Рекомендуемый алгоритм оптимизации

На практике лучше использовать следующую последовательность.

Шаг 1. Определите, используются ли Gutenberg-блоки на фронтенде.

Шаг 2. Проверьте Network в DevTools и установите, какие CSS действительно загружаются.

Шаг 3. Если Gutenberg нигде не используется — протестируйте полное отключение Block Library CSS.

Шаг 4. Если Gutenberg используется частично — сначала протестируйте separate/on-demand block assets.

Шаг 5. Не удаляйте Global Styles без проверки theme.json и возможностей активной темы.

Шаг 6. Очистите все уровни кэша.

Шаг 7. Проверьте основные шаблоны сайта и старые публикации.

Шаг 8. Проведите несколько тестов производительности до и после изменений.

Такой подход намного надёжнее идеи «удалить весь CSS Gutenberg одной функцией».

Вопросы и ответы

Отключение стилей встроенных блоков Gutenberg может быть полезной частью оптимизации WordPress, особенно для сайтов на Classic Editor, собственных шаблонах или page builder'ах, где Core-блоки вообще не используются.

Самый простой вариант — удалить:

wp-block-library
wp-block-library-theme
classic-theme-styles

через wp_dequeue_style().

Но полное удаление CSS — не всегда лучший современный подход.

Если Gutenberg используется хотя бы на части сайта, правильнее рассмотреть раздельную загрузку Core Block CSS и механизм загрузки ресурсов блоков по требованию. WordPress способен подключать стили гораздо более избирательно, что позволяет одновременно сохранить совместимость Gutenberg и уменьшить объём ненужных ресурсов.

Поэтому оптимальная стратегия выглядит так:

не Gutenberg → отключаем ненужный CSS;

частично Gutenberg → загружаем ресурсы по требованию;

block theme/theme.json → не отключаем Global Styles без детального тестирования.

После любых изменений обязательно очищайте кэш и проверяйте не только главную страницу, но и записи, архивы, мобильную версию, WooCommerce и старый контент.

Источники

1. DoubleNeed — 5 Lightweight Code Snippets to Disable Gutenberg Block CSS & Unused Features.
2. WordPress Developer Resources — wp_dequeue_style().
3. WordPress Developer Resources — wp_should_load_separate_core_block_assets().
4. WordPress Developer Resources — should_load_separate_core_block_assets.
5. WordPress Developer Resources — wp_should_load_block_assets_on_demand().
6. WordPress Developer Resources — should_load_block_assets_on_demand.
7. WordPress Developer Resources — wp_enqueue_block_style().
8. WordPress Block Editor Handbook — Global Settings & Styles (theme.json).
9. WordPress Block Editor Handbook — Styles in the Editor.
10. WordPress.org Documentation — Styles overview.

Алексей Шевченко

редактор wpcafe

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующийся на создании сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/