css - 删除古腾堡 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' );
}

以及这种变化，但文件仍然存在。我怎样才能删除它？

score 41 · Accepted Answer

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

您需要-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' );
}

score 19 · Accepted Answer

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

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

score 16 · Accepted Answer

我使用 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/

score 2 · Accepted Answer

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

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

如果这对您有帮助，请点赞。

score 1 · Accepted Answer

由于 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

score 1 · Accepted Answer

在 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');
}

score 0 · Accepted Answer

这并不能真正回答这个问题，但我怀疑像我这样的其他人最终来到这里试图解决这个问题所暗示但没有解决的问题：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，因此后端编辑器没有附加任何内容。前端保持不变。

score 0 · Accepted Answer

从前端加载中删除 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);

score 0 · Accepted Answer

以上答案都没有删除块编辑器中的所有样式，以下对我有用：

  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 );

score -1 · Accepted Answer

-1

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

为我工作。

于 2018-11-13T13:12:56.813 回答

score -1 · Accepted Answer

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

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

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

css - 删除古腾堡 CSS

11 回答 11

Related

Reference