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 30, 2026
Answer
Creating a custom Gutenberg block with dynamic content involves registering a block and using server-side rendering to fetch and display data. This process requires both JavaScript for the block editor and PHP for the dynamic 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', {}, 'Dynamic Content Placeholder');
},
save: function() {
return null; // Server-side rendering
}
});
// PHP: Render the block content
function render_dynamic_block() {
$content = '<p>' . get_dynamic_content() . '</p>';
return $content;
}
register_block_type('myplugin/dynamic-block', array(
'render_callback' => 'render_dynamic_block',
));
function get_dynamic_content() {
// Fetch and return dynamic content here
return 'This is dynamic content!';
}
<!-- END COPY / PASTE -->Additional Comment:
- Ensure you enqueue your block's JavaScript using the `enqueue_block_editor_assets` hook.
- Use `wp.element.createElement` to define the block's edit function for the editor interface.
- Server-side rendering is achieved by returning `null` in the `save` function and using a `render_callback` in PHP.
- Dynamic content can be fetched from the database, external APIs, or other sources within the `get_dynamic_content` function.
Recommended Links:
