Remove the unnecessary/unused Gutenberg blocks and block variations

remove_unused_gutenberg_block.md

Remove Unused Gutenberg Blocks and Block Variations

When creating custom WordPress themes, we often create custom Gutenberg blocks as per the website design and development need. As a result the list of available block keep getting increased and sometimes it gets really hard to quickly find the block you are looking for. WordPress being a great CMS, it comes with a lot of in-built core blocks, but not all website need them or use them.

So, if you are also building a custom WordPress theme where you would like to unregister some of the default Gutenberg blocks that WordPress ships with you can do that easily by following the steps below.

⚠️ Note: Read the code first and then only unregister the blocks you don't want. Don't blindly copy paste the code.

Setp 1 — Create editor.js inside your theme

Create a JavaScript file inside your WordPress theme. You can name the file whatever you like and also put it whereever you prefer inside your theme file structure. Here for example, I've named the file editor.js

Add the following code inside editor.js

Again do read the code properly before adding it into your site and only unregister the blocks you know you don't need.

/**
 * Unregister the Gutenberg blocks, style and variations that are not going to be used on the website
 */
wp.domReady( () => {
  // List of the Gutenberg blocks that would be unregistered
  const unused_blocks = [
    'core/buttons',
    'core/button',
    'core/freeform',
    'core/verse',
    'core/query',
    'core/image',
    'core/gallery',
    'core/audio',
    'core/video',
    'core/cover',
    'core/file',
    'core/media-text',
    'core/columns',
    'core/column',
    'core/more',
    'core/nextpage',
    'core/spacer',
    'core/archives',
    'core/calendar',
    'core/categories',
    'core/latest-comments',
    'core/latest-posts',
    'core/page-list',
    'core/rss',
    'core/search',
    'core/shortcode',
    'core/social-links',
    'core/tag-cloud',
    'core/missing',
    'core/pattern',
    'core/preformatted',
    'core/pullquote',
    'core/separator',
    'core/social-link',
    'core/text-columns',
    'core/navigation',
    'core/navigation-link',
    'core/navigation-submenu',
    'core/site-logo',
    'core/site-title',
    'core/site-tagline',
    'core/template-part',
    'core/avatar',
    'core/post-title',
    'core/post-excerpt',
    'core/post-featured-image',
    'core/post-content',
    'core/post-author',
    'core/post-date',
    'core/post-terms',
    'core/post-navigation-link',
    'core/post-template',
    'core/query-pagination',
    'core/query-pagination-next',
    'core/query-pagination-numbers',
    'core/query-pagination-previous',
    'core/query-no-results',
    'core/read-more',
    'core/comment-author-name',
    'core/comment-content',
    'core/comment-date',
    'core/comment-edit-link',
    'core/comment-reply-link',
    'core/comment-template',
    'core/comments-title',
    'core/comments-query-loop',
    'core/comments-pagination',
    'core/comments-pagination-next',
    'core/comments-pagination-numbers',
    'core/comments-pagination-previous',
    'core/post-comments',
    'core/post-comments-form',
    'core/home-link',
    'core/loginout',
    'core/term-description',
    'core/query-title',
    'core/post-author-biography'
  ];

  // List of the Gutenberg Block variations that would be unregistered
  const unregister_block_variations = [
    {
      blockName: 'core/group',
      blockVariationName: 'group-row'
    },
    {
      blockName: 'core/group',
      blockVariationName: 'group-stack'
    }
  ];

  // Get all the variations of the core/embed block - so that we can loop though it and keep the ones needed and remove the others
  const embed_block_variations = wp.blocks.getBlockVariations( 'core/embed' );
  const keep_embeds = [ 'twitter', 'youtube' ];

  // 1. Loop though `unused_blocks` to unregister them from the website
  for ( let i = 0; i < unused_blocks.length; i++ ) {
    wp.blocks.unregisterBlockType( unused_blocks[i] );
  }

  // 2. Loop through the `unregister_block_variations` to unregister them from the website
  for ( let i = 0; i < unregister_block_variations.length; i++ ) {
    wp.blocks.unregisterBlockVariation( unregister_block_variations[i].blockName, unregister_block_variations[i].blockVariationName );
  }

  // 3. Loop though `embed_block_variations` to only keep the embeds that are actually going to be used
  for ( let i = 0; i < embed_block_variations.length; i++ ) {
    if ( !keep_embeds.includes( embed_block_variations[i].name ) ) {
      wp.blocks.unregisterBlockVariation( 'core/embed', embed_block_variations[i].name );
    }
  }
} );

Step 2 — Enqueue the editor.js in the Gutenberg editor

Time to enqueue the file to the block editor.

add_action( 'enqueue_block_editor_assets', function() : void {
  wp_enqueue_script( 'editor-overwrites', get_theme_file_uri( 'assets/js/editor.js' ), [ 'wp-blocks', 'wp-dom' ], wp_get_theme()->get( 'Version' ), true );
} );

And you are done. Those unused blocks are now not going to bother you or the user.