最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

Can't get dynamic Gutenberg block to render on the frontend

programmeradmin4浏览0评论

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;
    },
} );
Share Improve this question asked Jan 15, 2019 at 23:19 PhilippPhilipp 311 silver badge2 bronze badges 4
  • 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
Add a comment  | 

2 Answers 2

Reset to default -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.

发布评论

评论列表(0)

  1. 暂无评论