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.
Minimize Unpredicted Output
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.
Click the heart.
Are you interested in more programming tips and tricks?
Color Palette Generator For Better WordPress Accessibility
Discover the Color Palette Generator: boost your WordPress site’s…
How to Implement a Custom Card Output for LPS
Here is a small snippet that allows you to use the Latest Post Shortcode plugin…
Brief Introduction to Acceptance Testing
Last month I survived my first public presentation, at Bucharest WordPress Meetup…
How to Setup a Local Development Environment in 5 Minutes
When you are working on diverse projects on your own or with other…