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 Mar 28, 2026
Answer
Creating a custom Gutenberg block with dynamic content involves using the WordPress Block Editor API and PHP to fetch and display data dynamically. This process includes registering the block in JavaScript and using PHP to render the block's content.
<!-- BEGIN COPY / PASTE -->
// JavaScript: Register the block
wp.blocks.registerBlockType('myplugin/dynamic-block', {
title: 'Dynamic Block',
category: 'widgets',
edit: function() {
return wp.element.createElement('p', null, 'Dynamic Content Block');
},
save: function() {
return null; // Rendered in PHP
}
});
// PHP: Render the block content
function myplugin_dynamic_block_render_callback() {
$dynamic_content = get_some_dynamic_data(); // Fetch dynamic data
return '<div>' . esc_html($dynamic_content) . '</div>';
}
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's functions.php.
- Use "wp.element.createElement" to define the block's edit interface in JavaScript.
- The "render_callback" in PHP allows you to fetch and render dynamic content when the block is displayed on the front end.
- Replace "get_some_dynamic_data()" with your actual data-fetching logic.
Recommended Links:
