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": "https://schemas.wp.org/trunk/block.json",
"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.
Conclusion:
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.
