Ask any question about WordPress here... and get an instant response.
How can I create a custom Gutenberg block with dynamic content?
Asked on Nov 25, 2025
Answer
Creating a custom Gutenberg block with dynamic content involves using the WordPress Block Editor API and server-side rendering to fetch and display dynamic data. This process requires both JavaScript for the block editor and PHP for dynamic content handling.
<!-- BEGIN COPY / PASTE -->
// JavaScript: Register the block
wp.blocks.registerBlockType('my-plugin/dynamic-block', {
title: 'Dynamic Block',
icon: 'smiley',
category: 'widgets',
edit: function() {
return wp.element.createElement('p', null, 'Dynamic Content Block');
},
save: function() {
return null; // Server-side rendering
}
});
// PHP: Render the block with dynamic content
function render_dynamic_block() {
$dynamic_content = get_dynamic_data(); // Custom function to fetch data
return '<div>' . esc_html($dynamic_content) . '</div>';
}
register_block_type('my-plugin/dynamic-block', array(
'render_callback' => 'render_dynamic_block',
));
<!-- END COPY / PASTE -->Additional Comment:
- Ensure you have a basic understanding of JavaScript and PHP to implement this solution.
- Use the "wp.blocks.registerBlockType" function to define the block in JavaScript.
- Implement a PHP function to fetch and return dynamic data, using "register_block_type" with a "render_callback".
- Consider using WordPress REST API or custom queries to retrieve dynamic content.
Recommended Links:
