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
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 CSS and inline styles in your website’s <head>. Here is a screenshot:
Disabling Gutenberg can help you have a better writing experience, and also increase the performance and loading time of your website by removing unused CSS. At the end, it will give your users a faster website, and might help to increase the search rankings.
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' );
// Remove classic-themes CSS for backwards compatibility for button blocks.
wp_dequeue_style( 'classic-theme-styles' );
}, 20 );The snippet does these the following 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. - Remove the classic theme styles for backwards compatibility for button blocks.
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 );