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
|
2 Answers
Reset to default -2Since 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.
null
github/WordPress/gutenberg-examples/blob/… I think it has to return something. – admcfajn Commented Jan 16, 2019 at 0:56enqueue_block_editor_assets
action which, might be the issue? – Alvaro Commented Jan 16, 2019 at 1:14