Using every Interactivity API feature in one site: Part 2 🔗 **Source:** [Using every Interactivity API feature in one site: Part 2](https://www.youtube.com/watch?v=gs2ZurEpdmg) > [!note]+ Document Notes > tags: [interactivity-api, wordpress, web-development] > author: Ryan Welcher > source: YouTube > reference: https://www.youtube.com/watch?v=gs2ZurEpdmg > date created: 2024-12-24 12:00 > > # 🏷️ Title: Using every Interactivity API feature in one site: Part 2 > <!-- deep-read:sections start --> ## 🧰 Action Inbox - [H1] Set up proper template scaffolding for Interactivity API blocks — 00:15:00 #development - [H2] Test async event handlers vs sync event handlers — 01:30:00 #performance - [H3] Fix CSS styling and accessibility for form inputs — 02:00:00 #accessibility ## 🧭 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 Interactivity API Documentation](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/) - [Create Block Template](https://www.npmjs.com/package/@wordpress/create-block) ## 📝 Summary - Ryan Welcher demonstrates building comprehensive examples of WordPress Interactivity API features - Focus on creating practical demos showing text directives, bind directives, and event handling - Covers differences between async and sync event handlers, with performance implications - Addresses accessibility concerns and proper form labeling - Shows template scaffolding and block development workflow ## 📖 Main Content This stream focuses on building out a complete repository of Interactivity API examples. Ryan works through creating individual blocks for each directive type, starting with wp-text and wp-bind examples. He demonstrates the differences between synchronous and asynchronous event handlers, explaining when each should be used for performance optimization. The session includes troubleshooting template scaffolding, accessibility improvements, and styling considerations for interactive blocks. ## 🗒️ Notes #### ⏱️ [00:00](https://www.youtube.com/watch?v=gs2ZurEpdmg&t=0) — [H1] Stream Setup and Technical Issues - Key idea: Resolving streaming setup with new monitor and audio issues - Evidence: "I got a new monitor and it's a beautiful monitor but it's smaller than my old one" #### ⏱️ [00:05:30](https://www.youtube.com/watch?v=gs2ZurEpdmg&t=330) — [H2] Repository Structure for Examples - Key idea: Setting up organized structure for Interactivity API examples - Evidence: "I have a repository that I am working on and I just added a template create block template" #### ⏱️ [00:15:00](https://www.youtube.com/watch?v=gs2ZurEpdmg&t=900) — [H1] Create Block Template Improvements - Key idea: New variants feature allows custom file paths in create-block - Evidence: "variants can now have their own can now define their own paths to files in create block" #### ⏱️ [00:25:00](https://www.youtube.com/watch?v=gs2ZurEpdmg&t=1500) — [H2] WP Text Directive Example - Key idea: Building basic text binding with input field - Evidence: "I want to do is when this gets updated, I want it to update this text" #### ⏱️ [00:35:00](https://www.youtube.com/watch?v=gs2ZurEpdmg&t=2100) — [H3] Event Handler Syntax - Key idea: Using data-wp-on-input for form input handling - Evidence: "data-wp-on-input callbacks.update update text" #### ⏱️ [00:45:00](https://www.youtube.com/watch?v=gs2ZurEpdmg&t=2700) — [H1] Async vs Sync Event Handlers - Key idea: Understanding performance implications of async event handlers - Evidence: "async on immediately yields to main to avoid contributing to a long task" #### ⏱️ [01:00:00](https://www.youtube.com/watch?v=gs2ZurEpdmg&t=3600) — [H2] WithSyncEvent Helper Function - Key idea: Using withSyncEvent when you need event access in async handlers - Evidence: "You have to use the withSyncEvent... you have to wrap our function in withSyncEvent" #### ⏱️ [01:15:00](https://www.youtube.com/watch?v=gs2ZurEpdmg&t=4500) — [H3] State Management vs Context - Key idea: Choosing between local state and context for data storage - Evidence: "I wonder if I should just keep this in state instead of using context" #### ⏱️ [01:30:00](https://www.youtube.com/watch?v=gs2ZurEpdmg&t=5400) — [H2] Store Definition and State Updates - Key idea: Defining store state and actions for text updates - Evidence: "wp-interactivity state and the state is going to be whatever text" #### ⏱️ [01:45:00](https://www.youtube.com/watch?v=gs2ZurEpdmg&t=6300) — [H1] Accessibility Improvements - Key idea: Proper form labeling with for attributes and IDs - Evidence: "Put four on the label and an ID on the input" #### ⏱️ [02:00:00](https://www.youtube.com/watch?v=gs2ZurEpdmg&t=7200) — [H3] CSS Styling with AI Assistance - Key idea: Using code generation for consistent styling - Evidence: "I'm going to ask code... update the input field to match the overall styles" #### ⏱️ [02:15:00](https://www.youtube.com/watch?v=gs2ZurEpdmg&t=8100) — [H2] WP Bind Directive Example - Key idea: Creating toggle functionality with bind directive - Evidence: "what I'm going to do, I'm going to make some changes here... bind example" #### ⏱️ [02:30:00](https://www.youtube.com/watch?v=gs2ZurEpdmg&t=9000) — [H3] Template Fixes and Requirements - Key idea: Ensuring proper block template includes all necessary files - Evidence: "I need to add render... supports interactive is true" #### ⏱️ [02:45:00](https://www.youtube.com/watch?v=gs2ZurEpdmg&t=9900) — [H1] Menu Toggle Implementation - Key idea: Building functional toggle menu with context state - Evidence: "Menu is open. Menu is closed... Menu is closed. Menu is open" #### ⏱️ [03:00:00](https://www.youtube.com/watch?v=gs2ZurEpdmg&t=10800) — [H2] Block Filtering and Content Injection - Key idea: Using render_block filter to add functionality - Evidence: "add filter render block... mastering yapi bind" ## 📚 References - [WordPress Interactivity API](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/) - [Create Block Package](https://www.npmjs.com/package/@wordpress/create-block) - [GitHub Repository](https://github.com/ryanwelcher/interactivity-api-examples) ## 🗣️ Paraphrase - Ryan demonstrates building a comprehensive set of examples for the WordPress Interactivity API by creating individual blocks for each directive type - The session covers the technical differences between async and sync event handlers, with async handlers yielding to the main thread for better performance - Accessibility best practices are emphasized, particularly proper form labeling using for attributes and unique IDs rather than ARIA attributes ## 📰 Newsletter **WordPress Developers: Master the Interactivity API with Live Examples** Ryan Welcher continues his deep dive into the WordPress Interactivity API, building practical examples that showcase each directive in action. This session reveals important performance considerations between async and sync event handlers - a crucial distinction for maintaining responsive user interfaces. Key takeaways include proper template scaffolding for interactive blocks, accessibility best practices for form controls, and understanding when to use local state versus context for data management. The live coding demonstrates real-world implementation challenges and solutions, making this essential viewing for developers working with WordPress's newest interactive capabilities. Resources: [Learn WordPress](https://learn.wordpress.org/), [Developer Docs](https://developer.wordpress.org/), [WP-CLI](https://wp-cli.org/) ## ✅ Action Items #### WordPress - Core: Document async vs sync event handler performance implications - Core Performance: Profile impact of event handler types on main thread - Community: Create comprehensive Interactivity API example repository - Training: Develop lesson plans for interactive block development - Documentation: Expand Interactivity API guides with practical examples - Accessibility: Establish best practices for interactive form controls #### DevRel - Developer advocacy: Present Interactivity API at WordCamps and meetups - Education: Create workshop curriculum for interactive block development - Developer experience: Improve create-block templates for interactive blocks - Developer marketing: Promote Interactivity API capabilities and examples ## 🧪 Hypotheses - Async event handlers provide better performance for expensive operations without blocking the main thread - Proper template scaffolding reduces development friction for interactive blocks - Clear examples accelerate developer adoption of new WordPress features - Accessibility-first development practices improve overall code quality ### 📊 Methodology - Live coding sessions to test real-world implementation patterns - Performance comparisons between async and sync event handlers - Template testing to validate scaffolding improvements ### ❓ Questions - What are the specific performance benchmarks for async vs sync event handlers? - How can template scaffolding be further improved for interactive blocks? - What additional accessibility patterns should be standardized for interactive content? ### 🔮 Future Research - Comprehensive performance analysis of different event handler patterns - User experience testing of interactive block implementations - Accessibility audit methodology for interactive WordPress content ### 💡 Implications - Practice: Developers need clear guidelines for choosing event handler types - Education: Live coding sessions effectively demonstrate complex concepts - Accessibility: Form controls require careful attention to labeling and semantics - Performance: Event handler choice significantly impacts user experience ### 🧠 Learning Styles Assessment Reading level estimate: Grade 12 #### 👀 Visual learners - Present: Live coding demonstrations, browser debugging tools, visual state changes - Improve: Architecture diagrams showing event flow, performance comparison charts #### 🔊 Aural learners - Present: Verbal explanations of concepts, real-time troubleshooting discussion - Improve: Audio-only coding explanation segments, concept recap summaries #### 🗣️ Verbal learners - Present: Clear explanations of technical concepts, analogies for async behavior - Improve: Glossary of Interactivity API terms, comparison tables #### 🧩 Kinesthetic learners - Present: Hands-on coding, trial-and-error debugging, interactive examples - Improve: Step-by-step coding exercises, downloadable starter templates ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Proper form labeling discussion, semantic HTML usage - Improve: Screen reader testing demonstrations, ARIA pattern examples #### Keyboard navigation - Present: Focus on interactive elements, tab order considerations - Improve: Keyboard-only navigation testing, focus management patterns ### 🌍 DEIB Assessment #### Cultural breadth - Present: Technical content accessible globally - Improve: Multi-language example text, international use cases #### Inclusive language - Present: Technical terminology well-explained - Improve: Plain language summaries, definition tooltips ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Clear cause-effect relationships in performance explanations - Practical application: Real-world examples support theoretical concepts - Technical accuracy: Code demonstrations validate claimed functionality ## 🎯 Conclusion This session provides crucial insights into WordPress Interactivity API implementation, particularly the performance implications of different event handler approaches. The emphasis on accessibility and proper development practices establishes important patterns for the WordPress development community. The live troubleshooting demonstrates the iterative nature of learning new APIs and the value of comprehensive example repositories. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad ### [H1] Async event handlers improve performance > [!quote] Using every Interactivity API feature in one site: Part 2 by Ryan Welcher via YouTube. Published 2024. Accessed 2024-12-24. > "async on immediately yields to main to avoid contributing to a long task" Performance optimization technique for WordPress Interactivity API. [view highlight](https://www.youtube.com/watch?v=gs2ZurEpdmg&t=2700#H1) #xref #performance ID:rw_001 ### [H2] Template scaffolding reduces development friction > [!quote] Using every Interactivity API feature in one site: Part 2 > "variants can now have their own can now define their own paths to files" Create-block improvements streamline interactive block development workflow. [view highlight](https://www.youtube.com/watch?v=gs2ZurEpdmg&t=900#H2) #xref ID:rw_002 --- ### 🔖 Atomic Split Pad (Zettel Candidates) #### [Z1] Event handler performance affects user experience - Scope: WordPress Interactivity API event handling - Pointer: 45:00 async vs sync comparison - Links: [[Performance-Optimization]] [[User-Experience]] #### [Z2] Proper form labeling improves accessibility - Scope: HTML form accessibility best practices - Pointer: 1:45:00 label and input discussion - Links: [[Web-Accessibility]] [[Form-Design]] --- ### ✏️ Fleeting Queue - [F1] Test withSyncEvent performance characteristics — video demo #fleeting #performance - [F2] Create accessibility checklist for interactive blocks — 02:00:00 #fleeting #accessibility - [F3] Document create-block template improvements — 00:15:00 #fleeting #tooling <!-- deep-read:sections end --> ## 📺 Video  --- # 📄 Full Transcript *Auto-generated from YouTube captions · timestamps roughly every 30 seconds · [watch on YouTube](https://www.youtube.com/watch?v=gs2ZurEpdmg)* **[00:06]** All right. Now, I am actually I think I might have been streaming on Twitch before. Like I said, I had everything all set up and then I changed everything and I was doing some testing because there was something weird going on with my um um I'm just going to check something. Make sure. Oh, okay. I am live there. That's nice. Uh let's check Twitch, too. I don't know what was going on there. Um, **[00:36]** I can't find my own channel. Can't type what people are watching. And we're live there, too. Excellent. Okay. Oh, look. We got this weird inception thing going. Okay, great. Awesome. Over here. Everyone's here. Hi, everybody. Sorry about that. Um, it's like my first day back from streaming. I have no idea what I'm doing. So, I think I'm live in all the places. I think I'm live in all the places. There we go. Yeah, I'm starting to get the interactions. [sighs] Anyhow, today um I'm working on **[01:10]** um uh interactivity API stuff. My watch is dinging like crazy. Okay, cool. All right, cool. So, what I what I wanted to do today was I I want to start building out all of these examples. Uh, and I so I have um a a repository that I am working on and pardon excuse me if I feel seem a little disjointed like I said I got a new monitor and it's uh it's a beautiful monitor but it's smaller than what than my old one. It's not curved. So I didn't realize this but I had a curved monitor that's sitting **[01:41]** over there in the corner and voice is too low in YouTube. Voice is too low. Is the music louder? So, I'm getting uh Let me see if I can turn the mic up a little bit. Check. Check. Check. Check. Check. All right. Let me see. Where's the gain on this side? Let's get the game a little higher. A little higher. A little higher. Up a little bit over here. Hello. One, two. Check. Hello. You let me know if that's any better. Or I can [clears throat] just turn the audio down, too, I guess. But, **[02:13]** um, yeah. Is this sounding okay? I'm not even going to try to pronounce your name. GV GV GVI JN. Hello 1212. Can you hear me? Okay, now I'm assuming you either cannot hear me or you it's fine. Either way, I have no idea what my next steps are. Cool. Snowing up there. Uh, it was it **[02:45]** was snowing. We got a we we we got a bunch of snow. It's melted right now, but um I don't expect there to be >> beautiful. I forgot about that entirely. That was amazing. Um yeah, we got some snow. Now it's gone away. Now my son's all mad because the snow is gone. Um I personally hate the snow, but slight little better, but a little more is good. Okay. All right. Hold on. **[03:19]** Check, check, check, check. Check, check, check, check, check, check, check, check, check, check. Okay. All right. All right. How's that? I don't want to peek much higher than that because it'll probably get all distorted. So, okay. Hello. Hello, Bad Dude Cord. Hello, everyone. So, uh, messed up morning. Uh, I was streaming just to Twitch by itself apparently and not to reream, which is sending out all the things across the world. About 20 minutes before my stream, uh my new studio display showed up because my old monitor uh had a big black bar down like the right hand side of it there. So, **[03:50]** it's very hard to uh do any work. But it was a curved monitor and now I have a flat monitor, but it's weird because now I have this visual this optical illusion that it's actually it's actually bending out towards me, which is super strange. And I I thought, well, there's something wrong with this. Is this how it works now? I don't know. But it uh seems like that is actually a phenomenon that if you've been looking at a curve monitor for a while. There we go. Thank you. Give a give a give a give a J in. That's that's how I'm going to say your name from now on. Uh it's from YouTube. Y'all **[04:21]** in chat. I don't know if you can see that, but uh here I'll show you the name right here. Oh, that needs to get give it give it give it give a J and [laughter] it's awesome. Uh, anyways, thanks for what is happening there. There we go. Okay, cool. So, there we go. Don't know what's going on there. Um, right. So, anyways. Yeah. So, got this weird this new monitor things. Blah blah. Stop random. Stop random. So, what **[04:52]** we're doing today is I am going to continue building through all of my little examples here that I want to build through. So, um I have a package or sorry, I have a repository that I'm working on and um I just added a template create block uh template because I want to be able to spin these things up nice and easy. So, I don't actually think I need that transformer. Um that's probably all I all I need in there. Dynamic. So, um, **[05:28]** guess I really only need a single I'm going to do just a single one for now because that's all I need really. Viewcript modules V.JS. Yep. Uh, cool. Yep. Cool. So, let's look and see. Oh, wait. Hold on. Hold on there. Um, no, that's right. Okay. So, I pulled this from my um block. Okay. Oh, this is what I need. **[06:00]** So, I don't need So, I'm just going to delete this and this. If you're not aware, if you didn't realize, um the uh Okay, so all I need is block templates path is going to be interactive block templates path. Okay, so this is going to be this interactive go in here. Here it is. Um, variants can now have their own can now define their **[06:30]** own paths to f to files in create block, which is amazing because what that means is now you don't have to have these ridiculous um sort of nested um that's not a good example here. No. Mhm. No. See, I don't even think I have it in here because I've taken them all out. But in some of my other ones there are like um like uh Oh, it's not even really a thing. Anyways, you don't need to have all of **[07:02]** these um uh nested conditionals now in mustache, which is great because a lot of times you're spending more time like wrapping it in like making sure it's not this type of of variation so it doesn't it doesn't uh uh send it out. So anyway, so I love that. So what I I have now I'm going to do this uh mpm run block assets. It's going to be WP bind. That should go into plugin. It should go into source. **[07:32]** Yeah, sure. We can do that. Where'd that go? Oh. Oh, it's in our spot. Oh, duh. This is RC. Let's try that again. Okay, I'm going to get rid of this bind to run this again. Oh, **[08:03]** relative pathing is good times. Wait, what have I done there? Let's try that again. Guess should I have a new in there called bind? I do. Awesome. Okay. So in here we should have mastering a yappy. Yep. WP bind is named the thing in is true. That's great. Bcript module. Okay. So we have everything that we need in here. So um that's great. That is great. **[08:34]** So let's see in my style.css CSS. Um, WB text example. **[09:23]** Okay, that's okay. Cool. So, I think All right. What I want to do now is I want to come up with a nice little um So, what I really like here is I have um some nice styles in here. I'm just going to grab some of these. Um basically just going to grab this for now. And I'm going to put it into text and in my style here. I should be able to do that. Oh, you know what I need? You know what I need to do? tell you what I need to do is go into the uh plugin BM PM **[09:55]** start quiet today. Who's all hanging out with me? Come on, say hey. Say hey y'all. Okay, that's all building. Let's see now in here. There we go. That's pretty cool. Um I want to have like an example of each one of these. So that's what I'm going to do. I'm going to take this thing and I'm actually going to put it into my template and which is right here. **[10:27]** Templates block active variant. I got to fix that. And this is going to be like this. All right. So now if I just uh delete bind because I haven't done anything with that yet. Um you know what? I'm just going to I'm just going to keep working on the front end here to make it look nice. Okay. So, here that looks good. Now, uh I don't need any of that. Do I need that? That's a That's a question. Do I need that? **[10:58]** Because maybe I do. So, what I'm doing here is I have this um first things first. I need to do this main um no mastering the interactivity API. I need to put that up there. So, what this should do is this will introduce a little thing on the right hand side there. There we go. That's nice. So, if I do render this and render that, it's going to um retrieve this from from here. So, each one of these will have its own example. That's kind **[11:29]** of Hey, hello Lord of Blood SRB. We are good. Kevin is going to get his coffee. So anyhow, okay. So what I essentially want to do is that for each one of these blocks, I want to have a show render PPA and show bid. Right. Right. Totally right. Okay. And so now standby because um **[12:01]** if I go to the sample hello world page. Okay, that looks right. So cool. All right. So that's that's what I want. These buttons. I forget how how how the buttons get added in, but they get added in. Uh okay, cool. So I want to make some changes to the WP text block. So this one, the whole point of this one is just to render text. So in here, this is going to say um **[12:34]** mastering the interactivity API component. Uh testing. I got to spell that right. Interactivity API. And I'm just going to call it uh WP text uh directive example. Okay. So that's inter. Okay. So if I run this now in here uh in here **[13:06]** and save this. Something's up with that main thing. I have to fix that. It's weird. Okay. So this is Okay, cool. So that's the that's the interactivity example. Sweet. Uh I got why is that we're doing weird things? So let's look and see what that is. So mastering yappy and in my render um wait in my edit am I not doing block props once I get this sort of like button down. I don't want that to be a thing. I **[13:36]** want this to be a section tag. I think I I I don't really know why I want it to be a section tag, but I don't I definitely don't want it to be a P tag. That's definitely This is the code viewer. So, this Okay, so that looks a little better. **[14:06]** All right. So, I'm going to add a little bit of the little bit of the CSS in here into this CSS. Oh. Oh, I want that in the edit though. In the editor. I just want this like this. I think the block name is not right. I I think that's completely not **[14:36]** right now because I keep changing things. Inspect. Can you all see this? Oh, okay. Don't need to zoom in. This is called That's This I don't know what the song is, but I like it. Wait, do I know what the song is? Do I have a Do I have a thing? I do have a thing. I think in my uh firebot here, I've got a little um **[15:08]** thought I just did a swear I just did one of these things. Hold on. Oh, this one. I think I can just do this actually. Let's see if it works. **[15:38]** Bang Your Head by Mat Tracker. I like this song. I'm enjoying this. [snorts] Um, [sighs and gasps] right. Okay, cool. So, let's uh let's get back over here then and let's see what I'm going to save this and let's see what this looks like. Okay. Don't know why that's indented and this is not in in indented. I don't really understand why. Like, okay, that's working. I don't know why it's indented like that. I mean, I don't hate it, but let's see if I can figure it out. **[16:13]** Or maybe this is Oh, there's no margin left. Seem to be doing transform margin center. Huh? Oh, is that it? No. **[16:47]** Okay. I don't hate it, but it's kind of strange. So, let's >> Oh, you made a wise choice, my friend. >> Yes, you did. Thank you for the sub, Lord of of Blood. It's the best name [laughter] ever. Love it. Love it. Love it. Love it. Lord of Blood. Blood. This probably makes more sense. You know what? Now that I'm thinking about this, this probably makes more sense. >> Wow. Hi. [laughter] **[17:20]** That makes me laugh every time. Every single time. All right. I think what I need to do is I need to edit the site. And I'm going to instead of putting this is the content. Um I'm going to go ahead and put [music] um the uh mastering interactivity API. I'm going to put this somewhere here. Save that. And now I should be able just to delete this out of here and not have that matter. And then if I go back over uh where my hair here. Yeah, there we go. >> Cool. So now, **[18:02]** amigo. [laughter] Oh, that's so horrible, [laughter] but funny all at the same time. Um, it's worth stopping the stream for anyhow. Okay, cool. So, I I like what I have set up here. So now now I have this sort of like s h h h h h h h h h h h h h h h h h h h h h h h h h h h h h h h h h h h h h h h h uh code viewer block that just kind of sits in there like I don't think it renders anything. Um well it does but it it renders it over here, right? So that's what's controlling this. So so these buttons are going to basically **[18:32]** inject the render PHP for this, right? So um which doesn't look great, but we can figure we we can we can hang we can handle that. And then we've got context.ext and then in here we can say uh this is wrong, this is not right, but we'll fix that, right? Um, how do I get on that list? How do you get on that list? I'll do that right now. Bad dude. Uh, how do you get on the Okay, I have to manage my roles. Stand by. Rolls and ranks. Auto shout out. Are you not on here? I thought you were. I'm going to add you. Here we go. Uh, **[19:14]** oh my god. bad dude court. All right, here we go. You're on there now. Try saying something now. Lord of love, of course you you can be on there. **[19:53]** Banduda court. [laughter] Yes. Okay. Lord of Blood, fire away. You're You're on the list. Let's see what happens. See what happens when Duda bad duda. Yeah. Um, so the way it works is the first time you show up in chat and say something, that's what triggers this. So, uh, I just added you, uh, Lord of Blood. So, if you add it, if if you chat now, it'll say it. There we go. I hope **[20:35]** >> Lord of Blues Serb [snorts] fantastic. Fantastic. Well, I'm glad we could have this moment together, everyone. That's fantastic. And if you want to get on this list, you don't have to do anything special. Um, but you just have to ask or or subscribe. No, I'm kidding. You don't have to spend any money on my channel. But, um, yeah. Or just use your prime sub. You can use that. But I can definitely put you on on the list. How do you get off that list, Kevin? You **[21:07]** can never get off the list ever. You are stuck on it forever. Okay. If you really want to get off the list, Kevin, I can take you off the list. >> [sighs] >> man. Awesome. Okay. So, um Okay. So, I'm gonna I'm gonna start working on my example here a little bit more there. So, my my uh Okay. So, Okay. So, I think what I'm going to do, did I do that already? Let me check. I'm really not liking uh how this is all set up because **[21:38]** I need like I just need a set of files for each one. Sorry, I'm nerding out here. So I think what I want is I'm going to get rid of I'm going to take everything that's in default. This is what what is this plugin? So plugin has just default files. So default files don't need to be in a folder called default. They just need to be in plugin. So I'm going to change that. So this is just going to be plugin. And this is the same. So blocks just needs interactive. And that's going to **[22:09]** be just the files in there. Everything else can go for now. So we have block, we have plugin, right? So then in here I should just go block and that should just give me all interactivity API blocks. Now I am going to add I am going to add a TypeScript um I'm going to add a TypeScript variation to this um because um I want to and actually what I **[22:41]** can do is I can add all of this stuff into the main part. So all of this Oh, Kevin. Yeah. Well, without Kevin, my stream would fall apart. Uh, Tobias Dirkson has a question from Twitch. I have a question. Let me let let me just highlight this question and we and we can take a look at it together. Take a look at it together. Here we go. If all blocks in schema v3, you bring the black end is load iframe, **[23:12]** right? If I have an editor CSS for more than one block, I should load this in all blocks JSON with editor style. Oh, so [clears throat] so you uh Tobias, if I'm if I'm understanding the question, if you have a editor CSS for more than one block, should I load this on all blocks JSON with this editor style? Yes. So, so editor style is going to be um **[23:45]** CSS has only loaded in inside the block editor. So, that's that's accurate. Um, the thing to keep in mind though is that it won't be loaded. It won't be loaded if the block isn't on there. So, if you have one CSS file that's common for a bunch of blocks, you might want to consider doing it slightly different way. Um, it really it really depends on what it **[24:15]** is. So the editor style is supposed to be specific to that particular block. But like in my case, um, so like what I'm doing here is sort of like what you're talking about. Like for example, these buttons don't get styled in editor assets. Yeah, you could do editor assets. The thing that you don't want to do is load CSS that that you're not using, right? But if you can, what you can do is No, that would that would only work in the front end. Um, you could do it and you could check for **[24:46]** the existence of that block, right? If the block is in the content, but it's not really going to help you too much. You know what? Honestly, for the CSS that you're loading, it's the editor. I wouldn't be too worried about like mad performance issues because it's the it's the editor. You're you're logged in. You're not getting any any benefits of caching or any of that stuff. I've always I and this is just me, but I've also I've always just kind of thought of the of the editor as like eh doesn't matter if it's a little slow. Well, that's just how it is, right? Um you know, you're not going to the editor **[25:16]** CSS only gets loaded loaded in the block editor, so it's not really going going to affect stuff, right? There's a Yeah, there's a custom hook in there, too. But if it's block specific, I mean, if the issue is you don't want to load stuff that's not on the page, honestly, I wouldn't worry about it. I I would just add it to all the blocks and then as soon as you insert one of those blocks then you get the editor stuff. I think I I probably have to look and see what you're doing. Like maybe there's some specifics around what we should do there. But um jaw do you know the thing? **[25:48]** I think do you know what I'm saying? Um editor style editor before I did with this. Yeah, I mean that'll but it's not in the iframe. Yeah, you're going to want it associated with your blocks. because it's not it's not going to be targeted. It's not going to be um scoped to the iframe. Yeah. Yeah, because the thing is if you **[26:19]** got say like say you've got five blocks like what what bad court bad court is saying bad bad duda court is saying uh is is is probably the the the way to go because if you have any of the blocks loaded you want to have all the CSS right I think that's probably what you want to do but I don't know what do I know okay so this is the text directive okay so let's get get in the text directive okay and so pass listeners text okay so in in here we just want a really simple Um, **[26:52]** these buttons. See, I really wish I could insert stuff into this because I don't these these these things. I don't need these things. That's what I don't need, you know. Um, in in in the Vue.js. So, what's the best way to demonstrate this? Like I was thinking like that because this sorry right in my render I set some context some local context and **[27:37]** weird. So this is setting context and it's it's it's getting pulled straight from there. I could also go Do I need config? Why am I What am I using config for here? Okay. So, the ba the most basic example is basic is pretty much this. Like we have **[28:08]** some text. You know what? I'm going to change this slightly. What I'm going to do is I'm going to do um input and this is going to be type is we're going to go. Can you tell it's been a while since I've done any of this sort sort of stuff **[28:39]** in just regular uh there. So, what I want to do is when this gets updated, I want it to um I want to update this text. So, I'm that's what I'm going to do. And then here, I'm going to wrap this in a div because I want this to break out. And this is something that I just we don't need to worry about this right now. So, I'm going to go WP assertary data-wync on **[29:09]** uh Oh my god. Input. What? Oh my god. What is the change? Change. I guess it's change. God, this is going to be uh callbacks.update update text. Right? That's what we're that's what we're we're gonna have. So in here I need a call not sorry not call back it's going to be not call back it's going to **[29:40]** be actions. So then in my actions I'm going to have a uh update date text. No it's going to be a function. And then I should uh do I need the event uh console.log evbt event target value. I think that might be what I need. Let's go. Let's **[30:10]** go. Let's find out. Didn't work. Am I building What is the Oh god. HTML input um DOM event **[30:44]** typing input event. So is input when it's typed. Oh my god, so bad. Input on input. I think that's that must be it. Been doing too much React input. Right. Right. Somebody tell me what I'm doing wrong. There we go. Okay. So, it's on input. So then when the input changes, we're going **[31:15]** to get access to it. So I want to I want to try something here. Async on. Do I have access to this still? I don't. Okay. So, here's a really important thing to understand. Um, okay. So, there's this is not the point of this, but I'm going this is something that I that we need to we need to understand is that we don't have what is this? Is there a debounce built in? Uh, don't don't believe there is a debounce built in. No, it's it's just reacting too many **[31:46]** changes. But when we do async on as opposed to just on like um check this out. Okay, so on. Um so if I if I have two of these, right? And I go um this is going to be just on and this is going to be async. Okay. So so if I refresh this, so this one should be async. This one is just on. So the async doesn't get access to because so what the async on does is it basically just um makes the um makes the **[32:19]** listener passive I believe. Um because what hap yeah it makes the the listener um passive as opposed to where's a good example of this? um because it it basically surrenders up the well it's like so when you add add event listener passive right so add event listener passive right you you don't get access to the I **[32:49]** don't think you you you um have access to where is the freaking passive thing right so so this this it never calls prevent default so you don't get access access to the event to the to the item to the event object, right? Um which is fine in a lot of cases, but in our case, we actually want to do that because um if because we we need to get access to event.target value, right? So like we can also um so if you want to call like **[33:21]** um prevent uh what the hell's the the thing called? Prevent default. Like if you had a link, if you had like an a an a tag in there, you clicked it. You want to call prevent default. You can't do that if you're calling it async. So you have to actually Yeah, it's very useful when scrolling. That's a good example. But if you don't need access to to prevent default, let me just explain this a little bit better, I think. So if we look at um on and on. **[33:52]** So this is so on async is is more performance. it immediately yields to to to main to avoid contributing to a long task. So I I have an example where I have two two scroll wheels and and basically on scroll it's doing this this crazy thing where it's like generating a huge amount of numbers in the background but the scroll is is interrupted until that particular function runs. Whereas if you do the on async it does both but it it yields to the the main thread. So um it's important to understand if you need access to the event that you can't **[34:22]** use async. You can, but you have to wrap it in there's a thing you you have to wrap it in um what is it? Uh with scope I think you have to wrap it in with scope. Is it with scope? Oh no, sorry with sync event. That's what you have to do. You have to use the with sync event. So if we were to take this with sync event thing and add it to our um to our our function and call it with async, it will **[34:52]** work. So, let me show you that. So, so if I do this, I'm going to go update. I'll call this update uh with sync, right? That's going to be I have to import that somewhere. So, we with sync event, right? So, we have that and then we then we just basically wrap our function in with syn with sync event. So, we're going to just do this with sync event and paste it, I **[35:24]** think. Oh, what? What have I done? Oh, right. So, now this I think this one should work. So, if I change it o over here and I use async on and I use with sync event, I should I hope get the uh I'm going to just delete this other one. So, so it's not weird looking. Right. [clears throat] So, if I Oh, **[35:57]** didn't work. Am I doing this wrong? Tape with sync. H. Okay. Well, that example didn't work. So, why didn't the example work? Okay. Blindly just blindly following **[36:41]** It's not even called. That's the weird part. Hold on. Let me just Okay, it it Well, yeah. I I I don't know if it adds that specifically, but it acts like that. The one thing it doesn't do is like the only once thing, though. Um, so let me just weird man. Okay, I'm not getting any errors. But if I change this now to on input. **[37:14]** Okay. So that's interesting. That's super duper in interesting because I need access to that and the update with sync doesn't seem to want to do it for me. Wait. **[37:55]** H [sighs] it's definitely it's definitely kind of like the passive thing, right? Um that's basically what it's doing. It's making it passive. Um now I when so I put together an example that I can show you guys actually. Let me show you this example. Um passive uh passive listeners. So if I save this, I come over here and I I I go to passive listeners. So this one I'm scrolling. **[38:27]** You see how long it took to do that? And this one I'm scrolling and it immediately scrolls, but it's actually still calculating this stuff in the background. So that's the difference between data on and like data WP on and d on sync. You know what I'm going to do? I'm going **[38:57]** to just jump into Slack. I'm going to see if I can harass somebody from the the the the team. Um **[39:36]** Let me just uh just grab Sorry. Let me grab my Twitch here and I'll just uh drop it. All right, I'm just I'm just completely harassing the uh the interactivity API team to see what that's all about. Okay, cool. Anyways, but we'll move on. So, the idea is I have to use um I have to use the on input and I I don't need this. I just need to run this. Right. **[40:11]** And what this what what this is going to do is in my um is this get rid of passive listeners. Um right now if I uh this gets updated I should have it console logged. Oh. Oh no. What have I done there? Broke something. Let's take a look. Something's broken. **[40:42]** Oh, no. That's right. Oh, that I don't need. What? No, I do need that. What is What the hell's yelling at me here? **[41:15]** Oh, that's what the problem was. I don't need that. What? Oh, then I need that. Holy crap. How long is it going to take me to figure out this issue? Okay. Woo! Woo! Boy. All right, let's run this again. Where did that go? So, this should be getting updates. It does get updates. Now, I I should probably I could probably run uh debounce on this. Could write my little **[41:47]** own little debouncy thing, but I'm not going to. All All I'm going to do is I'm going to say uh Oh, I have to get context, too. So, um get context. I wonder if I should just keep this in state instead of of of using context. I think I might do that. I might just define some state up here. And we're going to go WP um interactivity state and the state **[42:18]** is going to be whatever text that's going to be our store. And then in here, we're going to have an array. And the array is going to have text. It's going to be just this stuff. All right. So, do that. Do that. Get rid of this local context. I I just want to keep these examples as simple as I sort of can at this point because I don't want to confuse **[42:50]** the people. I can go in there. And this needs to go away. Holy holy. What is this? Found. Oh, need a comma there. That's yelling at me for something. Oh, there we go. So, now I should have text. I should be able to get rid of this now. I don't I don't need that anymore. I'm just going to close that div. So uh it's **[43:21]** gonna be state text. So this should start with this text is stored in in the no this this is the default. This is the server side rendered text call that right here. Serverside rendered text. Update this. This should update. Okay. Um, **[44:03]** man, I've written way too much React. I I'm just putting labels on on everything. Okay. Is is there a placeholder? There is. There is a placeholder. Uh, I'm going to echo this out. Echo. Oh, no. I'm just going to **[45:12]** Oh, come on. Okay. So then now in here in my view I should be able to say oh first thing I have to do this I have to dstructure the state from the store right we'll do that I don't need either one of those now and then I can just say I should say state equals to that and then this can go away. This is like the most basic version of this, right? This is breaking assignment a **[45:42]** constant variable. Oh, duh. Text. Okay, so that's it. [sighs and clears throat] **[46:21]** Okay. And that should show that stuff. Okay. I need to update that, but that's not I don't really care about that right now. So, this is Okay. So this is up um **[47:22]** Do I need that label? Okay. So this is defining our state and then now it's being up updated when we this is updated from the store. Okay. **[47:53]** You know what I'm going to do? I'm gonna ask code. Do I have code going on here? I'm going to say update the uh input field in the WP text block uh to uh match the overall styles for the block. **[48:23]** Use a light background and dark for text. See what that does. Include. Clude. Clude. What did I say? Clude. [laughter] I'm using include. I've been using cloud code cloud a lot **[48:53]** um for styling and front end stuff because I'm not good at that stuff, you know, as anyone who's watched me on the stream for any length of time. Um, sure. Let's see what's it look like. Oh no. Uh h I don't hate it, but **[49:25]** this the style is in the cloud nowadays. Anyways, I found async source. What we got here filter? Yep. So it is adding passive true. **[50:10]** Yeah, that's that's basically what I was think what my my understanding was that's what it was doing as well. Um, which is pretty cool. Oh, this is neat. So, warn sync event on Oh, wait. Is this is trunk though? I don't know if I wonder if I if I Oh, you know what? I wonder if I install the Gutenberg plugin if that'll change any anything here because I I don't have it installed. I just have just regular old Corey core. So, we're going to go ahead and install the Gutenbergs. Love how **[50:41]** Matias is the author of it. Hilarious. So, let's go into Gutenberg. Let's go into Do I go into experiments? Let's see. Data views full page content only. Nope. Okay. So, let's back here. **[51:13]** Oh, check this out. Yeah, look at this. The use. So, so this is the other thing. So, I I was talking with them. Can you all read that? I don't know if you can see if if I'll zoom that rambling. So, the the data on async is deprecated and will stop working in in 7.0 I know because what they wanted to do is they wanted to make everything use on sync by default so we don't have to fight with it, right? But so so use that on with this with sync event helper. So let me see if I can get that happening now. Uh what have I done? Okay. Oh, uh, **[51:46]** before I do that, I'm going to get Clo to, um, might just get rid of the label, make it visually hidden or something. The input field is too wide. Make Make it fit the container. Container, dumbass. I wonder if it if if I started calling **[52:17]** it a dumbass, what what it'll do. All of a sudden, my lights start to flicker and a robot appears behind me. Let's see. There we go. That's better. I might I'm Yeah, I'm starting a war with a robot right now. Right now. Right up in here. Okay. So, I'm going to just hide this. So, back in my WP text. So, what I'm doing here is I'm going to go uh with uh sync event, right? And that **[52:51]** needs to go away. Then here I'm using on sync. But I'm not using on sync. Where am I using on sync? Oh, where where am I using on sync? On click on async. I'm not using async anywhere. What the freaking where I don't think I'm actually using it **[53:22]** anywhere. Oh, it's right there. On async click. On async click. Okay. So, that's where it's being used. So, I'm going to go on uh dash async input. Right. This Did that just work? Refresh this. Weird. I don't really know how that's working now. **[53:57]** Okay, I'm going to get rid of that. So hopefully this shouldn't trigger any. Okay, so that does trigger errors. So if I get rid of on sync, it doesn't trigger any errors. Still works. Works both ways actually. So I don't know what what that's all about. So okay. All right. Okay. Okay. I don't know. So this is just running, right? **[54:29]** I'm not using with sync event. I should console.log tar event, right? Oops. And it's I'm getting a proxied event prevented. Oh, I wonder I wonder. **[55:06]** Okay, hold on. Like maybe it doesn't Maybe there is no prevent default. Is there no prevent default on a uh it's undefined? Okay, let me try something else. Um I'm going to just do a uh an a tag. A a traf is going to be **[55:57]** Okay, I'm going to define a click event action. **[56:33]** Using the synchronous event function in a store action without wrapping a sync event is deprecated and will stop working in 7.0. Please wrap the store action in with sync event. Okay. So, okay. So we'll do that. So I need to wrap this in with sync event. Okay. So that works but I don't know why. **[57:09]** Huh? Oh, that's fine. So, if I wrap this in with sync event, what's going to happen now? **[57:43]** It's undefined which is fine because I I don't think there is a prevent default on that. But do I I don't think I need access to any of that. I think I don't really understand what the benefits of this. Raju, hello from uh YouTube popping in to say hello. Hello world. How you doing? Okay. So, okay. So this is so okay. So if I refresh this now and that that works. That is just **[58:14]** straight up working. I don't do I need this sync event. I don't think I need the sync event. So I don't see the benefit of one over the other right now. And I think it's because I don't understand a lot the theory behind what's going on. And maybe with this particular event, it doesn't matter um because it's not doing anything other than updating. So, I'm just going to keep this simple and we're going to just do this. Um, and I think that's all all we need to **[58:45]** do. Um, I think we'll just do that. There we go. Okay. So, that's a that's a that's an example. I wish I had given the interactivity folks uh more of a heads up because they probably would have they're amazing. They probably would would have dropped in here to uh um tell us something. **[59:17]** I have to [snorts] sneeze. Oh. All right. Okay. Cool. So that that's a that's a fairly Oh, no. Okay, I need a should put the label. There we go. That looks better. Now I have to say um I do ID, right? Any ID? Um any accessibility people on the call? I am trying very hard to get better. **[59:52]** Yeah, I think so too, Kev. I think I think these simple examples don't really make a lot of sense. Like the the example that I was showing where we're like scrolling and then processing primes up to 10,000. Uh that's a that's an extreme example, but I think you're right. I think this is a case of like when you're doing expensive things, you may want to take it off the main thread said. Um um **[60:32]** is this is this correct? for those on the on the stream that are accessibility um who are good at accessibility u I am trying to make a concerted effort to be better at accessibility. So I have this label that I want to keep there and I have an so I this input will now understand that it's labeled by this this right I'm open to all sorts of critiques on on **[61:03]** this so if there's stuff that we should do you let me know I don't want that ID though. What do I want? I'll get conflicts. Oh. Oh. So, I need to be a bit like this is this should be more verbose. Update uh text. Update WP. Um >> text example. Is this what like so I I should be more **[61:33]** verbose is is what you're telling me to be a UYU ID. Yeah. Yeah. So if if I keep my naming convention to be like um you know update then the binding if I need this put four on on the on the label and an ID on the input. Put four on the label. Oh. Oh, do it that way **[62:08]** for Oh, I see. I see. So, this will this will be um WP text example um input something like that. So, you do that, right? Is that functioning the same thing as as like it's just going in two different directions there? Okay. So, the label is for this. Okay. I'm happy with that. As long as **[62:38]** this is this is accessible, that that would be cool. So, this is all I want, right? That's all I want. Um I I just want to make sure like I'm just trying to like work it into like my daily, you know, just like I'm just this is just how I do stuff now, you know? That's that just because you don't make those those if you don't make that effort, you don't get any better at stuff. Okay. So, let's see what this looks like on the front end. Oops. We're here. So, we got this. This is the new text. Okay. **[63:10]** All right. So, I need to do that. So, where I'm I'm I'm I'm handling this stuff is not in there. Oh, I see what you're saying. I I I see what you're saying. Okay. So, um am I doing it in here? I think I am doing it in here. I am doing it in here. **[63:43]** So what I need text is I want to grab basically this whole thing and I'm going to replace this whole thing But **[64:26]** okay, I don't uh need any of that, Oh, I don't want to see any of that stuff in there. So, if I refresh this now and I render PHP, I should get all of that. Okay, some extra space in there, but that's a problem for another day. Um, I don't think that's going to do that **[64:57]** formatting that I want. That's fine. Uh, okay. It's a bit rough. I I need to figure out a little bit better way of doing this. So, I'm just going to grab I don't need that list with sync event. I'm just gonna grab all this. And then in here, I'm going to update. Oh. Here **[65:31]** we go. Ah, what? Oh, I do not like this formatting at all. So, that's the store. That's the state. We're going to get the state wp text and then render.php. is going to show what that is. This this this is not I don't think that's I don't think that's actually the right thing, but we'll get we'll figure that part out later. **[66:02]** [sighs] U oh Carolina, are you saying yeah, because I'm doing it wrong? Oh, only use Arya stuff when there's not another option. Awesome. Okay, cool. So, um Okay, so that's cool. Okay, I think this I think there's ways of making this look a little nicer. **[66:34]** Maybe look a little nicer. Yeah, that looks a little better. No, it doesn't. [laughter] Looks like crap. How do I have this set up here? Um, **[67:07]** I want to do that. I want to do that. Is that how what I've been doing? How I've been doing that? Yeah, that's how I've been doing that. Okay. This is so brittle. So brittle. So this needs to come in one more. And this actually needs to come in one more. One more as well. There we go. **[67:44]** Beautiful. Okay. So that's kind of the idea. So then each one of these will have its own thing. I'll just style this. Make this work. Maybe this needs to not be floating like this. I don't know. Maybe it just needs to hide and have a little show and hide dio. I don't know. Okay. So that one I think is done. What time is it? Okay. Loads of time here. Loads and loads of time. So I'm going to go ahead and commit wp text to um what I have going on here. I'm going say get add **[68:15]** what is it plugin source wp text and you say get commit message adding the wp text example get push that's better lock that okay uh what else do I have going on in here um I'm going to add the templates Am I going to add? So am I happy with this mastering yappy thing? **[68:47]** I think I am for now. Get add plugins or plugin source mastering. Get commit message. It's good enough for now. Now boom, we push. Okay. Okay. So, we should have all that. No, it's that. Okay. So, now I want to do um **[69:21]** uh Okay, so that's So, hold on. So, let's see. So, in here we've got like context bind. So, I have text. So, bind is probably a good one. [snorts] I could probably just use this this example right here. **[69:53]** Oh, you know, it's funny. There might be like pretty decent examples here. All right, let's take this li **[70:40]** All right. What? Oh, what happened to my packets? JSON [ __ ] What? **[71:15]** Oh, okay. I don't have a package JSON. I did have a package JSON. Did I delete it? Let's check my trash. How do we Let's put that back. Uh, where's the super weird? Don't know why that's not there. **[71:46]** Try again. Okay. So, we're just going to build out a new little uh blockeroooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo here. What's an assets? Oh, I don't believe they're active because it's the default variant now. WP bind. **[73:04]** H. Okay. So, it's weird. I wonder if it's because it's not a part section. Sorry, I'm realizing I'm not saying in my head what I think what's going on. No, that's doesn't seem to be outputting anything super random. Let's look. Oh, because there's no render.php. **[73:35]** What is going on here? This is wrong. Hold on. My template's all borked. A okay, I'm an idiot. So, I didn't add the **[74:07]** render either. I need to add render. There we go. That's better. [laughter] Okay. So, clearly there's some things I have to fix with my template, which I will do that now. First of all, I need both of these stupido things in the **[74:37]** template. They are not. They need to be in right in here. Right. That needs to be in there. This needs to be in there. I also want to have supports interactive is true because really I need to have add custom scripts. Oh, I don't actually need custom scripts because I'm not using this anyways. Whatever. It doesn't matter. Uh so that **[75:08]** should be all we need. So I don't need to define this right now. Okay. So I don't need any variants. Okay. So this should this should give me everything that I need from now on. The problem was it didn't have viewcript module render or didn't have render.php in there. Didn't have support interactive true. Didn't have any of that stuff. Um, so that's stupid. And does that mean that this the oh this this build won't matter for this template because I'm only using it in in no plug-in mode. So that's not actually ever being scaffolded. So that's fine, too. Okay. **[75:39]** Okay. So let's fix. But what do we need to fix in WP bind? Um, uh, what do they what do they use for the icon? The icon is What's the icon in here? Smiley. What's it in here? It's also not set. So, we're going to add that to our template as well. Oh, sounds like my kids home from school. **[76:11]** I'm going to add the icon in in there. I'm gonna I don't like that icon. I'm gonna have to come up with something different for for these. Um, okay, cool. So, now let's come back over here. Grab this. I have the smiley icon. Okay. Uh, yeah, I don't really like that. What do we have in here for There it is. That's what I want. Okay. Mastering your activity API here. Um, okay. So, what I'm going to do, I'm going to make some changes here. **[76:42]** I'm going to in the first things first edit change that message to be this. And that's not the one I want. Okay. So, this is going to be the bind example. Bind. Okay. And so, what I'm **[77:15]** going to change now, let me grab this. Back in my template, templates block edit. It's going to say different things in here. So, this is going to be what's it going to be? Um, **[77:46]** slug. Slug is where I want it. And here editor this is going to say slug because that the name of the slug will will be the directive name and that's how I I want that to work. So in bind now this is going to be WP. Okay I have bind. Okay. So if I refresh this um save refresh. There we go. Okay. So if I look at the front end now I should have this. That's totally wrong. Oh it doesn't matter. I'm going to fix that up. Okay. So what is **[78:17]** the example that they're showing us? Maybe let's take that code over here. It's a bind example. I'm just going to grab all this. I'm going to do this. I'm going to go into render and I'm going to put it I guess in here. I don't know if that's valid HTML. I don't believe it is. Uh the other thing is this needs to be escaped. So WP KS if if you ever want to do this, the best way to do it is to use data. WP Kisses data. And that will not **[78:48]** bark all the stuff that gets thrown out there, but it'll uh and it'll allow you to keep keep moving here with your with your stuff. All right. So, toggle. Okay. So, I don't have any of that. So, um I need the V.JS stuff which is in the example down here. Grab that. I'm going to jump into view. And the store is going to be look like. Okay. So, just need the inner stuff. Just need the actions really. Really, I just need the **[79:18]** actions. That's all I need. Just the actions. Oh, the other thing I I need to do in here is I need to add um the store name. So, data WP enter active is going to be WP bond. New my store. I think this is going to work. **[79:49]** Oh, I didn't I don't know. People always says KS. I've I've heard it pronounced kisses. So, I don't Okay, you can call whatever you want. Get context is not defined. You know why it's not defined, friends. I'll tell you why it's not defined. You listen to me. It's going to be get get context. That's what we need out of there. Toggle that. Looking good. Okay, so it looks horrible, but that's okay. We'll fix **[80:20]** that. Um, I need some buttons, some button code. Um, I have button code in the mastering EIP stuff in styles. I have uh that show code button. No. Oh, I think that is actually what what what I want. I think I want **[80:52]** to grab this. And then in my not in there, but in my bind, my not my editor, in my style, I'm going to go like this button. Right. There we go. Toggle. Boom. Ha. Oh, hey. **[81:54]** Where's the toggle menu? Does LA have to be net? I I bet you like kisses, Kevin. [laughter] I wish I read that sooner. Oh, good times. Okay, so is uh so we use context is menu open. So again, should we be I don't know. Should we be using like the **[82:24]** Okay, so anyways, so clean this up. I think we like we don't need that. Um, what's it? Uh, list **[82:55]** style none. Okay, there we go. **[84:17]** >> [snorts] >> Okay. [gasps] So in the state, let me do a little like um get **[84:47]** no menu status. God, I always forget how to do this. So, it's just a function called menu status, right? And it's going to be um context is going to be Yeah, there we go. Closed. Open. That's what I want to do. Menu is open. Menu is closed. I can make that smarter. Menu is closed. Menu is open. Menu is **[85:19]** closed. Menu is open. Closed. Open. Closed. Open. Closed. Open. Bam. Cool. Awesome. Amazing. Amazing. That's such a amazing example. Um, so [clears throat] what I do need to do, what I'd like to do is have a way to add the buttons. I was trying to do it with filters like what I was Is it still in here down the bottom? No. I had a I had a I had a filter where I was trying to like like filter the the **[85:51]** output of the block, but it just uh just didn't didn't want to happen. I guess I could go like render could do something like add filter render block that's going to be mastering yapppind right **[86:24]** like what content I should assuming I assuming I have the f the uh the block name correct there. I should like this should break. Oh, it didn't break. What's in this block? **[86:59]** Okay. Too few. Oh, yeah. Of course, I need to add the old the good old uh 10 and two. Fresh that. Nope. What? Okay. So, that's because there's no there's nothing being rendered. Return content, right? That works. Okay. Um, bar **[87:30]** don't block name. Not gonna not going to be happy there. That's going to that's going to give me another one of those. [laughter] >> And you look like the guy I would rob. I look like a dodgy thug that would be outside of bodega asking people to buy them. So liquor. Buy them some liquor. Yeah, that's right. **[88:01]** Um, I should have a Okay, WP. Oh, okay. So, that's what I was doing wrong. That should just be the name of the block. Should just be like this. So, it should just be able to do this. Boop. Did that work? It did. It worked. Okay. **[88:31]** So, if I return that, that's that's cool. And that will still work. So, what I was hoping to do Why is this block name? Oh, because I I don't need to use block name. So, shut your face. What I was thinking about doing was maybe doing something like this. Um like grabbing the buttons. This is going to be so janky because **[89:01]** do this in a particular way. Like maybe what I can do is wrap. Here's what I'll do. I'm going to take I'm going to go like this. I'm going to return it. I'm going to add another section tag. Is this going to break though? I have a div. I don't know if this is going to work. I add a div right to to the content to the content. Uh content. It's weird. All right. uh div, right? If I refresh that, it does get a little janky. Immediately jankiness. **[89:33]** Immediate janky. And then if I take the text and I go in here and I grab the the buttons that that I want. If I just do this. See what this does. Oh, and change the snippet. Okay, that's fine. So if I doesn't work because it needs to be Why does not work? **[90:09]** Okay. Oh, because it's not inside the store. That's the problem. because it's not inside the store. So, what I need to do is is put it into It's annoying these these It's being rendered, but it's not being rendered correctly. Oopsie. What are your thoughts on the new abilities API? I think it's really cool. I think there's a lot of things that that we don't know that what what we can do with it yet, right? So, I think it's super neat. I think uh it's going to **[90:41]** change a lot of stuff. That's my opinion. deal with it. Uh oh. Isn't there like a WP process? That's what I want. If I do that, I don't know what this is going to do. This is jank. Why is it yelling at me? Okay, fine. **[91:14]** Huh? Okay. I didn't think this would work because what I what Oh, what I wanted to do is I wanted to just inject that stuff, but I can't do that with the um I don't have access to it with the tag pro. Like, so there's I mean, I could do some really crazy DOM stuff, but I'm not going to do that. I'm just going to basically add that in. basically just going to add it in the uh **[91:44]** in the example code down here. Just right here is where I'm going to put that. So now we have this button. So see that's that's working fine now. Um right. So we'll just do that. Now I have to like add the the code for that. Um this is going to be wb bind. This is going to tell me this doesn't exist. Right? Because in in here I've got all this defined somewhere. This is going to get super ugly. Super ugly. **[92:19]** I think I need to have a better way of storing this stuff. Yeah, I think I need a better way of storing this. But so then what I need to do is add basically another one of these. This is going to be bind and that's not going to be that PHP. It's going to be different PHP. So, it's already going to get janky. So, I grab all this. **[92:50]** Oh, sorry. Grab all that. I plunk this into here. It's going to be one, two, three, two, three. Uh, boom. Snip it. Oh, I'm adding a snippet. Sorry. This plunk is in there. **[93:22]** So, I just need to do this one, too. No idea what that's going to look like, but we'll see you in a second. Oh, what? [sighs] Invalid body indent. This is the stuff **[93:53]** that drives me crazy. Okay, so where does it sit? Oh, [clears throat] **[94:46]** fix this. Oh, did it fix it already? Oh, no. No. Yeah, cancel. Be gone with you. What is this? Oh, close. Close. So, this is expecting one, two, three, four. **[95:26]** Okay. So, that's not going to yell at me now. And that's So, No, that's another one text. Oh, you know what? I put it in the wrong place. [laughter] Such an idiot. Okay, I'm going to grab this. Uh, I'm going to go like this. Copy. And I'm going to come down here and I'm going to place that. Is that **[95:58]** what I'm doing? Yeah. And then this can just go back to regular old the other one which is just I think I just said PHP. There we go. It's like pretty great. Okay. I I gotta do something better with this. Almost like a sidebar that I kind of want to have get thrown out there. Uh all right. So then then my bind. And I'm going to use the store that binds everything. **[96:30]** And down here, bind is going to be that. That's going to be this. Okay. So, **[97:07]** all right. Well, that's a little better. So, this is this is kind of what we're going to be doing here. um for each one of these. I don't know how helpful this is, but it helps me a little bit. Okay, anyways. Cool. Well, it's 12 o'clock and I think I'm going to call it a day because um yeah, I just think I need to call it a day. And uh you're all amazing. Thanks for hanging out with me today. Terrence, um you are always welcome here. And wait, are did you get announced? **[97:37]** Let me check. Let me check and see if you're on the uh you're on my thing here. Oh, Rules and Ranks, are you in here? Let's see. Yeah, you're in there. Okay, cool. Awesome. Okay. Well, thanks everyone for hanging out with me. Um I will chat with you all next week and then Oh, wait. Next week. Yeah, 20th. Yeah, I'll be there next week, but I won't be there the following week because I will be traveling to Word Camp Sophia in Bulgaria. Uh, I'm very excited to go and hang out with those folks. **[98:07]** Before you go, any suggestions what to readwatch to learn more about the interactivity API? Yeah, sure. Um, great question. I would go to the interactivity API reference in the developer docs which I will drop in chat. Um, right here. Uh, I think that's Wait, I put that in the wrong place. I'm going to put this in. Sorry, I should have put it in reream. So, put in reream there. I that's a great place to go. Um **[98:38]** trying to think of some other really good ones. Um I have some older streams that might help. Uh I have a couple of of of of repositories that you might uh find helpful. Um, specifically this one, the interactivity API gall the gallery slider that I did. So, this is one and this one uh is a to-do MVC app. **[99:08]** I just recently updated both of these. So, they have they should have the most recent stuff in there. Um, yeah. I mean, anything trying to think. I'm I'm I'm trying to be a bit of the the leading authority even though I'm not. But um there's a lot of really great work being done out there by um like Seth Rubenstein and um um um I'm drawing a blank here. Michael Terry is doing some some some really cool stuff. Um I would just uh dive into the docs because there's a lot a lot **[99:38]** happening. Um the these core concepts are a really really great thing to understand. Um it it does explain the reasoning behind things. Um like the differences between declarative and imperative code and why reactive is is the way to go. Not ReactJS reactive but the idea that like when the data changes the view changes, right? Um that's that's kind of it. Um **[100:09]** the that's yeah and the the idea of how of what directives are and why uh this con the concept of uh state uh global state local state and derived state these are very important concepts to understand um an example oh another example that I did um the I have light toggled button um that you can take a look at uh it's on my block developer cookbooks site on the bottom light dark toggle. This will walk **[100:40]** you through sort of building one. There's aspects of the interactivity API in there. Um so you you can take a look at that. Um yeah, so the concept of global state versus local state versus versus drive state. Um looks for local context. Uh the slider is a good example of um knowing when you should use global state versus local context. Like for example, if you have two sliders on the page, the they share the same uh global state. So you won't want to you wouldn't want to track which active what the active slide **[101:12]** is in the global state because if you advance one slider, you'll advance them all because they all get the same uh global state. That's where local context becomes important. Um and and drive state is the concept of like creating new values based on existing values that are already in in the store. So if you had something that that was like um uh what's what's a good example? So if if you had a string like menu is open, right? You wouldn't want to have like a menu is open string and a menu is closed string. You you'd want to derive state to be like the menu status like what I **[101:42]** did in um in in here. So this this would be sort of like this is derived state. So um based on on what this is, you would have well maybe this isn't the best example, but basically you're creating a piece of state or context based on other pieces. So, it's derived from other things. So, yeah, that's a example, I guess. Anyways, lots of good things to to to learn about there. Um, you don't really need to get in in the wheats too much **[102:13]** about it. Uh, I'm just you should learn all the directives and when to use them and how to use them. Um, yeah. But yeah, cool. Awesome. Great question. Lord of Blood. Lord of Blood. Lord of Serb. Yeah, no, no problem. Um, and and if you have any questions, just ping me, reach out, ask um because uh yeah, or ask Kevin because he he knows everything. So, anyways, all right, I'm going to talk to you'all later. You're all the best. Thanks so **[102:44]** much for hanging out for me with me again today and we'll see you next week for more things WordPress, I guess. All right. Later.