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 Jan 05, 2026
Answer
Creating a custom Gutenberg block with dynamic content involves using the WordPress Block Editor API and PHP to render content dynamically. 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('my-plugin/dynamic-block', {
title: 'Dynamic Block',
category: 'widgets',
edit: function() {
return wp.element.createElement('p', null, 'Dynamic Content');
},
save: function() {
return null; // Server-side rendering
}
});
// PHP: Render the block content
function my_dynamic_block_render_callback() {
return '<p>' . esc_html( get_option('my_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 your block's JavaScript and CSS files using the "enqueue_block_editor_assets" action hook.
- Use the "render_callback" function in PHP to fetch and display dynamic data, such as options or custom database queries.
- Consider using the REST API to fetch dynamic data if it involves external sources or complex queries.
Recommended Links:
