Removing Default Gutenberg Blocks

In this tutorial I will show you a super-simple way to remove any of the default Gutenberg blocks from the inserter.

/35 comments

Well, Gutenberg is going to be a part of WordPress ัore really soon and I decided to move my whole website experience to the Gutenberg editor โšก๏ธ๐Ÿ˜

Once I installed Gutenberg I faced with some issues.

And the next thing I faced with is the large amount of blocks, which is cool of course, but I’m such a minimalist.

How to remove unneeded Gutenberg default blocks
Well, I absolutely don’t need so much Embeds (34) on my website ๐Ÿ˜

How to Remove Certain Default Blocks from theย Inserter?

In fact, I didn’t find a way to remove specific blocks from the inserter with the help of hooks (so, we can use them in the current theme functions.php file or in a custom plugin). But there is an awesome hook allowed_block_types that allows to specify blocks we would like to use on our website and besides it accepts $post parameter, so we can use different blocks for different post types and that’s awesome!

Example, on my website I would like to use only Paragraph, Heading, Image and List blocks, for any post types, in that case my code will look like:

add_filter( 'allowed_block_types', 'misha_allowed_block_types' );
 
function misha_allowed_block_types( $allowed_blocks ) {
 
	return array(
		'core/image',
		'core/paragraph',
		'core/heading',
		'core/list'
	);
 
}

If you tried to print_r( $allowed_blocks ), it returns nothing. Why? Because by default the allowed blocks array is empty, which means to display all blocks. If we add something to this array, only the blocks from the array will be displayed.

If allowed_block_types filter hook is used several times on your website, you could get or print the allowed blocks array which was specified earlier in the same hook.

Maybe you’re wondering where to get block IDs (slugs) to pass into the array. The full list is below.

And here is my result:

Allowed Gutenberg blocks specified with allowed_block_types filter hook.
So clean! I love it ๐Ÿ–ค

Allow/Disallow Certain Blocks for Specific Post Types

Do you remember, I mentioned that allowed_block_types hook accepts $post parameter? Let’s use it now! For example, we will add one more block โ€“ Shortcode for Pages. In this case our code will be changed a little bit:

add_filter( 'allowed_block_types', 'misha_allowed_block_types', 10, 2 );
 
function misha_allowed_block_types( $allowed_blocks, $post ) {
 
	$allowed_blocks = array(
		'core/image',
		'core/paragraph',
		'core/heading',
		'core/list'
	);
 
	if( $post->post_type === 'page' ) {
		$allowed_blocks[] = 'core/shortcode';
	}
 
	return $allowed_blocks;
 
}

What is $post? Post object indeed! So, you can even allow or disallow specific blocks by the post ID!

Here is my result for Pages:

List of block slugs

To make it more clear, I split the list by categories and added some screenshots.

1. Common blocks category

Common blocks from the inserter

2. Formatting category

Default Gutenberg blocks from the Formatting category

3. Layout Elements category

Layout Elements Gutenberg blocks

4. Widgets category

Widgets blocks category

5. Embeds category

Embeds blocks category

Oh my gosh, so much blocks are here.

Now my Gutenberg inserter is so clean and I’m happy to work with it. Of course I will create some custom blocks for my needs there, but it is the topic of a new tutorial. ๐Ÿ™ƒ

Random stuff

Need some help with Gutenberg?

If you need some professional developer help, I will be happy to assist you.

Contact me Who I am?

Comments — 35

Leave a comment

php js HTML CSS Code