Unable to register a block using block.json in Block Editor

The section titled Live rendering in the block editor on the WordPress documentation page, Creating dynamic blocks, has sample code demonstrating how to use server-side rendering.

The documentation page says:

Gutenberg 2.8 added the <ServerSideRender> block which enables rendering to take place on the server using PHP rather than in JavaScript.

Rather than setting edit: null it should be set to a function that renders the <ServerSideRender> element as demonstrated on the WP docs page.


1. registerBlockType

Your client-side call to the registerBlockType function uses the metadata object as the first argument. The WordPress documentation says:

The function takes two arguments, a block name and a block configuration object.

The first argument should be the block name (a string). Your code shows the first argument as metadata, which is block.json (an object). The code should be something like this:

import { registerBlockType } from '@wordpress/blocks';
import metadata from './block.json';
import Edit from './edit.js';

registerBlockType( metadata.name, {
    edit: Edit,
    save: null,
} );

The Edit function can be defined according to the example presented under the title Live rendering in the block editor. And, a function needs to be defined server-side using the render_callback argument of the register_block_type PHP function to render the desired markup.

2. block.json

Make sure the files referenced by block.json properties such as editorScript point to the location of files relative to where block.json is in the directory of compiled/bundled files, not relative to locations among the source files (the src/ and dist/ relative locations can be the same, however).