How to Remove Gutenberg CSS in WordPress: Clean Unused Code

Stop WordPress from loading wp-block-library.css on every page. A theme-type decision table, code snippets, and rollback steps for safe removal.

Ekin Yalgın

June 29, 2025·7 min read

How to Remove Gutenberg CSS in WordPress: Clean Unused Code

wp-block-library.css loads on every WordPress page by default. If you are not using the Gutenberg block editor, that stylesheet is dead weight pulling down your First Contentful Paint score for no reason.

	Details
Target files	wp-block-library.css, global-styles, svg-filters
Average savings	60KB to 120KB per page load
Safe to remove	Classic Editor, Elementor, Divi, Bricks, ACF custom themes
Do NOT remove	Full Site Editing (FSE) block themes like Twenty Twenty-Four

The Decision Framework: When to Remove Block Library CSS

Indiscriminately disabling WordPress core styles is exactly how layout disasters happen. You need to verify your theme architecture before touching the functions file. Use this table first:

Theme type	Page builder / editor	Safe to remove?	What to remove
Classic theme	Classic Editor only	Yes, fully	All handles in snippet below
Classic theme	Elementor / Divi / Bricks	Yes, fully	All handles + wc-block-style if no WC blocks
Classic theme	Gutenberg (block editor)	No	Do not remove
Classic theme	WooCommerce (shortcodes only)	Partial	wp-block-library + global-styles, skip wc-block-style
Classic theme	WooCommerce (Cart/Checkout blocks)	No	Do not remove wc-block-style
Block theme (FSE)	Any	Never	Removing will break site structure
Hybrid theme	Mixed content	Partial	Surgical per-block dequeue only

Classic Themes vs. Full Site Editing (FSE)

Block themes rely entirely on the Gutenberg infrastructure to render everything from headers to footers. If you use an FSE theme, removing the block library will instantly destroy your site structure. Classic themes handle their own styling through a dedicated style.css file. If your classic theme uses classic widgets and you write content using the Classic Editor plugin, you are completely safe to dequeue all Gutenberg assets.

Page Builders and ACF Custom Themes

Sites built heavily with Elementor or Divi generate their own CSS grids and typography rules. Gutenberg stylesheets load in the background but remain completely unused. The same rule applies to custom themes powered by Advanced Custom Fields. If your template files handle the entire visual output, the default WordPress block styles are just dead weight slowing down your server response time.

Method 1: Remove Gutenberg CSS via Code

Adding a few targeted lines to your child theme is the cleanest way to stop WordPress from loading unused assets. Open your child theme functions.php file or your preferred code snippets manager.

Dequeue Default wp-block-library and Global Styles

The core block library and the inline global styles take up the most space. You can forcefully dequeue them by hooking into the WordPress enqueue scripts action.

add_action( 'wp_enqueue_scripts', 'devcrea_remove_gutenberg_css', 100 );
function devcrea_remove_gutenberg_css() {
    wp_dequeue_style( 'wp-block-library' );
    wp_dequeue_style( 'wp-block-library-theme' );
    wp_dequeue_style( 'wc-block-style' );
    wp_dequeue_style( 'global-styles' );
    wp_dequeue_style( 'classic-theme-styles' );
}

Setting the priority to 100 ensures your custom function runs after WordPress's own enqueue calls (which fire at default priority 10). Drop it below 100 and some handles will not be dequeued in time.

One handle worth noting: classic-theme-styles was added in WordPress 6.1 to inject basic block styles even on classic themes. It is safe to remove on fully custom classic themes, but keep it if your theme relies on any default block formatting like paragraph spacing or image alignment.

Disable Inline SVG Filters

WordPress automatically injects a massive block of SVG code right after the opening body tag to support the duotone image filters. If you edit your images in Photoshop before uploading them, you will never need these inline SVG filters.

remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );
remove_action( 'in_admin_header', 'wp_global_styles_render_svg_filters' );

Removing Specific WooCommerce Block Handles

WooCommerce introduces its own set of block styles that load on every single page. If you use standard WooCommerce shortcodes instead of the new cart and checkout blocks, you can safely remove these specific handles. Add wc-blocks-style and wc-blocks-integration to your dequeue function to keep your e-commerce pages lean.

Surgical CSS Removal (Per-Block Dequeue)

Advanced developers prefer a surgical approach rather than a nuclear one. You can remove styles for specific blocks you never use, while keeping the ones you do. If you only use paragraph and heading blocks, you can dequeue the heavy layout blocks.

