How can I create a custom Gutenberg block with dynamic content?
Asked on Oct 17, 2025
Answer
Creating a custom Gutenberg block with dynamic content involves registering a block in WordPress and using PHP to render dynamic data. This process requires both JavaScript for the block editor and PHP for server-side rendering.
<!-- 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 Block');
},
save: function() {
return null; // Server-side rendering
}
});
// PHP: Render the block content
function myplugin_dynamic_block_callback($attributes) {
$dynamic_content = get_option('my_dynamic_content'); // Example dynamic data
return '<p>' . esc_html($dynamic_content) . '</p>';
}
register_block_type('myplugin/dynamic-block', array(
'render_callback' => 'myplugin_dynamic_block_callback',
));
<!-- END COPY / PASTE -->Additional Comment:
- Ensure you enqueue your block's JavaScript using "wp_enqueue_script" in your plugin or theme's functions.php file.
- Dynamic content is typically fetched from the database or an external API.
- Use "register_block_type" in PHP to define the server-side rendering callback.
- Testing your block in a development environment is recommended before deploying it live.
Recommended Links: