Question

我在WordPress v4.9.8中安装了Gutenberg插件，并试图删除它附带的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

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

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

请帮忙。

Answer 4

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

这是我的整个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
}

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

您必须将此代码放置在通常位于主题文件夹中的functions.php中。

function wp_dequeue_gutenberg_styles() {
wp_dequeue_style( ‘wp-block-library’ );
wp_dequeue_style( ‘wp-block-library-theme’ );
}
add_action( ‘wp_print_styles’, ‘wp_dequeue_gutenberg_styles’, 100 );

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

在 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 9

从前端加载中移除 Gutenberg Block Library 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 10

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

为我工作。

Answer 11

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

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

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

删除古腾堡CSS

11 个答案: