The Block Developer Cookbook: WCEH 2025 Edition  ## Metadata - Author: [[WordPress.tv]] - Full Title: The Block Developer Cookbook: WCEH 2025 Edition - Category: #articles - Document Note: --- tags: [WordPress, Block-Development, Interactivity-API, Block-Bindings, Developer-Education] author: Ryan Welcher source: WordPress.tv reference: [https://wordpress.tv/2025/11/10/the-block-developer-cookbook-wceh-2025-edition/] date created: 2025-11-10 09:00 --- # 🏷️ Title: The Block Developer Cookbook WCEH 2025 Edition ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 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 Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [Block Developer Cookbook Website](https://blockdevelopercookbook.com) - [WordPress.tv Video](https://wordpress.tv/2025/11/10/the-block-developer-cookbook-wceh-2025-edition/) - [VideoPress Direct Link](https://videopress.com/v/YjDmlTRI) ## 📝 Summary - **What happened:** Ryan Welcher delivered an interactive workshop on WordPress block development at WordCamp Edmonton-Hart 2025, showcasing practical recipes from the Block Developer Cookbook. The session focused on live-coding demonstrations of WordPress's latest features including the Interactivity API and Block Bindings API. - **Why it matters:** This workshop provides practical, production-ready code examples that WordPress developers can immediately implement. With the Interactivity API now stable and actively used by major WordPress projects (WooCommerce checkout, 10up projects), understanding these patterns is essential for modern WordPress development. - **Key stakeholders:** WordPress block developers, theme developers, plugin developers, and anyone building custom interactive WordPress experiences. Particularly relevant for developers transitioning from older WordPress development patterns to the modern block-based architecture. - **Risks and tradeoffs:** The Interactivity API requires ES modules support, which means careful consideration of package dependencies and build processes. Developers need to understand the limitations (can't import certain WordPress packages directly) and workarounds (accessing via wp global object). - **Bottom line:** The Interactivity API and Block Bindings API are production-ready and offer powerful ways to build interactive WordPress blocks without React. The cookbook approach makes these advanced features accessible through practical, real-world examples. ## 📖 Main Content ### Core Concepts Covered **Block Developer Cookbook Approach** The Block Developer Cookbook is an evolving workshop format that Ryan Welcher has delivered at multiple WordPress flagship events throughout 2025. The format traditionally involves audience voting on which "recipes" (code examples) to explore, followed by live coding demonstrations. This Ottawa edition adapted the format due to time constraints, presenting multiple examples sequentially rather than through voting. **Interactivity API** The Interactivity API represents WordPress's native solution for adding interactivity to blocks without requiring React on the frontend. Key characteristics: - Uses directives like `data-wp-interactive`, `data-wp-on--click`, and `data-wp-context` - Provides state management through contexts - Enables two-way data binding between HTML and JavaScript - Production-ready and actively used by WooCommerce and major WordPress agencies - Requires ES modules support for proper functionality **Block Bindings API** The Block Bindings API allows developers to connect block attributes to external data sources. This enables: - Dynamic content population without custom PHP templates - Connection to post meta, taxonomy terms, or custom data sources - Integration with block patterns for reusable dynamic components - Server-side data fetching with client-side display **Development Environment** Ryan demonstrated using: - Local development environment (referenced in repository) - wp-scripts for build tooling - WordPress Playground for quick demonstrations and testing - ES modules build process **Key Technical Patterns** 1. **Interactivity Directive Structure:** - `data-wp-interactive` defines the namespace - `data-wp-context` provides state storage - `data-wp-on--[event]` handles event listeners - Actions defined in separate JavaScript files 2. **Package Import Limitations:** - Can't directly import WordPress packages in Interactivity API context - Must access via `wp` global object (e.g., `wp.apiFetch`) - Requires manual script enqueueing for dependencies - ES modules requirement means packages must support ES module bundling 3. **Block Registration:** - Server-side registration with PHP - Block.json for metadata and configuration - Separate view.js for frontend interactivity - Edit.js for editor experience ### Examples Demonstrated **Example 1: Toggle Functionality** Basic demonstration of click handlers and state management using the Interactivity API. Shows how to toggle visibility of content sections with minimal JavaScript. **Example 2: Product Card with Reviews** More complex example combining: - Block patterns for layout - Block Bindings for dynamic data - Interactivity API for user interactions - Multiple data sources (post meta, taxonomies) **Example 3: Fetching External Data** Demonstrated fetching data from external APIs and displaying in blocks, though acknowledged challenges with package imports and provided workarounds using the wp global object. ### Production Readiness Ryan emphasized multiple times that the Interactivity API is stable and ready for production use: - WooCommerce uses it for all checkout functionality - 10up (major WordPress agency) uses it extensively - Multiple production sites already deployed - API continues to evolve with new directives being added ### Challenges and Solutions **Challenge:** Can't import certain WordPress packages directly in Interactivity API **Solution:** Access packages via `wp` global object and manually enqueue dependencies **Challenge:** Learning curve for developers familiar with jQuery or older WordPress patterns **Solution:** Cookbook provides practical, copy-paste-ready examples with explanations **Challenge:** Documentation scattered across multiple sources **Solution:** Block Developer Cookbook consolidates patterns into single resource with working examples ## 🗒️ Notes #### ⏱️ [00:00:07](https://videopress.com/v/YjDmlTRI?at=7) Introduction - Introduction by MC announcing Ryan Welcher's workshop - Block Developer Cookbook returning to Canada (Ottawa debut) - Interactive workshop format where attendees typically vote on recipes #### ⏱️ [00:00:44](https://videopress.com/v/YjDmlTRI?at=44) Workshop Format Change - Ryan explains format modification for shorter timeline - Instead of voting process, will cover multiple examples sequentially - Audio check and room setup adjustments #### ⏱️ [00:01:04](https://videopress.com/v/YjDmlTRI?at=64) Block Developer Cookbook Overview - Workshop delivered at every flagship WordCamp in 2025 - Interactive format with live coding and inevitable "horrible typos" - Repository available for audience to follow along - Local development environment included in repo #### ⏱️ [00:01:18](https://videopress.com/v/YjDmlTRI?at=78) Format Explanation - Traditional format: create account, vote on recipes, live code together - Expected: multiple build breaks and typos (part of the learning experience) - Modified approach for time constraints #### ⏱️ [00:01:46](https://videopress.com/v/YjDmlTRI?at=106) Repository and Development Environment - Repository link provided for audience follow-along - Local development environment included - Same repository Ryan is working from during presentation #### ⏱️ [00:02:18](https://videopress.com/v/YjDmlTRI?at=13 - Summary: The Block Developer Cookbook has travelled the world and is finally coming to its home country of Canada to make its debut in Ottawa, Ontario. In this fully interactive workshop, attendees will vot… - URL: https://wordpress.tv/2025/11/10/the-block-developer-cookbook-wceh-2025-edition/ Some content could not be imported from the original document. [View content ↗](https://video.wordpress.com/embed/YjDmlTRI?hd=1&autoPlay=0&permalink=1&loop=0&preloadContent=metadata&muted=0&playsinline=0&controls=1&cover=1) The Block Developer Cookbook has travelled the world and is finally coming to its home country of Canada to make its debut in Ottawa, Ontario. In this fully interactive workshop, attendees will vote on which recipes to explore, and we’ll work through them together. Each iteration of this workshop expands with new recipes and content, leveraging the latest features in WordPress, including: Block Bindings API, Plugin Template Registration API, Preview Options API, Interactivity API, New in WordPress 6.8: Performantly loading multiple blocks in a single plugin, Using third-party API data in a custom block, Creating a block variation bound to the post excerpt, Registering a custom post type with its own templatern, Building a dark/light mode toggle that saves to user meta, Developing a gallery slider with the Interactivity API, Using filters and the HTML Tag Processor to extend core blocks, Designing a custom Image block style, Adding a fade-in effect to core blocks, Restricting publishing based on word count, Customizing the @wordpress/scripts build process, Connecting a block to custom fields, Implementing front-end JavaScript for blocks, Using the data layer in a block, Creating a custom format, Working with block transforms, And more. Join us to expand your block development skills with hands-on guidance and real-world examples. [Subtitle this video →](https://wordpress.tv/subtitle/?video=136016) [](https://creativecommons.org/licenses/by-sa/4.0/)[Creative Commons License](https://creativecommons.org/licenses/by-sa/4.0/), The Block Developer Cookbook: WCEH 2025 Edition, WordPress.tv, 01k9r383ns03fr895byqvn956g.