WordPress Q&As Logo
WordPress Q&As Part of the Q&A Network
Real Questions. Clear Answers.
Ask any question about WordPress here... and get an instant response.
Q&A Logo Q&A Logo

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.
✅ Answered with WordPress best practices.

← Back to All Questions

Q&A Network
The Q&A Network
WordPress
Ask Questions / Get Answers about WordPress!
AI Writing
Ask Questions / Get Answers about AI Writing!
AI
Ask Questions / Get Answers about AI!
Video Editing
Ask Questions / Get Answers about Video Editing!
AI Business
Ask Questions / Get Answers about AI Business!
HTML
Ask Questions / Get Answers about HTML!
AI Marketing
Ask Questions / Get Answers about AI Marketing!
Quantum
Ask Questions / Get Answers about Quantum Computing!
Bootstrap
Ask Questions / Get Answers about Bootstrap!
JavaScript
Ask Questions / Get Answers about JavaScript!
MobileDev
Ask Questions / Get Answers about Mobile Developement!
UI/UX Design
Ask Questions / Get Answers about UI/UX Design!
CSS
Ask Questions / Get Answers about CSS!
Graphic Design
Ask Questions / Get Answers about Graphic Design!
AI Audio
Ask Questions / Get Answers about AI Audio!
Data Science
Ask Questions / Get Answers about Data Science!
IoT
Ask Questions / Get Answers about IoT!
Analytics
Ask Questions / Get Answers about Analytics!
VR & AR
Ask Questions / Get Answers about VR & AR!
DevOps
Ask Questions / Get Answers about DevOps!
Performance
Ask Questions / Get Answers about Web Vitals!
Photography
Ask Questions / Get Answers about Photography!
Tailwind
Ask Questions / Get Answers about Tailwind!
Creative Writing
Ask Questions / Get Answers about Creative Writing!
Film Production
Ask Questions / Get Answers about Film Production!
Web Languages
Ask Questions / Get Answers about Web Languages!
AI Education
Ask Questions / Get Answers about AI Education!
AI Video
Ask Questions / Get Answers about AI Video!
Web Hosting
Ask Questions / Get Answers about Hosting!
Cloud Computing
Ask Questions / Get Answers about Cloud Computing!
Chatbots
Ask Questions / Get Answers about Chatbots!
SEO
Ask Questions / Get Answers about SEO!
AI Coding
Ask Questions / Get Answers about AI Coding!
Security
Ask Questions / Get Answers about Website Security!
AI Ethics
Ask Questions / Get Answers about AI Ethics!
Cybersecurity
Ask Questions / Get Answers about Cybersecurity!
AI Images
Ask Questions / Get Answers about AI Images!
AI Design
Ask Questions / Get Answers about AI Design!
Monetization
Ask Questions / Get Answers about Ad & Monetization!
Networking
Ask Questions / Get Answers about Networking!
Web Development
Ask Questions / Get Answers about Web Development!
Robotics
Ask Questions / Get Answers about Robotics!