Deep Tech Point
first stop in your tech adventure

How to remove the new WordPress Block editor CSS

January 6, 2021 | WordPress development

Since WordPress version 5.0, a new content editor with code name Gutenberg was enforced over the old one which was called Classic editor. Gutenberg editor, also known as Block editor, introduced a new way of formatting content. It supposed to simplify the already simple process for adding content so for some people, including me, it is just an overhead. Perhaps total beginners will enjoy its “helpfulness” but this tutorial is obviously not for them. So let’s see how to remove the new WordPress editor, including its CSS.

remove_gutenberg_and_bring_back_classic_editor();


It would be great if it is as simple as that. But it isn’t. WordPress developers usually enforce new features without leaving many options. Fortunately, they continue to support Classic editor as a plugin and hopefully, they will continue to support it in a plugin form for at least some time.
Internally Classic editor is based on TinyMCE open source WYSIWYG (what-you-see-is-what-you-get) editor which is still an alive project but quite obsolete architecturally speaking. So from that point, I can understand WordPress developers and I do support their decision to exclude it from WordPress core. But instead of making something simple, they headed into pampering their users by turning the editing experience into some kind of MySpace “drag and drop” adventure.
First, you need to install the classic editor plugin. There are a few options for installing the WordPress plugin and it depends on your skill level and web directory permissions. I choose to unzip the plugin manually in the wp-content/plugins directory and then activate the plugin in the Admin panel -> Plugins -> Installed Plugins. After that go to Settings -> Writing and select Classic editor as the default editor for all users instead of Block editor. This is the easy part and sufficient to switch back to the classic editor experience.
However, the WordPress Block editor is quite tightly integrated, and even after switching to the Classic editor, it leaves a bunch of Block editor-related CSS files loaded with every page, which is not something to cry about but neither something which will improve your page loading speed score. To remove these put this code into functions.php of your active theme.

// disable Block editor
add_filter('use_block_editor_for_post_type', '__return_false', 10);
// remove Block editor-related CSS
add_action('wp_enqueue_scripts', 'remove_block_editor_css', 100);
function remove_block_editor_css() {
    wp_dequeue_style('wp-block-library');
    wp_dequeue_style('wp-block-library-theme');
    wp_dequeue_style('wc-block-style');
    wp_dequeue_style('storefront-gutenberg-blocks');
}

If for some reason you still see Block editor CSS you should try to increase action priority, which is set at 100 in code snippet above. Good bye Gutenberg, hello Classic editor, at least until Block editor proves to be more usefull for advanced users.