Snippet: Dynamic Button Block Using Block Binding API

Use Case

“I want to have a button in the block editor that auto-uses a link (like a demo URL or donation link) from the post meta, without hardcoding it or writing custom PHP render logic.”

Block Button with Dynamic URL based on Post Meta

How to Use Block Markup Code
  1. Open List View
  2. Copy this block markup code
  3. Paste on that list view
  4. Save
<!-- wp:group {"className":"demo-button-wrapper"} -->
<div class="wp-block-group demo-button-wrapper">

  <!-- wp:buttons -->
  <div class="wp-block-buttons">
    <!-- wp:button {"backgroundColor":"custom-white",
    "metadata":{
      "bindings":{
        "url":{"source":"core/post-meta","args":{"key":"demo_url"}
      }
     }
   }} -->
    <div class="wp-block-button">
      <a class="wp-block-button__link has-custom-white-background-color has-background wp-element-button" target="_blank">Lihat Demo</a>
    </div>
    <!-- /wp:button -->
  </div>
  <!-- /wp:buttons -->

</div>
<!-- /wp:group -->
How to Use Snippet
  1. Install FluentSnippet Plugin
  2. Add new snippet
  3. Paste this code to that snippet content
  4. Save
add_action( 'init', 'lokuswp_register_binding_meta' );
function lokuswp_register_binding_meta() {
    register_meta( 'post', 'demo_url', [
        'show_in_rest' => true,
        'single' => true,
        'type' => 'string',
        'sanitize_callback' => 'esc_url_raw'
    ]);
};