How to Deregister Gutenberg Block Styles by Finding the Style Handle

The WordPress block editor allows us, the developers, to create new block types. Now with the block.json file configuration is easier than never to register a block and enqueue the necessary styles, scripts, and even PHP templates. But sometimes we may want to deregister these styles, especially when they come from third-party plugins. How to do it? Next, I’ll show how we can achieve this.

Here is an example block.json that adds some styles on the front-end:

  "$schema": "",
  "apiVersion": 3,
  "name": "zerowp/top-posts",
  "title": "Top Posts",
  "editorScript": "file:../script.min.js",
  "style": "file:../style.min.css",
  "render": "file:./render.php"

If you look closely, that block will print the styles of style.min.css on the site. The goal is to remove it, so we might insert our own styles, or nothing at all.

Before we can deregister a block’s styles, we need to determine its handle. This handle is a unique identifier used by WordPress to refer to the registered style. It should be the block name with the slash replaced by a dash, but to be 100% sure, we can find it. Follow the steps:

1. Temporarily Display Registered Style Handles:

Insert the following code in your theme’s functions.php file. This code will display a list of all style handles on your website when it’s loaded:

add_action('wp_print_styles', function () {
    global $wp_styles;
    foreach ($wp_styles->queue as $handle) {
        echo "$handle<br>";

2. Visit Your Website:

Navigate to the front end of your website. You should see a list of style handles.

3. Identify the Block’s Style Handle:

As noted before, Gutenberg blocks usually have a naming convention like namespace/block-name. For instance, if your block’s name is "zerowp/top-posts", the likely style handle would be zerowp-top-posts-style.

However, note that this is a general convention and might not always be true, especially for third-party blocks. The code snippet you added will help you confirm the exact handle.

4. Clean up

Now that you found the handle, save it for later use and delete this script from functions.php.

5. Add Deregister Code:

In your theme’s functions.php file, add the following code:

add_action('wp_enqueue_scripts', function(){
    wp_deregister_style('zerowp-top-posts-style'); // Replace 'zerowp-top-posts-style' with the handle you identified
}, 99);

The priority 99 ensures that our function runs after the styles have been enqueued, making sure it actually deregisters the style.


That’s it! You’ve now successfully deregistered the styles for a specific Gutenberg block. Always remember to perform these actions on a child theme or use a custom functionality plugin to avoid losing your changes when the theme updates. Also, always test on a staging site first to ensure no unintended side effects occur.

Member since January 2, 2019

As a seasoned WordPress developer with expertise in various tech stacks and languages, I bring years of experience to every project I handle. My passion for coding and dedication to delivering exceptional work ensures that each project I take on is of the highest quality. I specialize in creating custom themes, developing plugins, and building full-scale web systems. By staying up-to-date with the latest industry trends and best practices, I incorporate cutting-edge solutions into my work.


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