删除古腾堡 CSS

Question

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

这是包含的 sheet：

<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 文件的实际标记。

如果你搜索代码（入队的位置可能会随着古腾堡进入核心而改变），你可以找到：

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

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

适合我。

Answer 3

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

中的 100

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

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

Answer 4

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

//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 5

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

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

如果对您有帮助请点赞

Answer 6

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

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

这是我的整个 WordPress 5.1 解决方案，用于在不加载膨胀样式表的情况下摆脱 Gutenberg：

// 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 8

这并没有真正回答问题，但我怀疑像我这样的其他人最终来到这里试图解决这个问题暗示但没有解决的问题：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 9

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

// 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 10

从前端加载中删除古腾堡块库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 11

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

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

删除古腾堡 CSS

Remove Gutenberg CSS

css

wordpress

wordpress-gutenberg