How to Absolutely Remove WordPress Gutenberg / Block Editor External CSS and Javascript Files?
By default the Gutenberg Block Editor loads its default CSS/stylesheet on the front-end of your WordPress site.
<link rel=”stylesheet” id=”wp-block-navigation-css” href=”https://yourdomain.com/wp-includes/blocks/navigation/style.min.css?ver=6.8.1″ media=”all”>
<link rel=”stylesheet” id=”wp-block-image-css” href=”https://yourdomain.com/wp-includes/blocks/image/style.min.css?ver=6.8.1″ media=”all”>
It’s a core style sheet for the core block styles.
Remove Gutenberg CSS Library from WordPress
You can remove Gutenberg CSS by using the PHP below to dequeue the “/wp-includes/css/dist/block-library/style.min.css” file.
// Stop Gutenberg block library CSS from loading.
function 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', 'remove_wp_block_library_css', 100 );
Navigation Block CSS (style.min.css) Loads Even When Gutenberg is Disabled
When the Classic Editor plugin is enabled, the Gutenberg block editor is disabled. However, the stylesheet
wp-includes/blocks/navigation/style.min.css still loads on the frontend, even when block-based navigation is not used.
This causes unnecessary CSS to be loaded, affecting site performance and increasing unnecessary HTTP requests.
Expected Behavior: When Gutenberg is disabled, block-related CSS files should not load unless required.
wp-block-navigation CSS file loads unnecessarily, even when the site is not using block-based navigation.
A possible fix is to dequeue the stylesheet when Gutenberg is disabled:
function remove_gutenberg_styles() {
wp_dequeue_style('wp-block-navigation');
}
add_action('wp_enqueue_scripts', 'remove_gutenberg_styles', 100);
In Gutenberg and plugins for Gutenberg are all styles involved via wp_enqueue_style
. I would to see all developers use wp_register_style
before, makes easier to deregister. However you should un-enqueue the style via the core function wp_dequeue_style
.
The CSS styles are generated by PHP from the theme.json
if the block supports the global styles UI editor.
Does this actually work? Gutenberg enqueues a single CSS file containing styles for all its core blocks, so I don’t think it is possible to dequeue/enqueue styles for a single block.
Are you using the Gutenberg editor?If not then the Disable Gutenberg plugin by Jeff Starr has an option to remove front end styles.
One of the shortcomings of Page Builders is that the default stylesheet contains too much unused CSS. The same drawback exists with Gutenberg: the default style sheet contains all the native blocks’ CSS. In terms of performance, this is an issue since unused CSS is loaded on all pages. Even after minification, a Gutenberg CSS file is still 50KB.
WP rocket deprecated several blocks that are not used. We also decided not to use the Gutenberg CSS file. Instead, we “migrated” the CSS we actually needed into our own style sheet. After compression, the Gutenberg CSS file is only 8KB. When it comes to performance, we always try to optimize everything we can.