WordPress Tips: Simplify Gutenberg Embed Block Variants

WordPress Gutenberg editor is very easy to use and it provides out-of-the-box useful features, and having a limited set of options in the editor helps create consistent content output and simplifies the workflow.

The Gutenberg editor provides out-of-the-box a lot 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.

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 removing some of the blocks from the editor, you might be interested in using the allowed_block_types filter. This WordPress native hook allows you to redefine 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.

Share the article
  • Distribuie pe LinkedIn