删除古腾堡 CSS

Question

我在 WordPress v4.9.8 中安装了 Gutenberg 插件，并正在尝试删除它附带的 CSS，以便我可以提供自己的 CSS。

这是包含在内的工作表：

<link rel='stylesheet' id='wp-block-library-css'  href='/wp-content/plugins/gutenberg/build/block-library/style.css?ver=1535795173' type='text/css' media='all' />

我尝试了以下方法：

add_action( 'wp_print_styles', 'wps_deregister_styles', 100 );
function wps_deregister_styles() {
    wp_dequeue_style( 'wp-block-library-css' );
    wp_deregister_style( 'wp-block-library-css' );
}

以及这个的变体，但文件仍然存在。如何删除它？

Answer 1

我将此添加为比我的评论更完整的答案：

在尝试使脚本出队时，您需要删除 -css。它被添加到 HTML 标记中，而不是 css 文件的实际标记中。

如果您搜索代码（随着 Gutenberg 进入核心，队列的位置可能会发生变化），您可以找到：

wp_enqueue_style( 'wp-block-library' );

如您所见，没有-css。此解决方案可能适用于人们无法将样式出队的其他插件。

编辑： 由于这仍然有一些吸引力，这里是处理它的代码：

add_action( 'wp_print_styles', 'wps_deregister_styles', 100 );
function wps_deregister_styles() {
    wp_dequeue_style( 'wp-block-library' );
}

Answer 2

我正在使用此代码来删除默认样式。

//Disable gutenberg style in Front
function wps_deregister_styles() {
    wp_dequeue_style( 'wp-block-library' );
}
add_action( 'wp_print_styles', 'wps_deregister_styles', 100 );

Answer 3

我使用 Wordpress 5.1。尝试了最受好评的答案，但它们对我不起作用，'wp_enqueue_scripts' 而不是 'wp_print_styles' 可以解决问题。

这是我在不加载臃肿样式表的情况下摆脱 Gutenberg 的整个 WordPress 5.1 解决方案：

// Disable Gutenberg editor.
add_filter('use_block_editor_for_post_type', '__return_false', 10);
// Don't load Gutenberg-related stylesheets.
add_action( 'wp_enqueue_scripts', 'remove_block_css', 100 );
function remove_block_css() {
    wp_dequeue_style( 'wp-block-library' ); // Wordpress core
    wp_dequeue_style( 'wp-block-library-theme' ); // Wordpress core
    wp_dequeue_style( 'wc-block-style' ); // WooCommerce
    wp_dequeue_style( 'storefront-gutenberg-blocks' ); // Storefront theme
}

编辑：

它也适用于 WordPress 5.2，因为它处理由 WooCommerce 和 Storefront 主题添加的样式表，所以我在我的新插件中做了以下设置：

https://wordpress.org/plugins/extra-settings-for-woocommerce/

Answer 4

将以下代码粘贴到您的 functions.php 文件中

function custom_theme_assets() {
wp_dequeue_style( 'wp-block-library' );
}
add_action( 'wp_enqueue_scripts', 'custom_theme_assets', 100 );

如果对你有帮助，请点赞。

Answer 5

由于 wp_dequeue_style-approach 无法禁用 wp-editor-font (wp-editor-font-css)，我使用了以下代码：

function my_remove_gutenberg_styles($translation, $text, $context, $domain)
{
    if($context != 'Google Font Name and Variants' || $text != 'Noto Serif:400,400i,700,700i') {
        return $translation;
    }
    return 'off';
}
add_filter( 'gettext_with_context', 'my_remove_gutenberg_styles',10, 4);

另见https://github.com/dimadin/disable-google-fonts/blob/master/disable-google-fonts.php

Answer 6

在 2021 年，我尝试了上述大多数方法的变体，但都失败了。查看 WordPress 代码，我相信原因是 Gutenberg 样式不再排队。我发现删除它的唯一方法是在打印之前将其删除。

// This is what works for me.
add_action( 'wp_print_styles', 'wps_deregister_styles', 9999 );
    
function wps_deregister_styles() {
    global $wp_styles;
    $wp_styles->remove('wp-block-library');
}

Answer 7

这并不能真正回答问题，但我怀疑像我这样的其他人最终在这里试图解决这个问题所暗示但未解决的问题：how do you remove the inline (WP 5.5+) storefront-gutenberg-blocks-inline-css so you can use the editor even though it's using white on white or black on black in the storefront theme?

以下将做到这一点。把它放在你的functions.php文件或插件中。

function clean_storefront_gutenberg_block_editor_customizer_css( $string ) {
  // return empty so the editor doesn't suck
  return '';
}
add_filter( 'storefront_gutenberg_block_editor_customizer_css', 'clean_storefront_gutenberg_block_editor_customizer_css' );

这只是消除了生成的 CSS，因此后端编辑器没有附加任何内容。前端保持不变。

Answer 8

从前端加载中删除 Gutenberg 块库 CSS

function smartwp_remove_wp_block_library_css()
{
    wp_dequeue_style('wp-block-library');
    wp_dequeue_style('wp-block-library-theme');
    wp_dequeue_style('wc-block-style'); // Remove WooCommerce block CSS
}
add_action('wp_enqueue_scripts', 'smartwp_remove_wp_block_library_css', 999);

Answer 9

以上答案均未删除所有样式在块编辑器中，以下对我有用：

  add_action( 'admin_print_styles', function() {
    global $wp_styles;
    $stylesToRemove = ["wp-reset-editor-styles", "wp-format-library", "wp-block-library", "wp-block-library-theme", "wp-block-directory", "wp-edit-blocks"];
    foreach ($stylesToRemove as $styleToRemove) {
      foreach ($wp_styles->registered as $style) {
        $dep = array_search($styleToRemove, $style->deps);
        if ($dep !== false) {
          unset($style->deps[$dep]);
        }
      }
      wp_deregister_style($styleToRemove);
    }
  }, 1 );

Answer 10

add_action('wp_enqueue_scripts', 'wps_deregister_styles', 200);

为我工作。

Answer 11

由于最近发布了最新的古腾堡更新，很多人都想知道如何remove wp-block-library from WordPress。如指南所示，下面您需要在 add_action 中引用 100。

首先，您必须为wp-block-library 创建一个保存您的wp_dequeue_style 的函数，然后这样调用它：

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