Ask any question about WordPress here... and get an instant response.
Post this Question & Answer:
How can I create a custom Gutenberg block with dynamic content?
Asked on Jan 29, 2026
Answer
Creating a custom Gutenberg block with dynamic content involves registering a block in WordPress and using JavaScript to define its behavior. You'll also need to use PHP to handle dynamic content rendering on the server side.
<!-- BEGIN COPY / PASTE -->
// JavaScript: Register the block
wp.blocks.registerBlockType('myplugin/dynamic-block', {
title: 'Dynamic Block',
icon: 'smiley',
category: 'widgets',
edit: function() {
return wp.element.createElement('p', {}, 'Dynamic content will appear here.');
},
save: function() {
return null; // Dynamic content is rendered server-side
}
});
// PHP: Render the block with dynamic content
function myplugin_dynamic_block_render_callback() {
return '<p>' . esc_html( get_option('my_dynamic_content') ) . '</p>';
}
register_block_type('myplugin/dynamic-block', array(
'render_callback' => 'myplugin_dynamic_block_render_callback',
));
<!-- END COPY / PASTE -->Additional Comment:
- Ensure you enqueue your block's JavaScript file using "wp_enqueue_script" in your plugin or theme.
- Use "wp.element.createElement" in the edit function to define the block's appearance in the editor.
- The "save" function returns null to indicate that rendering is handled server-side.
- Dynamic content is typically fetched or processed in the PHP callback function.
Recommended Links:
