Testing WordPress 6 9 Block Bindings Updates

Testing WordPress 6 9 Block Bindings Updates 🔗 **Source:** [Testing WordPress 6 9 Block Bindings Updates](https://www.youtube.com/watch?v=iuvs7hm0LRI) > [!note]+ Document Notes > tags: [wordpress, block-bindings, gutenberg-editor] > author: WP Builds > source: YouTube > reference: https://www.youtube.com/watch?v=iuvs7hm0LRI > date created: 2024-12-18 14:30 > > # 🏷️ Title: Testing WordPress 6.9 Block Bindings Updates >  ## 🧰 Action Inbox - [H1] Test date block variations with custom dates — explore post date vs modified date functionality #wordpress-testing - [H2] Create custom image caption source plugin — implement JavaScript registration for editor UI #plugin-development - [H3] Build comprehensive block bindings demo — combine multiple custom sources in single project #block-bindings ## 🧭 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 - [WordPress 6.9 Block Bindings Documentation](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-bindings/) - [Block Bindings GitHub Tracking Issue](https://github.com/WordPress/gutenberg/issues/56939) ## 📝 Summary - Live testing of WordPress 6.9 block bindings improvements including date block variations and image caption binding - Demonstrates new custom source registration capabilities with get_field_list method for editor UI integration - Shows enhanced date block functionality allowing arbitrary date selection beyond post/modified dates - Explores challenges with PHP-based custom sources versus JavaScript implementation - Bottom line: Block bindings are becoming more user-friendly but still require technical implementation knowledge ## 📖 Main Content WordPress 6.9 introduces significant improvements to the block bindings API, making it more accessible to content creators while expanding developer capabilities. The date block now supports three variations: post date, modified date, and arbitrary custom dates - a major improvement from the previous binary choice between default and modified display types. The image block gains caption binding support, allowing developers to connect image captions to custom data sources. However, implementation requires manual markup editing and proper source registration, highlighting the technical gap between developer capabilities and user experience. Custom source registration has been enhanced with a new get_field_list method that enables UI integration directly in the block editor. This allows sources to appear in dropdown menus rather than requiring manual code editing, representing a significant usability improvement. The filter system has been refined with block-type-specific attribute filtering, giving developers granular control over which attributes can be bound for specific block types. ## 🗒️ Notes #### ⏱️ [00:00](https://www.youtube.com/watch?v=iuvs7hm0LRI?t=0) — [H1] Stream Setup and WordPress 6.9 Overview - Key idea: Testing WordPress 6.9 block bindings improvements with focus on date and image blocks - Evidence: "I want to focus specifically today on block bindings updates" #### ⏱️ [03:45](https://www.youtube.com/watch?v=iuvs7hm0LRI?t=225) — [H2] Date Block Binding Improvements - Key idea: Date block now accepts manually set dates and has better post date handling - Evidence: "Date block has block binding support... make the date block accept manually set date" #### ⏱️ [08:30](https://www.youtube.com/watch?v=iuvs7hm0LRI?t=510) — [H3] Testing Date Block Variations in WordPress 6.9 - Key idea: Creating test post with current date and modified date blocks to compare functionality - Evidence: "Let's add date and modify date blocks... this will be then the modified date block" #### ⏱️ [15:20](https://www.youtube.com/watch?v=iuvs7hm0LRI?t=920) — [H2] Block Bindings Markup Structure - Key idea: Date blocks now use block bindings with core post data sources instead of display type - Evidence: "It's using block bindings. It's the core post data modified field" #### ⏱️ [18:45](https://www.youtube.com/watch?v=iuvs7hm0LRI?t=1125) — [H3] Comparing WordPress 6.8 vs 6.9 Date Functionality - Key idea: Version 6.8 only had display type modified option, 6.9 adds block binding sources - Evidence: "This is display type modified... whereas now I have this modify date option up here" #### ⏱️ [22:10](https://www.youtube.com/watch?v=iuvs7hm0LRI?t=1330) — [H2] Creating Custom Block Binding Source - Key idea: Attempting to register custom PHP source for talk dates to demonstrate extensibility - Evidence: "What I could do is I could register a custom source that would always return" #### ⏱️ [28:00](https://www.youtube.com/watch?v=iuvs7hm0LRI?t=1680) — [H3] Arbitrary Date Selection Discovery - Key idea: Date block now allows selecting any arbitrary date, not just post-related dates - Evidence: "You can select an arbitrary date... which wasn't possible before" #### ⏱️ [31:15](https://www.youtube.com/watch?v=iuvs7hm0LRI?t=1875) — [H2] Image Block Caption Binding Setup - Key idea: Testing image caption binding requires manual markup editing with metadata bindings - Evidence: "I have to go and edit this to support the caption custom source" #### ⏱️ [36:40](https://www.youtube.com/watch?v=iuvs7hm0LRI?t=2200) — [H3] Image Caption Binding Implementation Issues - Key idea: PHP custom source for image captions not displaying properly on frontend - Evidence: "I'm not seeing the image caption elements... Either I'm registering my custom source incorrectly" #### ⏱️ [40:20](https://www.youtube.com/watch?v=iuvs7hm0LRI?t=2420) — [H2] Block Type Attribute Filtering - Key idea: New filter allows customizing supported attributes by specific block type - Evidence: "Filter block binding supported attributes by block type... ID, URL, title, alt, caption" #### ⏱️ [42:30](https://www.youtube.com/watch?v=iuvs7hm0LRI?t=2550) — [H1] JavaScript Custom Sources with UI Integration - Key idea: JavaScript sources can integrate with editor UI using get_field_list method - Evidence: "Developers can now register custom sources in editing UI by adding a get fields list method" #### ⏱️ [45:15](https://www.youtube.com/watch?v=iuvs7hm0LRI?t=2715) — [H3] Live Testing JavaScript Source Registration - Key idea: Successfully demonstrated haikus custom source appearing in paragraph block UI - Evidence: "When you select it, it actually returns it and pops it in there" #### ⏱️ [48:00](https://www.youtube.com/watch?v=iuvs7hm0LRI?t=2880) — [H2] Universal Source Availability Across Blocks - Key idea: Custom sources appear to work on any block that supports the target attribute - Evidence: "The source seems to... is just available anything that supports... it will just work" #### ⏱️ [52:30](https://www.youtube.com/watch?v=iuvs7hm0LRI?t=3150) — [H3] Next Steps and Future Development Plans - Key idea: Planning comprehensive JavaScript-based plugin combining multiple block binding features - Evidence: "Next week I'll actually try and see if the custom sources work in JavaScript" ## 📚 References - [WordPress 6.9 Block Bindings Dev Note](https://make.wordpress.org/core/2024/11/15/dev-note-block-bindings-improvements-in-wordpress-6-9/) - [Block Bindings GitHub Tracking Issue](https://github.com/WordPress/gutenberg/issues/56939) - [WordPress Block Editor Handbook](https://developer.wordpress.org/block-editor/) ## 🗣️ Paraphrase - WordPress 6.9 significantly improves block bindings by adding date block variations that can show post date, modified date, or custom arbitrary dates - Image blocks can now bind captions to custom data sources, though implementation requires manual code editing currently - New JavaScript API allows custom sources to integrate directly into the block editor UI with dropdown selection menus ## 📰 Newsletter WordPress 6.9 brings exciting improvements to block bindings that make dynamic content more accessible! The date block now offers three distinct modes - post date, modified date, and custom arbitrary dates - perfect for showing original publication dates alongside update timestamps on your content. For developers, the new get_field_list method enables custom sources to appear directly in the editor UI rather than requiring code editing. This bridges the gap between powerful developer features and user-friendly interfaces. While image caption binding shows promise, the current implementation highlights areas for future enhancement in the user experience. Resources: [Learn WordPress](https://learn.wordpress.org/), [Developer Docs](https://developer.wordpress.org/), [WP-CLI](https://wp-cli.org/) ## ✅ Action Items #### WordPress - Core: Improve block bindings UI to reduce manual markup editing requirements - Core: Document PHP vs JavaScript custom source registration differences - Core: Consider preset custom source templates for common use cases - Documentation: Create comprehensive block bindings tutorial covering both PHP and JavaScript approaches - Community: Share block bindings examples and use case demonstrations ## 🧪 Hypotheses - JavaScript-registered custom sources provide better editor integration than PHP-registered sources - Image caption binding requires JavaScript implementation for proper frontend display - Block bindings adoption will increase significantly with improved UI integration - Custom source registration will become more popular as documentation improves ### 📊 Methodology - Compare WordPress 6.8 vs 6.9 date block functionality through direct testing - Test PHP custom source registration with multiple block types - Validate JavaScript custom source UI integration through browser console testing ### ❓ Questions - Why do PHP-registered custom sources not display image captions on the frontend? - How can custom sources be restricted to specific block types rather than universal availability? - What's the roadmap for eliminating manual markup editing requirements in block bindings? ### 🔮 Future Research - Comprehensive JavaScript custom source plugin development - Performance implications of extensive block binding usage - User experience studies on block bindings adoption barriers ### 💡 Implications - Practice: Content creators gain more dynamic content options without custom field complexity - Education: Need for updated tutorials covering new block binding capabilities - Security: Custom source validation becomes increasingly important as adoption grows - Policy: Consider governance around custom source standards and best practices ### 🧠 Learning Styles Assessment Reading level estimate: 12th grade #### 👀 Visual learners - Present: Screen recordings showing block editor interactions and code examples - Improve: Architecture diagrams showing block binding data flow #### 🔊 Aural learners - Present: Live narration of testing process and explanations - Improve: Audio summary of key concepts and implementation steps #### 🗣️ Verbal learners - Present: Clear terminology definitions and step-by-step explanations - Improve: Glossary of block binding terms and concepts #### 🧩 Kinesthetic learners - Present: Hands-on coding examples and live testing - Improve: Downloadable starter plugin template for practice #### 🧠 Logical learners - Present: Systematic comparison between WordPress versions - Improve: Decision tree for choosing PHP vs JavaScript implementation #### 🧑‍🤝‍🧑 Social learners - Present: Live stream format with chat interaction - Improve: Community challenges around block binding implementations #### 🧘‍♀️ Solitary learners - Present: Individual exploration of features and self-directed testing - Improve: Self-assessment checklist for block binding mastery #### 🌿 Naturalistic learners - Present: Real-world use case examples like blog post dating - Improve: Content lifecycle analogies for data binding concepts ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear heading structure in video content - Improve: More detailed alt text for code screenshots #### Keyboard navigation - Present: Standard WordPress editor keyboard support - Improve: Document keyboard shortcuts for block binding features #### Contrast and readability - Present: High contrast code editor themes - Improve: Ensure all UI elements meet WCAG standards #### Media and captions - Present: Full transcript provided for video content - Improve: Time-coded captions for better navigation ### 🌍 DEIB Assessment #### Cultural breadth - Present: English-focused content with global applicability - Improve: Examples from diverse geographical contexts #### Inclusive language - Present: Technical terminology clearly defined - Improve: Avoid assumptions about prior WordPress experience levels #### Neurodiversity support - Present: Step-by-step structured approach - Improve: More frequent progress check-ins and summaries #### Representation - Present: Individual developer perspective - Improve: Include diverse developer voices and use cases ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Systematic testing approach validates feature claims - Inductive strength: Generalizes from specific examples to broader capabilities - Causal reasoning: Links implementation choices to user experience outcomes #### Fallacies - None identified: Testing approach maintains objectivity #### Tone of voice - Overall tone: Exploratory and educational with authentic problem-solving approach ### 🛡️ DARVO Analysis - No DARVO patterns detected in technical demonstration content ## 🎯 Conclusion WordPress 6.9's block bindings improvements represent a significant step toward making dynamic content more accessible while expanding developer capabilities. The date block enhancements provide immediate practical value, while the JavaScript UI integration points toward a more user-friendly future. However, the gap between PHP and JavaScript implementation approaches suggests areas for continued development in the user experience. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad ### [H1] Block bindings enable dynamic content without custom fields complexity > [!quote] [Testing WordPress 6 9 Block Bindings Updates](https://www.youtube.com/watch?v=iuvs7hm0LRI) by [[WP Builds]] via [[YouTube]]. Published 2024-12-18. Accessed 2024-12-18. > "You could set that up on your blog posts and you could update them and you could show the original post date and the modified date." Demonstrates practical application for content versioning and transparency. [view highlight](https://www.youtube.com/watch?v=iuvs7hm0LRI#H1) #xref #articleseed ID:rw_block_bindings_dynamic ### [H2] JavaScript custom sources integrate better than PHP sources > [!quote] [Testing WordPress 6 9 Block Bindings Updates](https://www.youtube.com/watch?v=iuvs7hm0LRI) > "I feel like that's probably what's happening with the image caption as well. I need to register it in JavaScript." Evidence from testing suggests implementation method affects functionality. [view highlight](https://www.youtube.com/watch?v=iuvs7hm0LRI#H2) #xref ID:rw_js_php_sources --- ### 🔖 Atomic Split Pad (Zettel Candidates) #### [Z1] Date blocks support three distinct binding modes - Post date, modified date, and arbitrary custom date selection - Pointer to 28:00 timestamp demonstration - Links: [[Block-Bindings]] [[WordPress-6-9]] #### [Z2] Custom sources appear universally across compatible blocks - No apparent restriction mechanism for source-to-block relationships - Pointer to 48:00 timestamp testing - Links: [[Custom-Sources]] [[Block-Architecture]] --- ### ✏️ --- ## Full Transcript [00:18] All right. [00:20] Um, so I wanted to [00:24] share out my social media things, but it [00:27] looks like there's a [00:30] a Cloudflare outage of some kind. [00:33] Um, if I go to twitter.com, it doesn't [00:35] work. If I go to x.com, [00:38] it loads but doesn't load my feed. So, I [00:41] don't know what's happening. Um, [00:43] hopefully this doesn't cause us any [00:45] problems today with the stream. [00:48] So, yeah, we'll see. We'll see what [00:50] happens. [00:54] Um, [00:56] okay. [00:58] So, today I'm going to continue testing [01:00] WordPress 6.9. [01:02] Um [01:04] I want to focus specifically today on [01:07] block bindings updates. [01:10] So [01:12] uh there are a couple of things. There [01:14] is a [01:18] uh where is it now? Block improvements. [01:20] Block bindings improvements. Go. [01:23] So there's a couple of updates that have [01:25] come out recently. Um they apparently [01:28] the date block has blockbinding support. [01:30] The image block allows binding of the [01:31] caption. [01:33] And then there's also some improvements [01:37] uh on the server. You can filter block [01:39] binding supported attributes by block [01:41] type. [01:43] Allows developers to customize which of [01:45] the blocks attributes can be connected [01:47] to blockbinding source. [01:49] Um on the editor side there is you can [01:52] register custom sources [01:54] by adding a get field list method and [01:57] there's some example code [02:01] of how this all works. [02:04] So I think today I'm going to go through [02:07] each one of these and just see [02:10] if I can figure out what it's all about. [02:13] Um [02:17] this is the main tracking issue. [02:21] Um [02:26] caption binding to image block bindings [02:28] to date block. There's some bug fixes. [02:31] Um [02:35] so let's open up date block image block. [02:42] Let's see what's what date block except [02:44] to manually set date. [02:54] So I guess this would be [03:06] new post insert date block and modify [03:09] date and the code. So the markup should [03:11] look like that. [03:13] Go back to the visual editor. Set the [03:14] post publish date to an earlier date to [03:16] publish the post front end. It looks [03:18] looks something like that. [03:21] Reload. [03:26] So now it should start using block [03:27] bindings. [03:46] make the data block accept and manually [03:48] set date dependent on the current post. [03:50] Okay, so let's go and create a post and [03:53] see. So I've already got um my local [03:56] environment set up with 6.9 RC1. So that [03:59] should be all the latest and greatest [04:00] stuff. [04:01] Um [04:04] so let's test this out. So let's create [04:10] post [04:14] and let's say this is [04:20] uh testing [04:22] date [04:25] bindings [04:26] and then [04:31] so we're going to add [04:33] date and modify date blocks. Okay. So, [04:37] let's do this. Let's add [04:40] some columns. [04:44] Uh, let's add a paragraph. [04:48] Let's add date. [04:51] And let's add date block there. [04:55] Okay. So, that's today's date. [05:06] Yeah, that's fine. And then let's [05:08] duplicate this. [05:12] So let's say this is current date. [05:16] Let's say this is body [05:19] date and this will be then the modified [05:22] date block. [05:24] Um, hey Ann and says, "Hey John, so much [05:27] exciting stuff coming. Feels like a [05:28] little like Christmas." Um, [05:31] it does kind of So, the time I mean the [05:33] timing is pretty cool, eh? Um, the fact [05:36] that [05:38] it's kind of Christmas time. My [05:39] promptter doesn't seem to be working for [05:41] some reason. [05:44] Going to try and [05:48] figure out why this is working. [06:03] My chat prompt is just not working [06:05] today. I don't know why that is. [06:13] What if it's going to unplug somewhere [06:16] something? [06:20] I lost my screen there. [06:23] That was the wrong thing. [06:34] Let's try this one. Something else. [06:49] Just knocked over my phone. [06:52] Okay, that was the teleporter. Let's see [06:53] if I can get it back. [06:57] Ah, there we go. Didn't Oh, I know why [07:00] it didn't work because I didn't switch [07:00] it on. [07:02] Stupid. [07:04] Uh, there's a little button here. I got [07:05] to switch on every time. [07:08] There we go. [07:10] Now I can actually see when people are [07:12] chatting to me. Just a little test here. [07:17] Yeah, there we go. Okay. Sorry about [07:19] that. I missed a message cuz I didn't [07:20] have it where I normally have it. [07:23] Uh yeah, I guess it doesn't feel a [07:25] little bit like Christmas. Um [07:28] I feel like I feel like a lot of things [07:30] that are coming now are [07:35] um [07:37] sort of laying the foundation for future [07:38] things. [07:40] Um so yeah, it's always fun to play with [07:43] these things. I've lost my second column [07:45] for some reason. I'm going to delete [07:47] this. Do it again. [07:50] Okay. So, let's duplicate the columns. [07:56] There we go. Oh, it's probably because I [08:02] Oh, it's because I removed [08:05] block I need to add modify. Okay. [08:08] Modified date. [08:15] Let's make this [08:17] a little bit bigger. [08:24] Looks better. [08:26] That looks better. Um, okay. And then [08:29] let's add some content. [08:33] Um, oh, the collaboration stuff. Yeah, I [08:36] need to I need to dive into that at some [08:37] point. Um, I just haven't had time. But [08:42] that that that one I'm really looking [08:43] forward to because the moment and I'm [08:45] sure you experienced this as well. If [08:47] you want to work on a post that's going [08:49] to get published in the WordPress site, [08:50] it has to be in a Google doc somewhere [08:51] first and then [08:55] um making updates to it is a pain. So [08:58] that what I am quite excited about would [09:01] agree with you there. [09:03] Okay. [09:06] See here now. [09:08] So, the markup is not going to look like [09:11] this because it's going to be the newer [09:12] markup. So, let's see what the markup [09:14] looks like. [09:16] Um, [09:19] make this bigger. [09:24] Okay. So, there's the current date, [09:26] there's the date, post date, date, time, [09:29] all of that. Okay. There we go. Post [09:31] date metadata. It's using block [09:33] bindings. It's the core post data [09:36] modified field. [09:38] Um, [09:41] so that is I guess what it's supposed to [09:43] do. Yeah, that's what it's supposed to [09:44] do. [09:46] Um, [09:55] okay. So, let's save that post. [10:00] Why can't we see? Oh, you can't see what [10:01] I Oh, flip. That's no good. [10:05] Um, let me try and sit. You You can [10:09] That's interesting. I wonder if [10:15] my screen has done this before where it [10:16] freezes. [10:19] So, let me [10:22] let me switch screens. [10:26] Okay. [10:28] So, let's do that. This happens. There [10:32] you go. So you should see the GitHub [10:33] issue now in uh this happens when my [10:36] monitor gets disconnected which I did [10:37] myself manually by mistake. Um [10:41] so you should now see the screen and [10:43] then you should see the GitHub and I can [10:45] see that on my side as well. So thanks [10:47] for pointing that out. Um okay so just [10:50] let's just go back to the code editor. [10:52] So [10:53] the date block is using [10:57] date time as its source fun side set to [10:59] large. [11:01] The modified block is using the block [11:03] binding. [11:05] It's interesting how it uses post date [11:07] on both. [11:08] There's the modified date class. There's [11:10] the modified field. [11:13] Um, [11:17] so [11:21] now if I save, [11:25] so let's exit the code editor and let's [11:29] publish this. [11:34] And now if I change the publish date to [11:37] let's say Friday. [11:42] Save that. [11:45] And let's refresh this. [11:50] Okay. It doesn't look like a modified [11:51] status change. Let's have a look at the [11:53] code. [12:02] It's not going to be the [12:09] So, this one. [12:15] Oh, there we go. Post date. There we go. [12:17] So, I can change that to the post date, [12:18] not to the modified date. [12:22] And then that will always stay with [12:27] current modified date, which is whatever [12:28] today's date is. [12:34] That's actually kind of cool. You could [12:35] you could you could kind of set that up [12:37] on your blog posts and you could update [12:38] them and you could show the original [12:41] like the original post date [12:44] and the modified date. I'm actually busy [12:47] updating a post on my site. This could [12:48] actually be quite cool. Um, [12:53] I'm not sure what the date block did [12:55] beforehand. I guess it just showed it [12:57] display type modified. [13:00] I'd need to go back to [13:09] post changes on publish. [13:16] Okay. Well, that seems to work pretty [13:18] well. Um, I'm not sure what it did [13:20] beforehand, but it's doing it's doing [13:22] what I expected to do now. The post date [13:24] is showing the post date. The modified [13:25] date is showing whatever the last [13:26] modified date was. Um, [13:32] I'm not quite sure the difference [13:33] between [13:36] here. Make the date block except Oh. Oh, [13:43] so you weren't able to set the date [13:46] manually by the looks of it. [13:52] post date and last modified date [13:54] variations of the block. So, it looks [13:55] like all of this this modifi modified [13:58] date stuff here was the update. Um, [14:03] what would be interesting would be to [14:04] check out what it was like before 6.9. [14:07] So, I'm going to [14:10] open up this AI experiment site that I [14:12] have [14:14] and I'm going to replicate this [14:16] functionality in that site and just see [14:18] what it looks like. So, this is a oh [14:20] blast. This is running 6.9 as well. [14:22] Okay. Uh let's quickly create a new [14:27] site. [14:29] So, we'll just call this [14:32] 3.8. [14:35] Uh, and I want it to use [14:39] the latest version of WordPress cuz I [14:40] want to see [14:43] what this did before. [15:06] Okay, let's have a look here. Um, [15:15] oh, this is I said latest, didn't I? Now [15:18] it's giving me very latest. I don't want [15:19] latest. I wanted I wonder if I can [15:21] change [15:22] No, I can't. Can you change the [15:24] WordPress version? Yes, you can. [15:25] Excellent. Okay, let's go to 6.8. [15:29] save. [15:36] I thought latest would have been 6.8. [15:38] Didn't realize it would give me 6.9. [15:41] Um, [15:50] let's wait for that to finish. [15:56] Okay, let's refresh. [16:07] Okay, so let's run X3. So let's go and [16:09] create the post story again. Let's just [16:11] add new post [16:16] test [16:17] blocks. [16:20] Add some columns again. [16:28] It said current date. No. What am I [16:29] doing? Ah, [16:36] current date. [16:40] And then just a date block. Okay. [16:46] Duplicate that. [16:50] And that's modified date. [16:55] And this needs to change to [16:59] modified date block. [17:05] There's modified date. Okay. [17:08] Um, let's make these a bit bigger so we [17:10] can see them. I think I made them large. [17:15] Large. Okay. Let's see what the code [17:17] looks like. [17:23] Yeah. So this is display type modified. [17:26] Okay. [17:28] Yeah. So that's the difference. I can't [17:33] there's only these options here. So [17:34] default format link to post and display [17:38] last modified date. Those are the [17:39] settings. Whereas now [17:42] I have this modify date option up here [17:45] and I can transport either post date or [17:48] modify date. [17:50] Um [17:55] only shows if the post date has been [17:58] modified. [18:00] Interesting. [18:04] Okay. So that's the difference there. [18:06] Using block bindings as a source. I'm [18:09] not quite sure what the difference is [18:10] under the hood to be honest. [18:13] Um, [18:20] like independent of the current post, [18:22] publish or last modified. [18:25] So that sounds like I could [18:30] Oh. Oh. Oh. room. So, what I could do [18:38] is I could create a custom source [18:42] that would always return. [18:46] So, that's something I can do [18:47] programmatically. [18:49] Um, [18:55] so let me find [18:59] um I think it was in [19:02] 6.7 that you create custom sources. [19:16] as you are. [19:21] It's the whole thing about custom [19:22] sources in the very first one. Yeah, [19:25] block binding source. Here we go. [19:33] To by [19:39] I think this is actually even in the [19:41] hang on the block binding documentation. [19:58] Registering a custom source. Registering [19:59] a custom source requires defining a [20:01] decent name and label a call back. Once [20:04] the source is registered any supporting [20:05] blocks metadating bindings attribute can [20:08] so what I could do is I could register a [20:09] custom source [20:12] um and then I would be able to apply [20:14] that source [20:16] to the date block. So let's do that. I [20:20] think I think that's how it works. Let's [20:22] have a look. Um so let's go into testing [20:25] 6.9 [20:29] and let's create a little custom source [20:31] plugin. [20:34] Uh [20:37] so let's say a new directory and let's [20:41] say custom date source. [20:57] Start creating a plugin [21:03] uh custo source for [21:08] bindings [21:14] and I'll just leave it as version one. [21:15] Okay. So then I'm not going to worry [21:18] about all the exiting and stuff that [21:20] this code is suggesting. I'm just going [21:21] to grab this. [21:24] See if I can get this to work. Okay. [21:26] Okay. So, I'm registering a blockbinding [21:27] source. So, let's call it [21:30] uh custom date source and let's call it [21:36] um I don't know what should we make up. [21:40] Um [21:50] let's say it's [21:52] okay. What I'm going to call it talk [21:53] date. So [21:55] to give you some context, I sometimes [21:57] will um [22:01] link to blog posts on my blog when I am [22:05] presenting talks [22:07] and that's what I'm going to basically [22:10] create the talk date the talk this is [22:12] linked to trying to make it random for [22:14] now custom date source source block [22:17] instance post ID post ID that's fine if [22:20] is set so ars key return blah blah blah. [22:25] Um, [22:28] do I need the key? Where's the key? [22:32] Um, [22:43] I'm not too worried about that. I'm just [22:45] going to return for now. I'm just going [22:46] to return the date. [22:48] So, let's just go return. So what you [22:51] would normally do is you would for [22:53] example store the talk date on the blog [22:56] post or whatever as a post meta and then [22:58] you could return it from there. What I'm [23:00] just going to do is make up a talk date. [23:02] So I'm going to say talk date equals [23:05] and [23:10] I spoke at a conference two weekends [23:13] ago. So I'm going to choose that date [23:14] for now manually. [23:16] Uh so it was the 8th of November. Okay. [23:22] Uh, so let's go with [23:26] Oh, here's an interesting point. I [23:27] wonder what kind of date format that's [23:29] going to be. Let's just go with this. [23:31] November 8th, [23:33] was it the 8th of November? Two weekends [23:36] ago. Where are we now? 18 17 16 15. [23:40] Yeah, it's two weeks ago. So, we'll go [23:42] with this November 18, 2025 and just see [23:44] what it does. Um, [23:47] November 8th. [23:50] 2025. [23:52] Okay. So, we'll leave it like that [23:55] and then we'll return the top date. [23:58] Okay. [23:59] Um [24:03] theoretically that should just work. [24:08] Let's see if that shows up [24:11] as a source. Um okay, let's save the [24:15] post. [24:18] Let's go back over here. [24:21] Register the plugin [24:24] as my custom D source. Let me make sure [24:26] that debugging is on. [24:42] Okay, that's on. [24:44] Um, [24:48] so with that in play, [24:53] let's go back to the post. [24:58] And now I should [25:04] doesn't show up. [25:06] Um, [25:09] now, [25:10] interestingly enough, [25:13] my colleague Juanma sent me a message. [25:17] Um, pull this off screen quickly. Sent [25:20] me a message earlier today about the [25:21] date block. So, I'm just going to open [25:24] up work Slack and just see if his [25:25] message is related to [25:29] um [25:33] so he sent me this link [25:38] has name [26:33] Set the date block in the block tool. [26:35] Use the pencil icon to set an arbitary [26:37] date. [26:48] Oh, he's saying just the date. [26:52] Oh, that's what it's doing. It's not a [26:54] custom source. It's just you can select [26:56] an arbitrary date. Okay, I missed that. [26:59] All right. So, for example, let's [27:02] duplicate that again. [27:11] So, let's say [27:14] library [27:15] date [27:17] and then modify date. So, this we can [27:20] just replace with a date block. [27:23] And this I believe you couldn't do [27:24] before. [27:27] Um, so you just go date block [27:31] and here let's change this to large. So [27:36] currently it's just it's choosing [27:38] today's date. But what I can do is I can [27:41] select a custom date, the post date or [27:43] the modified date. If I specify post [27:46] date, it'll be the post date. That's [27:47] kind of cool. If I can specify the [27:48] modified date, it'll be the current [27:49] modified date or [27:53] Um, if I leave it on the post date, then [27:56] I can select here [27:58] and I can change. [28:01] Oh, but this actually changes the [28:03] publish date. Interesting. How do I [28:05] clear [28:08] if I can untick post date? No, you can't [28:10] untick posted once it's ticked. Okay. [28:13] Um, [28:15] so let's remove the date block. [28:18] Let's add it again. [28:20] But what I can now do is here before [28:24] transforming it to a v before [28:26] transforming it to a variation I can [28:28] select an arbitrary date. [28:30] Um so I can say make it November the 1st [28:32] or November the 8th or whatever the case [28:35] may be which wasn't possible before. [28:37] Okay [28:39] I kind of like that. Um [28:42] I still I think the custom source I [28:46] think I did incorrectly. Uh, but I'm at [28:48] least some understanding how these [28:50] things work. [28:51] I still kind of like the idea of having [28:53] this modified date and tying it to the [28:55] modified date is cool. Um, being able to [28:58] have an arbitrary data is school. I want [29:00] to see what the code looks like. [29:03] Um, [29:05] so that's the first one. That's the [29:07] modified date. And then that just [29:09] specifies a specific date time. Okay, [29:11] cool. [29:13] All right. So that's block bindings [29:15] updates coming our way. um can do a [29:17] whole bunch more with block bindings [29:18] than what we used well with a date block [29:20] at least used to be able to before. Uh [29:23] so that's that one out of the way. [29:26] Then the image block um [29:32] where is that help test post image block [29:34] allows binding of the caption. [29:38] So when saving the image block include a [29:41] third caption element [29:44] um bind the caption attribute [29:52] certain image block [29:54] insert markup to update insert markup to [29:57] bind its caption attribute to a block [29:59] binding source. [30:03] Interesting. [30:11] Insert markup to bind its caption [30:12] attribute to a block branding source. [30:14] Okay. So, that I'm going to have to use [30:38] this kind of stuff here. [30:41] Okay. [30:44] So, let's create a custom source for [30:47] that. Um, [30:54] disable this plugin quickly. [30:58] I'm just going to rename it and call it [30:59] custom sources [31:02] just to make my life a bit easier. [31:08] So, as I mentioned earlier, typically [31:10] your custom sources would be fetching [31:12] data from post meta. [31:15] Um, but I'm going to hard code these [31:17] values today. [31:19] So, we'll go custom sources. [31:26] Okay. So, let's go custom source and [31:29] then we'll say [31:32] uh image caption. [32:09] I'll be right back. [32:24] things that means I forget to do. [32:32] Okay, so I've got my custom image [32:34] caption. [32:36] Um, [32:42] why does PHP some have little HalfLife [32:44] icons? [32:48] What's that about? [32:50] Oh, it's showing a different function. [32:54] Interesting. [33:08] Oh, it actually interesting [33:12] actually shows you [33:16] anonymous functions. [33:21] Sorry, I just saw this today. [33:23] Um, [33:30] that's crazy. I didn't even notice that [33:31] previously. Anyway, uh, getting [33:33] distracted by my own developer tools. [33:37] Um, [33:39] okay. [33:41] So, image block. Okay. Insert an image [33:44] block [33:46] in the code editor. Update it markup to [33:48] bind it caption attribute to a source. [33:51] Switch back to the visual editor and [33:53] enable it capture. Okay, so let's start. [33:56] Does this thing have some media? Just [33:58] check here. [34:00] Uh, yes, got some images. Excellent. [34:02] Okay, so let's go back to post. Let's go [34:05] back to plugins and let's enable that [34:07] custom source. [34:09] Source. [34:12] No errors. Good. Go back to posts. [34:17] Let's go. [34:25] testing image [34:28] bindings. [34:30] Uh, let's add an image block. [34:33] Let's add an image. Go birdie. [34:37] Um, [34:42] all right. [34:44] Now, one of the things that I don't [34:45] currently like about block bindings is [34:47] that I have to go and edit this [34:49] to support the caption custom source. It [34:52] would be cool if there was a way to do [34:54] this in the editor. Um, [34:58] but anyway, it is what it is. So, in the [35:02] code editor, [35:05] um, [35:08] I'm going to need to, [35:12] it's the metadata [35:14] metadata bindings, [35:18] blah, blah, blah. [35:21] Um, so it's going to be bindings, [35:24] caption, the source, and if there are [35:26] any arguments. I'm not going to pass in [35:27] any arguments. So, let me grab this. [35:30] Stick it in some JSON quickly. [35:39] Okay. Metadata bindings. We're binding [35:42] the [35:44] caption attribute [35:47] to the custom source. [35:53] The day we can get to a point where I [35:54] can do this in the editor will be very [35:57] cool. I don't need arguments for this [36:00] thing. So, I'm fine to do it like that. [36:02] And then I'm just going to stick this [36:03] all on one line. It'll be easier to [36:04] stick it in the edit eventually. [36:25] Okay. So that will be the uh do one [36:28] more. One, two, three, four. That's it. [36:32] Okay. So let's pop this in here. [36:35] Sorry. Okay. Uh V class image. [36:40] Can it be image ID source? Oh, I need to [36:43] add the meta to this. Okay. So let's [36:44] just take all of this out. [36:48] So did the right thing. [36:52] And then I need to add the metadata. [37:03] Okay, [37:07] there we go. [37:15] So, once I've updated the metadata, then [37:18] it says switch back to the visual editor [37:21] and enable its caption. Okay, let's hope [37:24] this works. [37:32] Huh? Look at that. [37:35] It did work. Okay. Um, [37:39] so then [37:43] enable this caption. So I think to [37:45] enable the caption, we've actually got [37:46] to select [37:50] Oh, I think I think that's all it needs [37:53] is the caption. [37:56] And then it actually gets [38:00] it gets the caption from there. So it's [38:01] going to return that caption. Okay. So [38:05] now if we [38:09] uh save publish the post verify that [38:12] image block contains an empty fig [38:13] caption element. Okay. So let's publish. [38:16] Let's just see what this does on the [38:17] front end. [38:18] Um [38:22] let's view this post. [38:25] And let's inspect [38:42] where it's supposed to be. Uh, reload [38:44] and switch the code to verify the image [38:46] lock contains an empty f caption [38:48] element. Okay, let's see. [38:58] Sort image caption there. [39:19] I'm not seeing the image caption [39:20] elements [39:36] capture. Interesting. [40:01] I wonder if this is because I'm doing a [40:03] custom source in PHP. [40:06] What if my custom source needs to do [40:07] something different for this to work? [40:43] So, one of two things is happening. [40:45] Either I'm registering my custom source [40:46] incorrectly [40:48] or the guys testing this are using a [40:50] JavaScript custom source which [40:56] is done like this. [41:00] Um, [41:44] Get call back. Should return. [42:19] What's not [42:35] source call back function. How to get [42:37] the value from the source and pass it to [42:39] a block attribute. Any block that [42:41] supports can get value by setting its [42:43] binding attributes of value [43:00] metadata bindings [43:04] content but that needs to be captured. [44:45] photo. [45:05] Okay, I'm going to need to do some [45:06] digging around this because [45:24] I'm not sure why this doesn't work. [45:28] Field. [45:34] Okay, I'm going to make a note around [45:36] that one and [45:40] follow up before I get too much into the [45:43] weeds. [45:46] Um, [45:49] feel like there could be something I'm [45:50] doing wrong. I'm not 100% sure myself. [45:53] So, let's get image caption PHP source. [45:59] Okay, let's uh let's move on. [46:04] I definitely didn't. [46:11] It's definitely [46:14] turning this, but I feel like it's doing [46:15] it the wrong place. [46:19] Um [46:37] It's definitely hooking up the caption [46:41] on the image to the custom source. [46:47] Binding this caption. [46:52] Okay, I'm going to have to do some more [46:54] digging on that one. I'm not sure [46:55] myself. [46:57] I'll see if that's a bug or if I'm just [46:58] being dumb. [47:02] Um, okay. Let's [47:08] move on to something else. [47:13] Um, the other thing that I was looking [47:16] through was where is it now? There's [47:20] some block bindings improvements in [47:22] WordPress 6.9. [47:24] Um, [47:26] so there's a filter block binding [47:28] supported attributes [47:30] by block type. [47:34] Um, let's have a look in the code [47:38] what that does. [47:46] So that will give you the supported [47:48] block attributes. [47:51] Okay. [48:00] So it used to just be the block binding [48:02] supported attributes [48:05] um by block type. Now you can actually [48:07] specify by block type. [48:10] Um, [48:13] so for example, if we did something like [48:16] this, [48:19] uh, [48:23] let's do this. Let's say, um, [48:30] no, where did it come from? [48:36] And block type would be what? I think [48:39] it's cool. [48:57] That's probably going to need to get [49:00] Let's find the other one. [49:12] Oh, [49:14] there's no reference. [49:18] That seems weird. [49:29] Okay. [49:31] Oh, it's just 6.9. [49:34] stupid. [49:36] This is all 6.9. [49:44] Okay. So, let's say core image [50:04] blocked. Just see something here. [50:08] Don't do this in the real world, folks. [50:10] But I'm just going to log something [50:14] to the error lock because I want to see [50:16] what the block type would be. [50:20] Um, [50:25] post [50:30] That's fine. [50:38] There's nothing going on. [50:46] Okay, let's see. Okay, so it's just [50:54] so let's go with core image for example. [51:21] Okay. [51:25] Ported block attributes. [51:49] Okay. [51:52] Clear the log. [51:55] So now if I refresh this, [51:59] this will give me the supported [52:01] attributes for the image block, which is [52:03] an array. There we go. ID, URL, title, [52:05] alt, caption. Okay, so [52:10] not sure why that does that, but it's [52:12] there. [52:14] Um, allows developers to customize which [52:17] other blocks attributes can be [52:18] connected. [52:21] I'm guessing you can't add [52:25] Maybe you can, maybe you can add, [52:29] but it wouldn't actually do anything. [52:31] You would need to actually then [52:34] um [52:36] do something with it. [52:38] But that's anyway what that does. [52:42] Um developers can now register custom [52:44] sources in editing UI by adding a get [52:46] fields list method to the source [52:48] registration function. [52:50] This function must return an array of [52:52] objects with following properties. [52:54] Label, type, arguments. [52:57] This is an example that can be tried [52:59] directly in the console from the block [53:00] editor. [53:03] Okay, so it looks like we can just copy [53:05] this code and this stuff will show up. [53:08] So let's see if that works. [53:10] Um, [53:16] so let's go to a post. [53:26] Test custom test. [53:30] What's it called? [53:39] Custom sources field list. [53:47] Um [53:50] Don't know why stream elements suddenly [53:51] posted that but okay. Uh so let's open [53:55] up the develop tools [54:00] and let's paste this in. [54:07] Okay. So it's called state haikus haikus [54:10] blah blah blah [54:12] gets values. If it's haiku all these [54:15] kind of things then it returns [54:17] information. So let's run that. [54:19] And now if we go paragraph [54:24] now [54:30] fonts maybe are the attributes. So we [54:33] can select the content attribute [54:36] and then from there we can select [54:38] haikus. Oh there's a little popup. [54:41] Um, [54:44] and then when you select it, it actually [54:45] returns it and pops it in there. Now, [54:48] this is kind of cool if you want to have [54:49] sort of pre predefined content for [54:51] different blocks or predefined elements. [54:53] You could have maybe for your image [54:55] block, you could have different images [54:56] loaded. Um, [54:59] obviously this looks like it only [55:01] supports the front end UI. So, you [55:05] probably need to register the source in [55:06] JavaScript and then hook up the fields [55:08] list. [55:10] Uh, I feel like that's probably what's [55:12] happening with the image caption as [55:13] well. I need to register it in [55:14] JavaScript. [55:15] Um, [55:18] so that might be something to that maybe [55:20] something to play with next week. Um, [55:22] maybe next week I'll actually try and [55:25] see if the custom sources work in [55:26] JavaScript. Like I'll put together a [55:28] plug-in that loads up some JavaScript in [55:29] the editor, maybe does the caption for [55:32] the image, maybe puts in some content. [55:34] That could be a fun little project to [55:35] actually create something with all of [55:37] this. Um, [55:39] so I'll have a little think about it. I [55:41] quite like all of this. Uh, it does [55:44] work. It does do what what it needs to [55:45] do, which is which is cool. [55:48] Um, [55:55] I will admit I don't spend enough time [55:58] with block bindings to really get into [56:00] the weeds of this. So, [56:04] I probably should do a followup stream [56:06] next week where I actually use some of [56:07] this stuff. So, I'm thinking [56:10] let's think uh let's think about [56:16] uh [56:20] h [56:26] wonder if there's a way we could [56:32] use this code [56:35] to register some like image captions [56:38] that the user could select from [56:41] um [56:44] as like a list of custom sources. That [56:46] could be an interesting little project. [56:50] So, [56:54] uh [56:56] custom image caption source [57:00] Um [57:08] caption [57:12] source enable it returns it supports [57:19] custom fields. [57:21] That could be fun. Um, and I could use [57:25] this kind of stuff. [57:37] I think that's what I'm going to do next [57:38] week is I'm going to play with that. [57:42] So anyway, check out all those things. [57:44] Um, [57:46] this seems to be the main tracking issue [57:48] for all the block bindings UI stuff. [57:51] So, I will [57:53] I will share all of these links that I [57:55] have here [57:58] um [58:00] pop this one in as well [58:03] in the description when I upload this to [58:04] YouTube. So, if you want to catch those [58:06] there. Um [58:11] and then this is the blockbinding [58:13] improvements dev note. [58:16] Uh so, so check that out. That's [58:18] probably where most information is. [58:22] Um, [58:25] what I what I do wish flock bindings had [58:28] I wish there was a way, for example, [58:30] when I added the image. [58:33] Um, [58:35] and I think this is possible. I just [58:37] can't remember how because it's been a [58:39] while since I've done this, but I'd love [58:40] it if I could [58:43] like enable attributes and then [58:47] on the image block. I wonder Let's [58:51] just see something. [59:05] Okay, let me just hang on a sec. I'm [59:07] going to sneeze again maybe or yawn. [59:13] Happens every time. I feel like I'm [59:14] going to sneeze and then I yawn. It's so [59:16] annoying. Um, [59:24] now you see that's interesting. So when [59:25] I add a paragraph, there's no attributes [59:28] option. [59:31] But [59:34] where is it now? [59:36] With this stuff, [59:40] I can basically [59:49] Where does the fields list hook into [59:51] things? Oh, I apply it to the custom [59:53] source. [60:36] What confuses me about this is [60:45] theoretically this this source here [60:51] How does it know [60:55] to apply to paragraphs? [61:07] Would it work on headings as well? If I [61:09] run that code, let's have a look. [61:29] Yes, indeed it would. [61:34] It would. So, [61:37] the source [61:39] seems to [61:42] Let's go back to the [61:45] documentation. [62:28] The one thing that confuses me is how do [62:30] you [62:38] It seems to be at the moment that if you [62:39] register source is just available [62:42] anything that supports. I mean is that [62:45] true? If I [63:04] does this look like now [63:11] if I if I bind it to that what does it [63:14] do? [63:20] Okay. And what does the code look like? [63:26] See then it updates [63:28] bindings content. [63:46] So is it because it returns [63:49] bindings content? [63:52] That's the part that confuses me like [63:53] how how could I change this for example [63:56] to work with [63:58] let's say which one? [64:03] Let's say the [64:07] button text. Would that just work? [64:22] Oh, it'll just work. It's an available [64:24] source and anything that you can bind it [64:25] to, it will just work. [64:28] That's interesting. So, there's no [64:30] there's no like [64:33] um [64:38] So, would I be able to add that to the [64:40] image caption? [64:43] Let's go image library. [64:47] No, that wouldn't work. [64:53] What if I [65:01] Hang on. [65:15] What if I did that? [65:20] And then [65:24] in the editor for the image, it's the [65:26] metadata. [65:33] One, two, three. One, two, three. [65:42] Okay, [65:45] that work. No. [65:53] Okay. So, [65:58] what if I [66:01] save this Refresh. [66:06] Run this again. [66:10] And then click on the image. No, still [66:13] don't. Okay, I need to dive into the [66:16] image thing first. I was hoping it would [66:17] just work on the image caption or [66:19] something. [66:21] So it looks like when you register a [66:22] custom source, [66:31] what I don't understand is why my [66:36] image I think I think if it's in PHP, [66:38] you need to actually specify [66:42] what it's hooked into or something. I'm [66:45] not sure. I'll need to stick to that. [66:48] Okay. Um, [66:51] I need to build something that actually [66:53] I need to go back and find my notes and [66:54] build something that loads some [66:56] JavaScript code in the editor that I can [66:58] play with this because I don't like [66:59] sitting playing with it in in DevTools. [67:03] um [67:05] kind of wrap my head around this, [67:08] but I like the fact that we're getting [67:11] to a point where we can just select the [67:12] block, [67:14] have the custom sources, select from the [67:16] custom sources, it automatically changes [67:18] things. That's a very cool experience. [67:21] Um so yeah, check it out. Uh see what [67:24] you can figure out. I still haven't Can [67:26] I [67:29] update the hide? Yeah, I can. Let's see [67:30] if that works. Yeah, that. Oh, that's [67:32] just returning first IQ, second IQ. [67:35] Interesting. [67:37] Um, [67:40] so I wonder why that does that. [67:46] Oh, if [67:51] interesting. [67:56] So all of this means it assumes it's on [67:58] a paragraph. Otherwise, it just returns [68:00] the content. [68:04] So, that's getting the title. [68:07] So, you could, for example, have [68:17] working on it. It's also working on a [68:18] header because head of sports content. [68:21] Um, [68:27] I still wrap my head around all this. [68:30] But that's where I'm going to call it [68:31] today, folks. Um, so check out those [68:33] blog posts and things. Check out blog [68:35] bindings. [68:36] Um, I still need to sort of unpack it in [68:40] my head properly and kind of build [68:41] something like what I would like to see [68:43] is I have a custom source. [68:47] I I upload I add one of the blocks that [68:50] supports a custom source and then I can [68:52] select from there um depending on what's [68:55] what's supported. So, I'm gonna I'm [68:57] gonna have a little bit more of a play [68:58] with this. Try and build something with [68:59] it so I can understand it. Um, but [69:02] that's me me for today. Hope you've [69:05] enjoyed my fumbling around. Um, and I'll [69:08] see you next week. Bye-bye.