Как отключить стили Gutenberg во фронтэнде

По умолчанию редактор Gutenberg загружает свои CSS-стили/таблицы стилей во фронтэнде вашего WordPress-сайта. В большинстве случаев это не создает никаких проблем, однако могут возникнуть ситуации, когда вам необходимо отключить стили Gutenberg. К примеру, есть бесплатный плагин Disable Gutenberg, который позволяет деактивировать блочный редактор и восстановить классический редактор. В настройках плагина имеется опция Enable Frontend, которая позволяет включать или отключать CSS-стили Gutenberg. В этом руководстве мы покажем, как отключить стили Gutenberg во фронтэнде.

Примечание: плагин Disable Gutenberg позволяет также восстановить классические виджеты.

Зачем это нужно

Одна из причин, почему пользователи могут пожелать отключить посторонние/ненужные CSS-стили – повышение производительности сайта. Отключив CSS-таблицы Gutenberg, когда они не требуются, вы получите на один загружаемый ресурс меньше при каждом запросе страницы. Это может иметь огромное совокупное влияние на производительность вашего WordPress-сайта.

К вашему сведению, стилевая таблица Gutenberg по умолчанию выглядит так:

<link rel='stylesheet' id='wp-block-library-css'  href='https://example.com/wp-includes/css/dist/block-library/style.min.css' type='text/css' media='all' />

Теперь вы знаете, как ее найти.

Отключаем стили Gutenberg во фронтэнде

Не будем ударяться в писанину, просто сразу же дадим вам требуемый фрагмент кода, который можно вставить на свой WordPress-сайт. Добавить этот код можно как с помощью плагина Code Snippets, так и напрямую через functions.php вашей темы (родительской или дочерней). Код такой:

// disable gutenberg frontend styles @ https://m0n.co/15
function disable_gutenberg_wp_enqueue_scripts() {
	
	wp_dequeue_style('wp-block-library');
	wp_dequeue_style('wp-block-library-theme');
	
}
add_filter('wp_enqueue_scripts', 'disable_gutenberg_wp_enqueue_scripts', 100);

Этот скрипт отключает стандартную таблицу стилей Gutenberg wp-block-library, а также отключает таблицу wp-block-library-theme (если она есть, что зависит от темы). Все предельно просто и понятно.

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

Бонус: отключаем другие стилевые таблицы блоков

Любую таблицу стилей WordPress можно отключить с помощью функции wp_dequeue_style(). К примеру, если вы используете WooCommerce и тему Storefront, вы можете запретить загрузку связанных с ними блочных стилей и таблиц:

// disable gutenberg frontend styles @ https://m0n.co/15
function disable_gutenberg_wp_enqueue_scripts() {
	
	wp_dequeue_style('wp-block-library');
	wp_dequeue_style('wp-block-library-theme');
	
	wp_dequeue_style('wc-block-style'); // disable woocommerce frontend block styles
	wp_dequeue_style('storefront-gutenberg-blocks'); // disable storefront frontend block styles
	
}
add_filter('wp_enqueue_scripts', 'disable_gutenberg_wp_enqueue_scripts', 100);

Здесь всю работу берет на себя функция wp_dequeue_style(). Она очень эффективна и может применяться для отключения любой таблицы стилей, зарегистрированной в WP. Дополнительные сведения можно узнать из документации на wordpress.org.

И на посошок…

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

Вот реальный пример, показывающий, как Disable Gutenberg отключает фронтэнд-стили в зависимости от пользовательских предпочтений в настройках плагина:

// disable gutenberg frontend styles @ https://m0n.co/15
function disable_gutenberg_wp_enqueue_scripts() {
	
	global $wp_query;
	
	if (is_admin()) return;
	
	$post_id = isset($wp_query->post->ID) ? $wp_query->post->ID : null;
	
	$options = get_option('disable_gutenberg_options');
	
	$enable = isset($options['styles-enable']) ? $options['styles-enable'] : false;
	
	if (!$enable && !disable_gutenberg_whitelist($post_id)) {
		
		wp_dequeue_style('wp-block-library');
		wp_dequeue_style('wp-block-library-theme');
		
	}
	
}
add_filter('wp_enqueue_scripts', 'disable_gutenberg_wp_enqueue_scripts', 100);

Опять же, это просто пример, взятый из плагина. Можно сделать гораздо больше, так как в ядре WordPress содержится много полезного функционала. Творите, пробуйте, придумывайте что-то новое!

Источник: https://digwp.com