Как отключить CSS и JS файлы Gutenberg подключаемые в WordPress

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

Отключение CSS стилей редактора блоков Gutenberg

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

Отключение основного файла CSS Gutenberg

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

function disable_gutenberg_css() {
    wp_dequeue_style( 'wp-block-library' ); // Отключение основного файла CSS
}
add_action( 'wp_enqueue_scripts', 'disable_gutenberg_css', 100 );

Выключение дополнительного CSS файла Gutenberg для темы:

function disable_gutenberg_theme_css() {
    wp_dequeue_style( 'wp-block-library-theme' ); // Отключение дополнительного файла CSS
}
add_action( 'wp_enqueue_scripts', 'disable_gutenberg_theme_css', 100 );

После добавления кода выполнится (когда хук wp_enqueue_scripts срабатывает с приоритетом 100), соответствующие стили Gutenberg не будут загружаться на фронтенде сайта, это может ускорить время загрузки страниц и помочь избежать конфликтов со стилями вашей темы, если вы используете свои собственные стили для блоков.

Отключение JavaScript файлов gutenberg

В Gutenberg также используются JavaScript файлы. Если они вам не нужны, их тоже можно отключить:

function disable_gutenberg_js() {
    wp_dequeue_script( 'wp-block-library' ); // Пример отключения JS файла
}
add_action( 'wp_enqueue_scripts', 'disable_gutenberg_js', 100 );

Проверка зависимостей

Перед отключением CSS или JS файлов убедитесь, что это не повлияет на функциональность вашего сайта. Например, если вы используете стандартные редактор Gutenberg, отключение CSS может нарушить стилизацию всех блоков. Если же не используете данный рекдактор, то можете смело все отключать.

Полный код для отключения всех стилей и скриптов Gutenberg в WordPress

Вот полный совмещенный код, который отключает все скрипты и стили, добавьте этот код в конец файла function.php в вашей теме в самый низ страницы:

function disable_gutenberg_assets() {
    // Отключение основного файла CSS Gutenberg
    wp_dequeue_style( 'wp-block-library' );
    
    // Отключение дополнительного файла CSS Gutenberg для темы
    wp_dequeue_style( 'wp-block-library-theme' );
    
    // Отключение JavaScript файлов Gutenberg
    wp_dequeue_script( 'wp-block-library' );
}

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

Финалочка

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