I tried everything I found online. The backend appears, including dynamic segments (withSelect, etc). But the simplest 'render-callback' doesn't appear on the frontend.

plugin.php

/**
 * Plugin Name: My Dynamic Block
 */

function my_plugin_render_dynamic_block( ) {
    return '<h1>Sample Block</h1>';
}

function register_dynamic_block() {
    wp_register_script(
        'dynamic-block',
        plugins_url( '/dist/block.js ', __FILE__),
        array( 'wp-blocks', 'wp-element', 'wp-editor' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'dist/block.js' )
    );

    register_block_type(
        'my-plugin/dynamic-block',
        [
            'editor_script' => 'dynamic-block',
            'render_callback' => 'my_plugin_render_dynamic_block',
        ]
    );
}
add_action('init', 'register_dynamic_block');

block.js

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;

registerBlockType( 'my-plugin/dynamic-block', {
    title: 'My Dynamic Block',
    icon: 'megaphone',
    category: 'widgets',

    edit({attributes}) {
        return (
            <div>Content</div>
        );
    },

    save() {
        return null;
    },
} );

I tried everything I found online. The backend appears, including dynamic segments (withSelect, etc). But the simplest 'render-callback' doesn't appear on the frontend.

plugin.php

/**
 * Plugin Name: My Dynamic Block
 */

function my_plugin_render_dynamic_block( ) {
    return '<h1>Sample Block</h1>';
}

function register_dynamic_block() {
    wp_register_script(
        'dynamic-block',
        plugins_url( '/dist/block.js ', __FILE__),
        array( 'wp-blocks', 'wp-element', 'wp-editor' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'dist/block.js' )
    );

    register_block_type(
        'my-plugin/dynamic-block',
        [
            'editor_script' => 'dynamic-block',
            'render_callback' => 'my_plugin_render_dynamic_block',
        ]
    );
}
add_action('init', 'register_dynamic_block');

block.js

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;

registerBlockType( 'my-plugin/dynamic-block', {
    title: 'My Dynamic Block',
    icon: 'megaphone',
    category: 'widgets',

    edit({attributes}) {
        return (
            <div>Content</div>
        );
    },

    save() {
        return null;
    },
} );

• block-editor

• Your save function is returning null github/WordPress/gutenberg-examples/blob/… I think it has to return something. – admcfajn Commented Jan 16, 2019 at 0:56
• I just tested the code and it works as expected. The only difference in what I tried is adding the js in a script enqueued in the enqueue_block_editor_assets action which, might be the issue? – Alvaro Commented Jan 16, 2019 at 1:14
• 2 Returning null is correct on a Dynamic Block as the rendering is handled by PHP – Welcher Commented Jul 19, 2019 at 17:20
• did you find a solution? – Guerrilla Commented Nov 24, 2020 at 21:23

2 Answers 2

Since you're making a dynamic block you don't need to register the block in JavaScript. Take a look at the Latest Posts block in Core to see how they do it.

Even if you do manage to render frontend with null return, On the next page reload you'll get block validation error. Because your html structure on edit function will not be matching up with save function. So

Instead of

    save() {
        return null;
    },

Try

     save() {
         return (
           <div>Content</div>
       );
    },

I hope this helps.