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

Question

I am trying to register a custom block using metadata from block.json. I created the block.json file -

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "title": "Example",
    "name": "example/example-01-basic",
    "category": "text",
    "icon": "universal-access-alt",
    "editorScript": "file:./block.js",
    "render": "file:./block.php"
}

Saved the file in block directory. Called the PHP register_block_type function from functions.php in the root directory -

function register_block() {

   register_block_type(__DIR__ . '/block/block.json');

}
add_action('init', 'register_block');

The block.js JS file being qneueued using editorScriptis also present in theblock` directory -

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

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

I have kept the edit and save methods null since the block is rendering using PHP. Everything seems to be ok but the block is not showing up in Block Editor. What am I doing wrong? Any help is highly appreciated. Bashing my head for a whole day now.

Answer 1

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.

Update

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).