По умолчанию редактор 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
