Your site doesn’t include support for the block... after registering a block

Question

I am getting the message:

Your site doesn’t include support for the "mcm/menu-card-section" block. You can leave this block intact, convert its content to a Custom HTML block, or remove it entirely.

This occurs after saving a block and reloading the page-editor. Apparently wordpress does not pick up on the registered block.

js file

function mcm_register_menu_card_section_block() {
  wp.blocks.registerBlockType( 'mcm/menu-card-section', {
    title: 'Menu Card Section',
    description: 'Add a section of your menu.',
    category: 'mcm-blocks',
    icon: 'list-view',
    edit() {
      return wp.element.createElement( 'div', null, 'Edit function output.' );
    },
    save() {
      let template = wp.element.createElement( 'div', null, 'Save function output.' );

      return template;
    }
  } );
}

window.addEventListener( 'load', () => {
  mcm_register_menu_card_section_block();
});

plugin.php

add_action( 'init', 'register' );
function register() {
wp_register_script(
  'mcm-editor-menu-card-section',
  plugins_url() . '/mcm/blocks/js/menu_card_section.js'
);

register_block_type(
  'mcm/menu-card-section',
  array(
    'editor_script' => 'mcm-editor-menu-card-section',
  )
);
}

Some guesses of what may be going on:

• I made a mistake in the js-file
• The js-file is not executed on time.

Answer 1

The js-file is not executed on time

By the time the DOM load event is executed the block editor has already parsed the post content and at that time the block wasn't yet registered so it tells you that it doesn't exist.

Instead of:

window.addEventListener( 'load', () => {
  mcm_register_menu_card_section_block();
});

try:

wp.domReady(mcm_register_menu_card_section_block);

and in the script registration code don't forget to include the dependencies that the script uses:

wp_register_script(
  'mcm-editor-menu-card-section',
  plugins_url() . '/mcm/blocks/js/menu_card_section.js',
  array(
    'wp-blocks',
    'wp-dom-ready',
    'wp-element',
  )
);

Since the script is enqueued by the register_block_type() function it should actually be in the correct place to begin with and just calling the function directly:

mcm_register_menu_card_section_block();

without domReady should work as well. How ever using domReady leaves a window of opportunity for 3rd party plugins to filter the registration should they need to do so. It's up for debate whether it should be used or not: https://github.com/WordPress/gutenberg/issues/9757