Customizing Gutenberg: Disabling Certain Blocks

The Gutenberg editor comes with a whole bunch of useful blocks by default but you might not want to use them all.

Updated November 2020: You can now enable/disable blocks from the block inserter using the Block Manager included in WordPress 5.2+

Typically you’ll want to only allow specific blocks when customizing the CMS for a client. Why display 200 blocks when all you need are 8?

Removing Blocks from the Inserter

Using the function below you can specify which blocks are visible and allowed in the block inserter menu.

In the array you’ll specify the block name(s), block names must contain a namespace prefix like my-plugin/my-custom-block

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

add_filter( 'allowed_block_types', 'misha_allowed_block_types' );

Credit: https://rudrastyh.com/gutenberg/remove-default-blocks.html

Finding a block’s name

There are lots of blog posts with lists all the default Gutenberg block names but these will quickly become outdated once new blocks are added.

Here are three ways you can get the block names:

PHP

Place this code in your functions.php file. It will output all the block names used in a specific post.

The block names will be outputted at the button of your single post.

Ideally, you’ll only do this on a local copy of your website. For safety, the output will only be visible to administrators users.

if ( current_user_can('manage_options') ){
	function chrisyee_output_block_names(){
		global $post;

		if( has_blocks( $post->post_content ) ){
		    $blocks = parse_blocks( $post->post_content );

		    echo '<ul>';
		    foreach( $blocks as $block ){
		    	if( isset( $block['blockName'] ) ){
		    		echo '<li>' . $block['blockName'] . '</li>';
		    	}
		    }
		    echo '</ul>';
		}

	}
	add_action( 'wp_footer', 'chrisyee_output_block_names' );
}

JS

Copy + paste the JS code into your browser’s console to view all available block names.

wp.blocks.getBlockTypes().forEach( function( blockType ){ console.log( blockType.name ); }); 

Credit: https://wordpress.stackexchange.com/a/326969

Chrome Developer Tools

If you inspect the block with Chrome Developer Tools (or any modern browser) you can get the block name by looking for the data-type attribute.

<div id="block-b9ce2312-d34d-4f81-a27b-9885348cb2b7" class="wp-block editor-block-list__block is-selected" data-type="core/code" tabindex="0" aria-label="Block: Code">...</div>

In the example above the data-type attribute for the code block is core/code