Block Editor is an integral feature in WordPress succeeding the staple Classic TinyMCE Editor. It has evolved the content creation landscape in WordPress and provided the users an option to create much more modular content in an intuitive manner. In Block Editor, we can create content using blocks. By default, WordPress comes bundled with a bunch of core blocks which we can insert in our posts and pages to add content. Apart from the core blocks, there are a range of third-party plugins through which we can add custom blocks in our website. In some cases, we might need to disable the core blocks provided by WordPress as per the requirements of our project. In this article, we will see how disable core blocks in the Block Editor in WordPress.
NOTE: This article deals with code so you need have a basic understanding of the WordPress structure and some basic WordPress development concepts.
Before we look at how to disable core blocks, we take a look at some possible scenarios where we might need to disable the core blocks.
Why disable Core Blocks
While core blocks bundled with WordPress are indeed a powerful feature, there are some instances where we might need to disable them or it’s a good practice. Let’s take a look–
You plan on using a third-party blocks plugin
Like I mentioned earlier, there are a lot of amazing plugins providing custom blocks and TBH some of them are quite good. You can check them out on the WordPress Directory. In such a scenario where you plan on building your website using third-party blocks, disabling the core blockas is the logical choice.
You are using Page Builders
This situation is much more common. Since users tend to utilize page builders to set up their website without requiring any code, disabling the core blocks is actually a good idea as it can help in improving the efficiency of the website.
You are developing a custom website
This is much more relevant if you are a developer. If you are building a custom website from scratch or translating a Figma or Sketch design into a functional website, more often than not, you’ll not be using the core blocks. In such a case, disabling will make the website much more efficient.
Since we have seen how disabling a core blocks can be beneficial in some situations, now let’s get back to how we can disable the core blocks in the Block Editor in WordPress.
How to disable core blocks in Block Editor
While there are plugins out there that be used to disable the blocks, in this article we’ll be talking about the code solution without using any third-party plugin. So, in order to display the core blocks, we need add a PHP code snippet in our website. It can be done either by using a third-party plugin, eiditng our theme files or creating a Child Theme. We will take a look at each of this methods.
Using a third-party plugin
For this tutorial, I used the Code Snippets plugin but you can use any one you like. Firstly, I installed the plugin and activated it.After plugin is activated, click on the “Add New” sub-menu item in “Snippets” menu in Dashboard.
In the following screen, add the following PHP code–
|
1 2 3 4 5 6 7 8 9 10 11 |
function my_theme_disable_core_blocks($allowed_blocks, $context) { $block_types = WP_Block_Type_Registry::get_instance()->get_all_registered(); $allowed_blocks = array_filter($block_types, function($block) { return stripos($block->name, "core/") === false ? true : false; }); $allowed_blocks = array_values(wp_list_pluck($allowed_blocks, 'name')); return $allowed_blocks; } add_filter('allowed_block_types_all', 'my_theme_disable_core_blocks', 10, 2); |
In this code, we use the allowed_block_types_all filter hook provided by WordPress. Callback function of this filter hook accepts two arguments – $allowed_blocks – an array of all the available blocks including any third-party blocks and $context of the block. You can take a look at this page for more info on context but in brief, it contains the information about the block being rendered. The function returns $allowed_blocks .
By default, it returns true which means all blocks are available. We can modify the $allowed_blocks to restrict the blocks we need to enable in the block editor.
In the code above in line 2, we get a list of all the registered blocks. Now, we filter these blocks based on their name and filter out the blocks that have core/ in their name and get only the third-party blocks.
But till now, the $allowed_blocks array is an array of WP_Block_Type objects. We need to extract the name property from the object. Here, we use a very nifty function wp_list_pluck function. Basically, this function plucks a certain field out of each object or array in an array. We use array_values function to get a regular array with numerical incremental keys from an associative array. This way we get an array of all the third-party blocks.
After saving the file, if we go to the Edit area of a page or post and click on the Block Inserter, we’ll see that the core blocks are not visible.
So, this is how we disable core blocks in Block Editor in WordPress using a third-party code snippet plugin. We can achieve the same result without a plugin by editing our theme files. Let’s see how.
Editing theme files
In order to disable core blocks, we need add the snippet we previously used in one of our theme files, in a classic WordPress Theme structure, it would be the functions.php file. Open the functions.php file and paste the above code at the bottom of the file.
After saving the file, the core blocks would be disabled and not available in the Block Inserter. Now, let’s take a look how to achieve this using a Child Theme.
Using a Child Theme
IMO this is the best way of making a change to your theme if you are familiar with code. Child Themes are an extension of your theme where you can make all changes you want to your theme without ever having to worrty about the changes getting overwritten or deleted during a theme update or any other issue. You can check out the official Codex on how to go about creating a child theme and implementing it for your website. For the sake of this article, I will mention that it contains a functions.php as a default file where we will need to add our code.
After activating our Child Theme, add the above code to its functions.php file. After saving the file, the core blocks will be disabled.
Conclusion
In this article, we saw how to disable core blocks in Block Editor in WordPress. It’s a hefty trick to keep up your sleeve in case you need to disable core blocks.
So, we hope you got to learn some thing new in this article. We keep posting similar snippets, tips and tricks in our blog helping you navigate through WordPress and create your next amazing project. Apart from that, we offer a bunch of services such as code optimization, custom web development and Search Engine Optimization. Feel free to reach out at mail@indithemes.com if you have an amazing idea and want to collaborate.
