За замовчуванням редактор 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 міститься багато корисного функціоналу. Творіть, пробуйте, придумуйте щось нове!