CODEWITHSUNDEEP
csswordpresswordpress-gutenberg
Matt Saunders
Matt Saunders

Reputation: 4371

Remove Gutenberg CSS

I have Gutenberg plugin installed in WordPress v4.9.8 and am trying to remove the CSS that comes with it so I can supply my own.

This is the sheet that gets included: 

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

I have tried the following:

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

As well as variations of this, but the file persists. How can I remove it?

Upvotes: 33

Views: 42820

Answers (11)

corbin-c
corbin-c

Reputation: 698

None of the above answers removed all the styles in the block editor, the following worked for me:

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

Upvotes: 1

ksh
ksh

Reputation: 86

In 2021 I tried variations of most of the approaches above and they all failed. Looking at the WordPress code, I believe the reason why is that Gutenberg styles are not enqueued anymore. The only way I have found to remove it is to remove it just before it is printed.

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

Upvotes: 1

Mohammad Ayoub Khan
Mohammad Ayoub Khan

Reputation: 2960

Remove Gutenberg Block Library CSS from loading on the frontend

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

Upvotes: 0

shawn
shawn

Reputation: 413

This doesn't really answer the question, but I suspect others like me have ended up here trying to resolve something this question alludes to but doesn't address: 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?

The following will do just that. Put it in your functions.php file or a plugin.

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

This just defuses the generated CSS so there's nothing appended to the back-end editor. The front-end remains unchanged.

Upvotes: 0

disinfor
disinfor

Reputation: 11533

I'm adding this as a more complete answer than my comment:

You need to remove the -css when trying to dequeue the script. That's added to the HTML markup and not the actual tag for the css file.

If you search the code (the location of the enqueue may change as Gutenberg gets rolled into core), you can find:

wp_enqueue_style( 'wp-block-library' );

As you can see, there is no -css. This solution may work for other plugins that people have trouble dequeuing styles.

Edit: Since this still gets some traction, here is the code to handle it:

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

Upvotes: 44

Ryszard Jędraszyk
Ryszard Jędraszyk

Reputation: 2412

I use Wordpress 5.1. Tried the most upvoted answers and they didn't work for me, 'wp_enqueue_scripts' instead of 'wp_print_styles' does the trick.

Here is my whole WordPress 5.1 solution to get rid of Gutenberg without bloat stylesheets loading:

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

Edit:

It works with WordPress 5.2 as well and because it handles the stylesheets added by WooCommerce and Storefront theme, I made this one of the settings in my new plugin:

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

Upvotes: 17

Alexander Taubenkorb
Alexander Taubenkorb

Reputation: 3289

As the wp_dequeue_style-approach did not work to disable wp-editor-font (wp-editor-font-css) I used the following code:

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

Also see https://github.com/dimadin/disable-google-fonts/blob/master/disable-google-fonts.php

Upvotes: 1

M.K.Dan
M.K.Dan

Reputation: 43

Paste the following code on your functions.php file

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

Please like if this has helped you.

Upvotes: 1

Кирилл Меркушев
Кирилл Меркушев

Reputation: 701

I am use this code to to remove default style.

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

Upvotes: 21

WPZA
WPZA

Reputation: 921

As the latest Gutenberg update has been released recently, a lot of people are wondering how to remove wp-block-library from WordPress. As the guide shows, below you need you to reference the 100 in your add_action.

Firslty, you must create a function that holds your wp_dequeue_style for wp-block-library and then call it as such:

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

Upvotes: -1

user1173218
user1173218

Reputation: 29

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

Works for me.

Upvotes: -1

Related Questions