-
-
Notifications
You must be signed in to change notification settings - Fork 271
Description
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?
IS THIS NECESSARY BELOW OR FOR SOMETHING ELSE?
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/