Although Gutenberg is the default editor in WordPress, not everyone wants to use it because of the bad editing experience. And Gutenberg loads CSS files and lots of inline styles on the front end, which will affect your website loading speed. This article will guide you on how to disable Gutenberg with a simple code without using plugins.

Recover the classic editor in WordPress
Recover the classic editor in WordPress

Why disable Gutenberg?

Gutenberg is the new editor added in WordPress 5.0. This editor promises to bring a whole new change and experience to users.

Nevertheless, after launching, it received plenty of criticism (more than praises) as it caused some problems for users, such as:

  • Heavy JavaScript features make the editing experience bad or not smoothy
  • Articles editing, images inserting are a bit more difficult than the previous editor
  • Unable to use powerful features of the editor toolbar brought by the TinyMCE Advanced plugin.
  • Can’t integrate the short-code buttons from other plugins into the editor toolbar.

Therefore, while Gutenberg is not really stable, it should be disabled. Otherwise, if you are using other plugins and you have conflicting problems, you should disable it and go back to the old editor interface.

Besides, Gutenberg outputs a lot of inline styles in your website's <head>. Here is a screenshot:

Gutenberg inline global styles

How to disable Gutenberg with code?

It’s simple to disable Gutenberg, all you need to do is add the following code into the functions.php file in your theme:

// Disable Gutenberg on the back end.
add_filter( 'use_block_editor_for_post', '__return_false' );

// Disable Gutenberg for widgets.
add_filter( 'use_widgets_block_editor', '__return_false' );

add_action( 'wp_enqueue_scripts', function() {
    // Remove CSS on the front end.
    wp_dequeue_style( 'wp-block-library' );

    // Remove Gutenberg theme.
    wp_dequeue_style( 'wp-block-library-theme' );

    // Remove inline global CSS on the front end.
    wp_dequeue_style( 'global-styles' );
}, 20 );

The snippet does these 3 things:

  • Disable Gutenberg for posts on the back end
  • Disable Gutenberg for widgets. It's very useful when you want to use the old widgets screen as before, and
  • Remove Gutenberg's CSS file and inline styles on the front end. Without it, Gutenberg will enqueue an unnecessary CSS file and output huge inline styles in your website's <head>. That will decrease your website performance and slow it down.

If you want to disable Gutenberg for a specific post type, use the code below:

add_filter( 'use_block_editor_for_post_type', function( $enabled, $post_type ) {
    return 'your_post_type' === $post_type ? false : $enabled;
}, 10, 2 );

Alternative ways to disable Gutenberg

There are other ways to disable Gutenberg that are suitable if you're not familiar with adding snippets to your theme. Two popular plugins are Disable Gutenberg and Classic Editor. However, both plugins don't remove global inline styles that were added in WordPress 5.9. So, in our opinion, using the snippet above gives the best result!

5 thoughts on “How To Disable Gutenberg Without Using Plugins

  1. Hello, I added this code, but for some reason, it brought down my website when I uploaded the amended functions.php into my file manager. I previously was using this code:

    // disable for posts
    add_filter('use_block_editor_for_post', '__return_false', 10);

    // disable for post types
    add_filter('use_block_editor_for_post_type', '__return_false', 10);

    However, the code that I have just included doesn't work to prevent Gutenberg blocks from appearing in Widgets. Have you seen other instances of the code that you provided causing major website errors? Thank you in advance.

Leave a Reply to Sarang Cancel reply

Your email address will not be published. Required fields are marked *