3

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;
    },
} );
4
  • Your save function is returning null github.com/WordPress/gutenberg-examples/blob/… I think it has to return something.
    – admcfajn
    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
    Jan 16, 2019 at 1:14
  • 2
    Returning null is correct on a Dynamic Block as the rendering is handled by PHP
    – Welcher
    Jul 19, 2019 at 17:20
  • did you find a solution?
    – Guerrilla
    Nov 24, 2020 at 21:23

2 Answers 2

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

-3

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.

1
  • 1
    The return null is specifically implemented to ignore validation errors and fallback to server side rendering using the render_callback attribute.
    – Jebble
    Jul 9, 2019 at 9:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.