Leading in DevRel with Tilde Thurium 🔗 **Source:** [Leading in DevRel with Tilde Thurium](https://www.youtube.com/watch?v=r_FaqTgtQd4) > [!note]+ Document Notes > tags: > - #wordpress > - #gutenberg > - #blockbindings > - #customblocks > - #excerpt > - #databinding > - #javascript > - #react > - #wpeditor > - #devtools > Author: Ryan Welcher > Source: YouTube > Reference: https://www.youtube.com/watch?v=bMoI72gmmkc > date created: {{date:YYYY-MM-DD}} {{time:HH:mm}} > > # Title: Mastering Custom Block Bindings in WordPress (Excerpt → Block Variations) > <!-- deep-read:sections start --> ## Table of Contents: - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes (Comprehensive, with timestamps)](#-notes-comprehensive-with-timestamps) - [📖 References](#-references) - [🗣️ Paraphrase](#-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB (Diversity-Equity-Inclusion-Belonging) Assessment](#-deib-diversity-equity-inclusion-belonging-assessment) - [✅ Logical validity](#-logical-validity) - [🕵️ DARVO Analysis](#-darvo-analysis) - [🔍 SEO Evaluation](#-seo-evaluation) - [🎯 Conclusion](#-conclusion) ### References: Include a list of sources consulted and cited in the article. --- ## 📝 Summary: The video demonstrates how to **bind a post excerpt** to a **custom block variation** in WordPress using **custom block bindings**. Because UI support for custom sources is limited (as of WP **6.7**), the tutorial shows how to **register a binding source** on both **server** and **client**, wire it to **Paragraph** (and other supported) blocks, and create a **block variation** that preconfigures the binding. It further adds **two-way editing** so changes in the bound block update the post excerpt and vice versa. The end result is a reusable “Bound Excerpt” block you can drop into templates and posts, with dynamic, synchronized content between editor and front end. --- ## 📖 Main Content: This walkthrough focuses on: - **Why custom bindings**: There’s a built-in source for **core/post meta**, but for other data (like clean excerpt handling via context) you can **roll your own source**. - **Server + client registration**: Implement a **getValue** (and later **getValues**) and **setValues** function, keyed by a shared namespace, and require **postId** via **context**. - **Block variation**: Create a **Paragraph**-based variation with preset `metadata.bindings.content.source` so users don’t need to hand-wire bindings. - **Two-way binding**: Read from the **core/editor** data store and **dispatch** to update `excerpt` in real time as users type. - **Permissions**: Provide `canUserEditValue` to gate editability (left `true` in the demo), then **use in templates** for a seamless editorial workflow. ### 🗒️ Notes (Comprehensive, with timestamps) - **👋 Setup & Goal** - [00:00–00:11](https://www.youtube.com/watch?v=bMoI72gmmkc&t=0): Introduces the new “recipe”: **bind the post excerpt to a block** for a more practical demo. - [00:11–00:23](https://www.youtube.com/watch?v=bMoI72gmmkc&t=11): Even though WordPress has a **Post Excerpt** block, this is a clean example of **custom binding sources**. - [00:27–00:38](https://www.youtube.com/watch?v=bMoI72gmmkc&t=27): Scaffolds a plugin **`bound-excerpt`**; activates and starts the build process. - **🧩 Define a custom binding source (server)** - [01:01–01:16](https://www.youtube.com/watch?v=bMoI72gmmkc&t=61): *Concept*: connect a **block attribute** to **some data** via a **binding source**. - [01:11–01:18](https://www.youtube.com/watch?v=bMoI72gmmkc&t=71): As of **WP 6.7**, only **core post meta** is available as a default source; anything else requires a **custom source**. - [01:37–01:49](https://www.youtube.com/watch?v=bMoI72gmmkc&t=97): Registers source via `register_block_binding_source` with a **namespace** (e.g., `block-developer-cookbook/excerpt`), **label** (“Post Excerpt”), and **context** requirement (**postId**). - [01:53–02:24](https://www.youtube.com/watch?v=bMoI72gmmkc&t=113): In the callback, **read `postId` from `block_instance->context`**, fetch the current post, and **return the excerpt** (simple example; can be hardened). - **🔗 Bind a supported block attribute** - [02:36–02:42](https://www.youtube.com/watch?v=bMoI72gmmkc&t=156): Supported (no-UI) binding targets include **Paragraph**, **Heading**, **Image**, **Button**. - [02:53–03:18](https://www.youtube.com/watch?v=bMoI72gmmkc&t=173): In the **code editor**, add **metadata bindings** mapping **`content`** → custom source (shows as the source’s label). - [03:22–03:41](https://www.youtube.com/watch?v=bMoI72gmmkc&t=202): Add a post excerpt, publish, and observe that **backend** is wired; **frontend** will render as expected. - **🧱 UX friction & Block Variation** - [03:53–04:03](https://www.youtube.com/watch?v=bMoI72gmmkc&t=233): Manually wiring a binding each time is **annoying**. - [04:01–04:11](https://www.youtube.com/watch?v=bMoI72gmmkc&t=241): Create a **block variation** for **Paragraph** to **preset** the binding. - [04:13–04:46](https://www.youtube.com/watch?v=bMoI72gmmkc&t=253): Variation uses `metadata.bindings.content.source` matching the server’s source key; `isActive` checks for that binding to ensure the UI shows the **“Bound Excerpt”** flavor. - [04:55–05:12](https://www.youtube.com/watch?v=bMoI72gmmkc&t=295): After build/refresh, the variation **appears and is selectable**; can insert multiple instances. - [05:32–06:04](https://www.youtube.com/watch?v=bMoI72gmmkc&t=332): Frontend still works; editor doesn’t yet show live excerpt (next step). - **🔁 Two-way editor sync (client source registration)** - [06:14–06:47](https://www.youtube.com/watch?v=bMoI72gmmkc&t=374): Register the same **binding source on the client**. **Names must match** server registration exactly. - [06:50–07:26](https://www.youtube.com/watch?v=bMoI72gmmkc&t=410): **`getValues({ select })`** → return `{ content: select('core/editor').getEditedPostAttribute('excerpt') }`. - [07:38–07:59](https://www.youtube.com/watch?v=bMoI72gmmkc&t=458): **`setValues({ dispatch, bindings })`** → `dispatch('core/editor').editPost({ excerpt: bindings.content })`. - [08:04–08:12](https://www.youtube.com/watch?v=bMoI72gmmkc&t=484): Refresh: the **editor block now shows the actual excerpt** value. - [08:12–08:31](https://www.youtube.com/watch?v=bMoI72gmmkc&t=492): **Live edit** in the bound block updates the **post excerpt** (and vice versa) → true **two-way binding**. - **🔐 Permissions & Template usage** - [08:47–09:06](https://www.youtube.com/watch?v=bMoI72gmmkc&t=527): `canUserEditValue` currently returns **true**; production should do **capability checks** (e.g., `edit_post`). - [09:08–09:20](https://www.youtube.com/watch?v=bMoI72gmmkc&t=548): **Use in templates**: treat the variation like a **new block**; drop into post templates for consistent excerpt design & control. - [09:30–09:38](https://www.youtube.com/watch?v=bMoI72gmmkc&t=570): Confirms site is **already using** the freshly built **Bound Excerpt** block. --- ## 📖 References: 1. **Video & transcript** — *The WordPress Developer's Guide to MASTERING Custom Block Bindings* (Ryan Welcher) — https://www.youtube.com/watch?v=bMoI72gmmkc --- ## 🗣️ Paraphrase: 1) **Why custom sources (server-side)** > Original idea: As of 6.7, only core post meta has a built-in source; for other data shapes you’ll build a custom binding source that can access post context and return values like the excerpt. **Paraphrase:** Since WordPress 6.7 ships with just a post-meta binding source, anything beyond that—like a neat, context-aware excerpt feed—requires registering your own binding source that reads `postId` from block context and returns the right value. 2) **Two-way editor updates (client-side)** > Original idea: Register the same source on the client with `getValues` and `setValues` that read from and dispatch to `core/editor`, enabling live synchronization between the block’s content and the post excerpt. **Paraphrase:** Mirror the server registration in the editor, wiring `getValues` to pull `excerpt` from the data store and `setValues` to push changes back with `editPost()`. The result is instant, bi-directional syncing between the bound block and the post’s excerpt. --- ## 📰 Newsletter: **Dev Recipe: A “Bound Excerpt” Block in 10 Minutes 🍳** This week, we’re playing with **custom block bindings** to make your editor feel… telepathic. Ryan Welcher’s latest shows how to register a **custom binding source** that feeds the **post excerpt** directly into a **Paragraph**-based block variation—no UI fiddling, no copy-paste. Add a tiny client script and you get **two-way editing**: type in the block, the **excerpt updates**; tweak the excerpt, the block follows. Perfect for theme authors who want consistent cards, teasers, and listings without brittle templates. 👀 Watch: https://www.youtube.com/watch?v=bMoI72gmmkc 🔧 Highlights: server/client source registration, `core/editor` store, `metadata.bindings.content.source`, and a clean `canUserEditValue` hook for permissions. Got a block you want to bind? Reply with your use-case and we’ll feature the best recipes next issue. --- ## ✅ Action Items: **Reusable alignment prompt for your role (GoDaddy DevRel • OSS • future OSPO):** > “Given the attached article/video, extract how its techniques and takeaways support: > **(A)** open-source advocacy (docs patterns, shareable code, licensing), > **(B)** contributor onboarding (first-timer tasks, mentorship paths, template repos), > **(C)** education (curricula for PHP/JS/HTML/CSS/Git/GitHub; hands-on labs), > **(D)** sustainability & funding (time saved, maintainability metrics, adoption KPIs), > **(E)** OSPO policy (governance for block bindings, security, permissions, telemetry, accessibility), > **(F)** transparency & inclusion (plain-language docs, translated guides, code of conduct alignment). > Deliver: 1) a mapping table from article sections → my strategic goals, 2) a 90-day program plan (workshops, office hours, docs sprints), 3) ‘green-path’ templates (starter plugin, variation boilerplate), 4) measurable outcomes (first-PR success rate, time-to-merge, doc NPS).” **Concrete next steps from this video:** - Publish a **starter plugin**: `wp-bound-excerpt` with server/client registrations + variation. - Author a **teacher’s guide**: “Two-way binding 101” with step-checklists and exercises. - Create **workshop labs**: Bind custom fields, taxonomy, and remote API data to blocks. - Draft an **OSPO guideline**: Permissions review (`canUserEditValue`), context use, and data privacy. - Run a **contributor clinic**: First-timers pair to add a binding source for a new data type. - Add **CI checks** to example repos: Verify namespace match (server/client) and binding schema. --- ## 🧪 Hypotheses: - **H1:** Providing a prebuilt “Bound Excerpt” variation reduces editor setup time by **≥50%** vs. manual excerpt placement. - **H2:** Two-way binding decreases excerpt/content mismatches on the frontend by **≥70%**. - **H3:** A permissions-aware `canUserEditValue` reduces accidental excerpt edits by **≥40%**. - **H4:** Teaching bindings in a hands-on lab increases first-time contributor PR success by **≥25%**. ### 📊 Methodology: - **Design:** A/B test across teams (manual vs. bound variation). - **Data:** WP audit logs, theme repo commits, editor telemetry (optional), QA bug reports. - **Metrics:** Setup time, error rate (mismatch/empty excerpt), rollbacks, PR review cycles, satisfaction (NPS). - **Analysis:** Difference-in-differences on time metrics; proportion tests for error reduction; thematic analysis of PR feedback. ### ❓ Questions: - What binding **schema** covers the most use-cases: only `content`, or multi-attribute (e.g., `content`, `align`, `style`)? - Where should **capability checks** live—server, client, or both—for defense in depth? - How do bindings interact with **pattern overrides** and **sync** in site editor workflows? ### 🔮 Future Research: - Bindings for **custom data stores** (e.g., external APIs with caching/invalidation strategies). - **Localization-aware** excerpts (auto-select locale variant via context). - **Preview performance** under large sites; measure render cost of bound fields in list views. ### 💡 Implications: Robust bindings **simplify editorial UX**, reduce **theme logic duplication**, and encourage **clean separation** between data and presentation—vital for maintainable, funded, and inclusive OSS product ecosystems. OSPOs can standardize safe patterns and **accelerate contributor impact**. --- ## 🧠 Learning Styles Assessment: - **Readability (approx.):** Upper high-school to early college (due to APIs and editor store jargon). 1. **Visual:** Screen/code demos implied. *Improve:* Add **diagrams** of server/client flow; a binding lifecycle chart. 2. **Aural:** Spoken walkthrough. *Improve:* Provide **audio summary** and chaptered timestamps. 3. **Verbal:** Clear commentary but dev jargon. *Improve:* Add **glossary** (context, bindings, store, variation). 4. **Physical:** Hands-on steps. *Improve:* Offer a **downloadable template** and stepwise **checklist**. 5. **Logical:** Strong step sequence. *Improve:* Include a **decision tree** (when to custom-source vs. post meta). 6. **Social:** Solo demo. *Improve:* Link to discussion spaces (Make WP Slack, GitHub Discussions). 7. **Solitary:** Limited reflection. *Improve:* Add **self-audit prompts** (permissions, namespace matching). 8. **Naturalistic:** Not applicable. *Improve:* Tie to **sustainability** via maintainable content reuse. --- ## 📊 Accessibility Assessment: - **Semantics:** Use proper headings in companion docs; identify code as code blocks. - **Alt-text:** Provide descriptive alt-text for node screenshots and code listings. - **Keyboard Navigation:** Ensure editor interactions and plugin UIs are **keyboard-reachable** with visible focus. - **Contrast & Readability:** High contrast for code; support OS **prefers-reduced-motion**. - **Text Resizing:** Confirm layouts remain usable at **200% zoom** and with larger system fonts. - **Captions/Transcript:** Supply accurate captions and a **timestamped transcript** (included here). - **Permissions Messaging:** On denied edits, provide **ARIA-live** feedback and clear error copy. --- ## 🌍 DEIB (Diversity-Equity-Inclusion-Belonging) Assessment: - **Cultural Relevance:** Example is general; *Improve:* Include multilingual and low-bandwidth notes. - **Inclusive Language:** Neutral tone; *Improve:* Expand acronyms; avoid insider shorthand. - **Neurodiversity Support:** *Improve:* Chunk tasks, shorter sentences, optional reduced-complexity path. - **Representation:** Encourage community demos from **diverse contributors**. - **Psychological Safety:** Add **sandbox data** and a “test site only” reminder to prevent live-site anxiety. --- ## ✅ Logical validity: **Strengths (positive reasoning):** 1. **Procedural coherence** ([01:01–09:20](https://www.youtube.com/watch?v=bMoI72gmmkc&t=61)): The server→client→variation sequence forms a **clear causal chain**; each step is testable. - *Why it helps:* Reduces ambiguity; devs can validate at each layer. - *Improve:* Provide minimal code diffs and guard conditions (e.g., missing `postId`). 2. **Consistency requirement** ([06:14–06:47](https://www.youtube.com/watch?v=bMoI72gmmkc&t=374)): Emphasizes **namespace parity** between server and client. - *Why it helps:* Prevents silent failures. - *Improve:* Add a linter/CI check to validate names. 3. **Ethical reasoning** ([08:47–09:06](https://www.youtube.com/watch?v=bMoI72gmmkc&t=527)): Mentions **permission checks** for edits. - *Why it helps:* Minimizes unauthorized changes. - *Improve:* Show a sample `current_user_can( 'edit_post', $post_id )` implementation. **Weaknesses / potential fallacies:** - **Hasty generalization:** Treats this path as *the* pattern; alternate sources (post meta, REST) not compared. - *Fix:* Brief decision guide on when to prefer core post meta vs. custom source. - **Appeal to ignorance (mild):** Leaves `canUserEditValue` `true` by default without showing risks. - *Fix:* Demo a capability-gated variant. - **Red herring (minor):** The presence of a native Excerpt block is acknowledged but not contrasted. - *Fix:* Clarify why binding + variation is superior (e.g., cards, unified styling, two-way edits). **Tone:** Instructional, pragmatic, lightly self-deprecating (typo jokes), focused on developer efficiency. --- ## 🕵️ DARVO Analysis: **Deny:** No denial of allegations; this is a technical tutorial with no adversarial framing ([00:00–09:38](https://www.youtube.com/watch?v=bMoI72gmmkc&t=0)). **Attack:** No personal or institutional attacks; no credibility assaults on alternatives. **Reverse Victim & Offender:** Not present; the content does not portray the author/tooling as a “victim.” **Notes:** Superlatives are absent; guidance is factual and process-oriented. No DARVO cues detected. --- ### 🔍 SEO Evaluation: 1. **Keywords:** wordpress block bindings, custom block binding, bound excerpt, gutenberg block variation, two-way binding, core editor store. 2. **Meta Description (150–160):** “Create a ‘Bound Excerpt’ block in WordPress using custom block bindings and a Paragraph variation—complete with two-way editor sync and permissions.” 3. **Title Tag (≤60):** “WordPress Custom Block Bindings: Build a Bound Excerpt Block” 4. **Headers:** H2 sections for Setup, Server Registration, Client Registration, Variation, Permissions, Testing. 5. **Length:** Aim **1,500–2,000 words** with code snippets and screenshots. 6. **Links:** Internal (theme dev docs, editor data store guides); External (WP developer handbook pages). 7. **URL:** `/wordpress-custom-block-bindings-bound-excerpt` 8. **Images:** Add code and editor screenshots with descriptive **alt-text**; optimize file sizes. 9. **Mobile:** Ensure code blocks wrap and can horizontally scroll. 10. **Engagement:** Provide a **download starter plugin** and **Try it in a Pattern** call-to-action. 11. **Schema:** Use **HowTo** + **VideoObject** schema with timestamped `clip` entries. 12. **Social:** Open Graph image showing the block variation badge; Twitter Card summary. --- ## 🎯 Conclusion: This recipe shows a clean, reproducible way to **bind post data to blocks** with **two-way synchronization**—registered on both server and client—and to ship it as a **ready-to-use block variation**. It simplifies editorial workflows, reduces template brittleness, and establishes a maintainable pattern that OSPOs and product teams can document, teach, and scale across themes and blocks. <!-- deep-read:sections end -->