Creating Static and Dynamic Blocks in Your Custom Plugin (with Markup Examples)

Once you’ve scaffolded your plugin to support multiple blocks, the next step is to understand the difference between static and dynamic blocks — and how to use each effectively in your custom WordPress development workflow.

📦 Static Blocks

A static block is rendered entirely in JavaScript — what you build in edit.js and save.js is exactly what ends up in the page content.

Example folder: /blocks/alert-box/

// block.json
{
  "apiVersion": 2,
  "name": "myplugin/alert-box",
  "title": "Alert Box",
  "category": "widgets",
  "icon": "warning",
  "editorScript": "file:./index.js"
}

// edit.js
import { RichText } from '@wordpress/block-editor';

export default function Edit({ attributes, setAttributes }) {
  return (
    <div className="alert-box">
      <RichText
        tagName="p"
        value={attributes.message}
        onChange={(message) => setAttributes({ message })}
        placeholder="Enter your alert message..."
      />
    </div>
  );
}

// save.js
import { RichText } from '@wordpress/block-editor';

export default function Save({ attributes }) {
  return (
    <div className="alert-box">
      <RichText.Content tagName="p" value={attributes.message} />
    </div>
  );
}

🧠 Dynamic Blocks

Dynamic blocks render their output via PHP instead of saving HTML in post content. They are ideal for content that changes, like post lists, data from APIs, or form results.

Example folder: /blocks/latest-posts/

// block.json
{
  "apiVersion": 2,
  "name": "myplugin/latest-posts",
  "title": "Latest Posts",
  "category": "widgets",
  "icon": "admin-post",
  "editorScript": "file:./index.js",
  "render": "file:./render.php"
}

// render.php
<?php
$recent_posts = wp_get_recent_posts([
  'numberposts' => 3,
  'post_status' => 'publish',
]);

if ( ! empty( $recent_posts ) ) {
  echo '<ul class="latest-posts">';
  foreach ( $recent_posts as $post ) {
    printf(
      '<li><a href="%s">%s</a></li>',
      esc_url( get_permalink( $post['ID'] ) ),
      esc_html( $post['post_title'] )
    );
  }
  echo '</ul>';
}

🧪 When to Use Static vs. Dynamic

• Static: Fixed layout blocks like buttons, text boxes, accordions
• Dynamic: Blocks with real-time data: recent posts, forms, product lists

📂 Organizing Both in One Plugin

You can store static and dynamic blocks in the same plugin. Use the same register_block_type loop from the previous article to automatically load all block.json files — WordPress will know when to call the render file.

🚀 Next Steps

Now that you know how to structure and register both static and dynamic blocks, your plugin can support almost any use case — from content to logic. Want to go deeper into filters, attributes, or REST integration next?