WordPress Tips: Simplify Gutenberg Embed Block Variants

The Gutenberg editor provides out-of-the-box lots of useful and easy-to-use features. From my experience as a developer, in most of the projects that I work with, when enabling all options for the administrators I am creating opportunities for lots of customization to be done when I want to make the output look seamless across all features. This also opens the door for combining/using the features in an undesired way or with unpredicted output.

From a user perspective, I haven’t created or encountered content that requires everything to be used from the Gutenberg editor palette in the same project, so, embedding specific blocks in a page is faster if I don’t have to shuffle through so many options. Also, having a limited set of options in the editor helps with creating consistent content output.

Hence, whenever I have the option to simplify things and workflows in my projects, I do so.

How to Solve This?

You can unregisterBlockVariation by using a JavaScript snippet in your project.

The JavaScript Snippet

Here is a JavaScript snippet that shows you how to keep only YouTube, Spotify, and Vimeo embed variants:

/**
 * Simplify the embed variants.
 */
const wp = window.wp;
wp.domReady( function() {
	const allowedVariants = [ 'youtube', 'vimeo', 'spotify' ];
	const allVariants = wp.blocks.getBlockVariations( 'core/embed' );
	if ( allVariants ) {
		allVariants.forEach( variant => {
			if ( ! allowedVariants.includes( variant.name ) ) {
				wp.blocks.unregisterBlockVariation( 'core/embed', variant.name );
			}
		} );
	}
} );

This is just an example, but you can adapt the snippet for all block variants that you need to simplify.

When it comes to completely remove some of the blocks from the editor, you might be interested in using the allowed_block_types filter. This WordPress native hook allows redefining the list of blocks and even have a different set of blocks available in the editor for each of the posts/post types in your project.