Skip to content

Pods + Block Binding API Documentation? #7502

@jhmonroe

Description

@jhmonroe

Thank you so much for your work on PODS! Excited to test out PODS with the Block Bindings API! This is very exciting to be able to manage CPT/fields with Pods, but pipe the content into query loops etc nearly invisibly without using Pods blocks or writing any html/templates for Pods—and so it's all core-block-based and inherits all the global styles easily. (big FSE/site editor/block theme enthusiast here and always trying to find the more FSE way to do things)

Is there any other Documentation on using PODS with the Block Bindings API?

All I can find are the brief mentions here:
https://pods.io/2024/03/25/pods-3-2-feature-release-meta-revisions-and-block-bindings/

I followed your brief instructions from that link:

  • enable “Register meta fields” in your Pods Admin > Settings
  • set your Pod to show it’s REST API fields in the “Meta” location instead of Object.
  • Specify your source as pods/bindings-field [is this a placeholder?]
  • then just pass the same arguments you would pass for a normal [pods] shortcode or block.
    ^^^ Can you please elaborate on these last two or give example?
Image Image

IS THIS NECESSARY BELOW OR FOR SOMETHING ELSE?

Image

I try using pods/link (my field name) in the block binding template language in a FSE block theme and it breaks the button block. Then realized you literally meant pods/binding-field not as a placeholder.

The following worked. key/value pairs of field + link was another important thing different from the standard arg of key.

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"metadata":{"bindings":{"url":{"source":"pods/bindings-field","args":{"field":"link"}},"text":{"source":"pods/bindings-field","args":{"field":"link"}}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

This also worked great. Pulls in the link field, but honors custom text on the block (since it's a button in a query loop and they will all say the same thing), and the linkTarget is hardcoded.

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"metadata":{"bindings":{"url":{"source":"pods/bindings-field","args":{"field":"link"}}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" target="_blank" rel="noreferrer noopener">Learn more</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

PS: I only figured this out by trying some of Carolina's tutorial, comparing to the official WP Block Bindings docs, and chatting with Claude about why it wasn't working :-)
https://fullsiteediting.com/lessons/block-bindings-api/
https://developer.wordpress.org/block-editor/reference-guides/block-api/block-bindings/

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions