Як відключити стилі редактора Gutenberg на сайті

За замовчуванням редактор блоків Gutenberg завантажує свій CSS на фронт-частині вашого WordPress сайту. У багатьох випадках це потрібно, адже ви використовуєте Gutenberg для написання статей, відповідно вони мають бути коректно стилізовані. Але бувають ситуації, коли вам потрібно вимкнути стилі. 

Нещодавно ми вже писали про плагін для WordPress Disable Gutenberg , що дає змогу користувачам вимкнути Gutenberg та активувати класичний редактор. У налаштуваннях плагіна додано нещодавно опцію, яка дозволяє користувачам увімкнути або вимкнути  CSS-стилі від Gutenberg за потреби. 

Що як ви не користуєтесь цим плагіном – тоді ми покажемо, як вимкнути описані стилі програмно (без плагіна).

Як зробити?

Ось невеличкий фрагмент коду, який можна додати до свого сайту WordPress, що магічним способом зробить те, що вам потрібно. Ви можете додати цей код у файл functions.php в вашій темі (не забувайте робити бекап):

// вимикаємо стилі gutenberg на frontend 
function wpcoua_disable_gutenberg_styles() {
	
	wp_dequeue_style('wp-block-library');
	wp_dequeue_style('wp-block-library-theme');
	
}
add_filter('wp_enqueue_scripts', 'wpcoua_disable_gutenberg_styles', 100);Code language: PHP (php)

Чому це потрібно

Однією з причин, чому ви можете схотіти видалити зайві/непотрібні CSS-стилі – це покращення “швидкості” сайту , що вимірюється зокрема Google PageSpeed Insights. 

Якщо вимкнути CSS від Gutenberg (за умови, що він вам не потрібен) – під час завантаження сайту браузеру буде потрібно завантажити та обробити на один файл менше для кожної сторінки. Це може мати великий ефект в певних випадках.

Коли стилі гутенберг підключені на сайті – це виглядає так у вихідному коді сторінок:

<link rel='stylesheet' id='wp-block-library-css'  href='https://domain.com/wp-includes/css/dist/block-library/style.min.css' type='text/css' media='all' />Code language: HTML, XML (xml)