add_action( 'wp_enqueue_scripts', 'devcrea_remove_specific_blocks', 100 );
function devcrea_remove_specific_blocks() {
    wp_dequeue_style( 'wp-block-columns' );
    wp_dequeue_style( 'wp-block-gallery' );
}

Method 2: Clean Unused CSS Using Performance Plugins

If editing PHP files feels risky, dedicated performance plugins offer a visual interface to achieve the exact same results. Perfmatters includes a dedicated toggle specifically labeled Remove Global Styles that handles the theme.json bloat with one click. Asset CleanUp allows you to view every stylesheet loading on a specific post and disable the Gutenberg library locally or globally. These plugins execute the dequeue functions dynamically based on your toggle selections.

Measuring the Impact: Did It Actually Improve Performance?

Deleting code feels productive, but you need hard data to justify the modification. You must measure your page weight before and after the cleanup.

Using DevTools Coverage Tab to Identify Dead CSS

Open Google Chrome and navigate to your heaviest article. Press F12 to open Developer Tools, press Ctrl+Shift+P, and type Coverage. Click the reload icon to capture the data. Look for wp-block-library.css in the list. You will often see a red bar indicating that 95% to 100% of that specific file is completely unused by the browser.

Before and After: PageSpeed Insights and FCP Metrics

Run your URL through Google PageSpeed Insights before touching the CSS. Note down your First Contentful Paint (FCP) metric. After deploying the code snippets, clear your server cache and run the test again. Removing the global-styles inline block usually shaves off around 40 to 60 milliseconds from the initial render path, directly improving your Core Web Vitals score.

Breaking Changes and Rollback Steps

Sometimes removing global styles breaks custom CSS properties, especially if your classic theme relies on preset color variables defined in theme.json. This is particularly common on sites that implement CSS dark mode using custom properties, since those variables often originate from the global-styles output. If your buttons suddenly lose their background colors or your typography shrinks, you have removed too much.

To initiate a safe rollback, immediately remove the dequeue snippets from your functions file. Clear your caching plugin entirely. Next, purge your CDN cache if you use Cloudflare. Visit your site in an incognito window to confirm the layout has returned to normal. If you still experience issues, verify that your browser is not serving a locally cached version of the broken stylesheet.

How to Verify and Troubleshoot

After deploying the fix, open your website in a private browsing window. Right-click and select View Page Source, then press Ctrl+F and search for wp-block-library. Zero results means the dequeue worked.

If the "Reduce unused CSS" warning still appears in PageSpeed Insights, your caching layer is serving a stale version. Clear your WordPress caching plugin, your server-level cache, and your CDN cache in that order, then rerun the test in a new incognito tab.

If the site looks broken after removal: Add the handles back one at a time to identify which one your theme actually depends on. The most common culprits are global-styles (breaks CSS custom properties and color presets) and classic-theme-styles (breaks basic block formatting on WordPress 6.1+). Keep only the handle your theme needs and remove the rest.

FAQ

Frequently Asked Questions

Only if your theme depends on Gutenberg to render its layout. Classic themes with Elementor, Divi, or Bricks are completely safe. FSE block themes and sites using the Gutenberg editor for content will break if you remove these stylesheets.

It is the default stylesheet for the Gutenberg block editor. WordPress loads it on every page automatically, assuming you might use blocks anywhere. On sites built with page builders or the Classic Editor, it is never actually used.

Typically 60KB to 120KB per page load, depending on your WordPress version and which handles you remove. This includes the block library, global styles inline CSS, and the SVG filter injection in the body tag.

Yes, this is exactly the scenario it is designed for. Both Elementor and Divi load their own stylesheets, making the Gutenberg block library completely redundant. Removing it prevents style conflicts and reduces page weight.

It was added in WordPress 6.1 to inject basic block styles on classic themes. Remove it on fully custom themes. Keep it if your theme relies on default block formatting like paragraph spacing, image alignment, or button borders.

Add the dequeue snippet to your child theme's functions.php file or use the free Code Snippets plugin. The snippet uses wp_dequeue_style() at priority 100 to remove the block library handles after WordPress loads them.

Only if you use WooCommerce shortcodes instead of the newer Cart and Checkout blocks. Removing wc-block-style on a store using block-based checkout will break the cart and payment flow.

Open your site in incognito mode, right-click and select View Page Source, then search for wp-block-library. If no results appear, the dequeue worked. Also run a fresh PageSpeed Insights test and check whether the unused CSS warning has decreased.

Published in

Web Development