register_block_type - no block available in block editor

Question

Fresh/clean install of WordPress 6.1.1 (no 3rd party plugins/themes)- PHP 8.0.x

Using the following code in functions.php of twentytwentytwo theme.

function wrm_testblock() {
  register_block_type('wrm/testblock', array(
    'attributes' => array(
      'title' => array(
        'type' => 'string',
        'default' => 'TEST',
      ),
      'imageUrl' => array(
        'type' => 'string',
        'default' => '',
      ),
      'linkUrl' => array(
        'type' => 'string',
        'default' => '',
      ),
    ),
  ));
}
add_action('init', 'wrm_testblock');

According to any documentation I have read, I would expect to see the new block available in the blocks panel in the editor. But that's not the case. The new block is nowhere. If I do intentionally a mistake -e.g. type the block name with capitals, WP will let me know about my mistake, which means that the function gets called.

I might be missing something obvious that I am not able to see.

Does the block need to have any other attributes in order to become available in the blocks panel? Or do I need anything else to make this work?

All the docs I read and many examples show that I can register a block only by its name and that it should appear as block option in the panel.

Any idea?

Answer 1

The PHP code you shared registers the block on the server side, and this information is passed to the block editor via the REST API.

However, no information about how to display or edit the block is included with this, there is no edit component, no save component, and no JS file referenced. So there is no way to show your block in the block editor with just what you've told it. Using this method still requires that the block be registered in javascript too

It is possible to specify a JS file when using register_block_type but you would then need to register the block in that file and pass it the necessary save and edit parameters. Not only that but the title, icon, block category, are all missing.

The easiest method is probably to use register_block_type_from_metadata and provide it the folder/path of a block.json file. This is a more modern version of what you've used, and it will process relative file paths to load edit and save component JS in the same folder.

This is what the WP Scripts block scaffolding will do. It also auto-generates some PHP that can be used to enqueue the needed scripts for the block automagically, and it sets up React etc and commands/docs to build and do live in browser rebuild/refresh.