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? Pending Review
Asked on Mar 20, 2026
Answer
Creating a custom Gutenberg block with dynamic content involves using the WordPress Block API and potentially server-side rendering for dynamic data. This process requires registering a block and defining its behavior in both JavaScript and PHP.
<!-- BEGIN COPY / PASTE -->
// JavaScript: Register the block
wp.blocks.registerBlockType('my-plugin/dynamic-block', {
title: 'Dynamic Block',
icon: 'smiley',
category: 'widgets',
edit: function(props) {
return wp.element.createElement('p', {}, 'Dynamic content will appear here.');
},
save: function() {
return null; // Server-side rendering
}
});
// PHP: Server-side rendering
function my_dynamic_block_render_callback($attributes) {
// Fetch dynamic content
$dynamic_content = get_some_dynamic_content();
return '<p>' . esc_html($dynamic_content) . '</p>';
}
register_block_type('my-plugin/dynamic-block', array(
'render_callback' => 'my_dynamic_block_render_callback',
));
<!-- END COPY / PASTE -->Additional Comment:
- Ensure you enqueue the block's JavaScript file in your theme or plugin using "wp_enqueue_script".
- Use "register_block_type" in PHP to handle server-side rendering for dynamic content.
- Dynamic content can be fetched from the database, an API, or any other source within the PHP callback.
- Consider using "wp_localize_script" to pass PHP data to your block's JavaScript if needed.
Recommended Links:
