Using every Interactivity API feature in one site: Part 3 🔗 **Source:** [Using every Interactivity API feature in one site: Part 3](https://www.youtube.com/watch?v=5-VY_9_DX0E) > [!note]+ Document Notes > tags: [wordpress, interactivity-api, block-development] > author: Ryan Welcher > source: YouTube > reference: https://www.youtube.com/watch?v=5-VY_9_DX0E > date created: 2024-12-23 08:51 > > # 🏷️ Title: Using every Interactivity API feature in one site: Part 3 > <!-- deep-read:sections start --> ## 🧰 Action Inbox - [H1] Test binding context parameters between stores — 15:30 #interactivity-api - [H2] Remove template CSS duplication by moving to theme — 22:45 #wordpress - [H3] Fix icon configuration in block templates — 35:20 #block-development ## 🧭 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/) - [Block Developer Cookbook](https://github.com/ryanwelcher/block-developer-cookbook) ## 📝 Summary - Ryan continues building comprehensive examples using all WordPress Interactivity API features - Creates interconnected blocks demonstrating data-wp-bind, data-wp-class, and data-wp-style directives - Implements table of contents system with cross-store communication and state management - Refactors CSS organization by moving styles from individual blocks to theme level - Demonstrates practical patterns for context passing and store coordination between blocks ## 📖 Main Content This stream focuses on advanced WordPress Interactivity API implementation patterns. Ryan builds a comprehensive example site showcasing how blocks can communicate through stores, manage global state, and coordinate UI updates. Key technical concepts include directive usage, context management, CSS variable integration, and template organization for maintainable block development. ## 🗒️ Notes #### ⏱️ [00:00](https://www.youtube.com/watch?v=5-VY_9_DX0E?t=0) — [H1] Stream introduction and current progress - Key idea: Continuing interactivity API comprehensive example project - Evidence: "I am still working on interactivity API trying to build stuff that has as many examples and try to use all the pieces as I can" #### ⏱️ [02:30](https://www.youtube.com/watch?v=5-VY_9_DX0E?t=150) — [H2] Table of contents auto-generation system - Key idea: Blocks automatically register themselves in global navigation - Evidence: "This list is automatically generated by the content in the page" #### ⏱️ [05:45](https://www.youtube.com/watch?v=5-VY_9_DX0E?t=345) — [H3] Cross-store communication for viewed state - Key idea: Code toggle buttons mark examples as viewed across stores - Evidence: "When you click that, it shows what's in the render.php and also shows what's in the V.JS. But also check this out. It marks it as like, oh yeah, you viewed it" #### ⏱️ [12:15](https://www.youtube.com/watch?v=5-VY_9_DX0E?t=735) — [H1] Layout and styling issues with column widths - Key idea: Column proportions need adjustment for better code display - Evidence: "A couple things I have to fix here though is the width of this column is incorrect" #### ⏱️ [18:30](https://www.youtube.com/watch?v=5-VY_9_DX0E?t=1110) — [H2] CSS refactoring from blocks to theme - Key idea: Moving duplicate styles to theme level for better organization - Evidence: "All this stuff is like duplicated CSS and I don't want that I'm going to maybe start putting this into styles" #### ⏱️ [25:10](https://www.youtube.com/watch?v=5-VY_9_DX0E?t=1510) — [H3] Block template scaffolding system - Key idea: NPM script generates new blocks with consistent structure - Evidence: "So I have a in my package JSON I've got this block script. So I'm going to say npm run block" #### ⏱️ [32:45](https://www.youtube.com/watch?v=5-VY_9_DX0E?t=1965) — [H1] Implementing data-wp-class directive - Key idea: Class toggling based on interactive state for visual feedback - Evidence: "So this is an example of how that when you click that, it becomes selected" #### ⏱️ [38:20](https://www.youtube.com/watch?v=5-VY_9_DX0E?t=2300) — [H2] CSS specificity challenges in block development - Key idea: Theme styles conflicting with block-specific styling - Evidence: "There's just some specificity, which is a word I really struggle to say sometimes" #### ⏱️ [44:55](https://www.youtube.com/watch?v=5-VY_9_DX0E?t=2695) — [H1] Data-wp-style directive with CSS variables - Key idea: Dynamic styling using CSS custom properties from context - Evidence: "I wonder if the style if my context can hold a CSS variable. That is interesting. Well, let's find out because this is a dark light mode theme" #### ⏱️ [48:10](https://www.YouTube.com/watch?v=5-VY_9_DX0E?t=2890) — [H3] Twitch integration and community engagement - Key idea: Adding text-to-speech commands for viewer interaction - Evidence: "I think what I'm going to do is I'm going to add a channel reward where it sings whatever message you put in there" #### ⏱️ [52:30](https://www.youtube.com/watch?v=5-VY_9_DX0E?t=3150) — [H2] Context parameter passing between stores - Key idea: Simplifying store communication by passing context values - Evidence: "So you can pass parameters in there. However, do we want to? because anything using this you can't pass parameters inside a directive" #### ⏱️ [58:15](https://www.youtube.com/watch?v=5-VY_9_DX0E?t=3495) — [H1] TOC tracker implementation details - Key idea: Global state management for tracking viewed items - Evidence: "So what this is doing is this is calling the TOC tracker store and then I'm calling the store name passing two semicolons and then the callbacks.init item" #### ⏱️ [64:40](https://www.youtube.com/watch?v=5-VY_9_DX0E?t=3880) — [H2] Optimizing context usage for cleaner architecture - Key idea: Using context instead of DOM attributes for better patterns - Evidence: "I like that a lot better because what it allows me to do is track the context here" #### ⏱️ [69:50](https://www.youtube.com/watch?v=5-VY_9_DX0E?t=4190) — [H3] Q&A on Interactivity API for Ajax filtering - Key idea: Confirming API suitability for reactive post filtering - Evidence: "Yes, it absolutely is... You can access the rest API endpoints and all of that. You can definitely do like a reactive Ajax style" ## 📚 References - [WordPress Interactivity API Reference](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/) - [Ryan's Block Developer Cookbook](https://github.com/ryanwelcher/block-developer-cookbook) - [WordPress REST API Documentation](https://developer.wordpress.org/rest-api/) ## 🗣️ Paraphrase - Ryan builds a comprehensive demonstration site using all WordPress Interactivity API features, focusing on block-to-block communication and state management patterns - He refactors CSS organization by moving duplicate styles from individual blocks into the theme, improving maintainability and reducing code duplication - The project showcases advanced techniques like context parameter passing, global state coordination, and dynamic styling with CSS variables integrated into the Interactivity API ## 📰 Newsletter **Advanced WordPress Block Development with Interactivity API** Ryan demonstrates sophisticated patterns for building interconnected blocks that communicate through shared stores. This approach enables complex user interfaces where blocks coordinate state changes and respond to user interactions dynamically. Key takeaways include CSS organization strategies, context parameter passing techniques, and practical patterns for managing global application state across multiple blocks. **Resources:** [Interactivity API Docs](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/), [Block Developer Cookbook](https://github.com/ryanwelcher/block-developer-cookbook), [WordPress Developer Documentation](https://developer.wordpress.org/) ## ✅ Action Items #### WordPress - **Core**: Test context parameter validation in directive handlers, document store communication patterns - **Themes**: Establish CSS organization guidelines for interactivity-enabled themes - **Documentation**: Create examples showing cross-block communication patterns - **Performance**: Profile memory usage of global state management in complex block compositions #### Community - **Contributors**: Review Interactivity API documentation for missing parameter passing examples - **Maintainers**: Consider template scaffolding tools for interactive block development - **Ecosystem**: Develop best practices for CSS specificity in block themes with interactive elements ## 🧪 Hypotheses - Context parameter passing provides cleaner architecture than DOM attribute querying for store communication - Theme-level CSS organization reduces bundle size and improves maintainability for interactive blocks - Global state management through TOC tracker pattern scales effectively for complex block compositions - CSS variable integration with Interactivity API enables sophisticated theming without JavaScript overhead ### 📊 Methodology - Build comprehensive test suite covering all directive combinations and context patterns - Performance benchmark comparing DOM queries vs context passing for store communication - User testing of scaffolding tools with developers of varying WordPress experience levels ### ❓ Questions - What are performance implications of global state management with many interactive blocks? - How should context parameter validation be handled to prevent runtime errors? - What CSS organization patterns work best for themes supporting interactive blocks? ### 🔮 Future Research - Investigate memory optimization for large-scale interactive block compositions - Explore integration patterns between Interactivity API and headless WordPress implementations - Study developer experience improvements for interactive block scaffolding and debugging ### 💡 Implications - **Practice**: Demonstrates advanced patterns that can improve interactive block architecture and maintainability - **Education**: Shows real-world implementation challenges and solutions for complex block communication - **Tooling**: Reveals need for better scaffolding and debugging tools for interactive block development ### 🧠 Learning Styles Assessment Reading level estimate: Grade 12 #### 👀 Visual learners - Present: Live coding with screen sharing, visual state changes in blocks - Improve: Architecture diagrams showing store relationships, flowcharts for context passing #### 🔊 Aural learners - Present: Detailed verbal explanations during coding, Q&A interaction - Improve: Audio summaries of key concepts, structured explanations of complex patterns #### 🧩 Kinesthetic learners - Present: Hands-on coding session, interactive debugging - Improve: Step-by-step checklists, downloadable starter templates with guided exercises #### 🧠 Logical learners - Present: Systematic progression through API features, cause-and-effect debugging - Improve: Decision trees for choosing communication patterns, performance comparison tables ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Code examples with proper syntax highlighting - Improve: Alt text for visual state changes, structured headings for code sections #### Keyboard navigation - Present: Standard video player controls - Improve: Timestamped navigation links, keyboard shortcuts for code examples ### 🌍 DEIB Assessment #### Inclusive language - Present: Uses accessible technical terminology, explains jargon - Improve: More varied examples beyond developer-focused use cases #### Representation - Present: Community-focused approach with Q&A interaction - Improve: Examples showing diverse content types and user needs ### ✅ Logical Validity #### Strong reasoning - **Deductive strength**: Systematically builds from basic directives to complex patterns - **Practical application**: Shows real debugging and problem-solving processes - **Technical accuracy**: Demonstrates actual working code with immediate feedback #### Tone of voice - **Overall tone**: Conversational and experimental, encouraging exploration of advanced patterns ### 🛡️ DARVO Analysis - **No concerning patterns detected**: Content focuses on technical education and community building ## 🎯 Conclusion This session demonstrates advanced WordPress Interactivity API patterns essential for building sophisticated block-based interfaces. The emphasis on code organization, cross-block communication, and practical debugging provides valuable insights for developers working with complex interactive elements. The community engagement and Q&A format reinforces the collaborative nature of WordPress development while showcasing real-world implementation challenges and solutions. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad ### [H1] Interactivity API enables complex state coordination > [!quote] [Using every Interactivity API feature in one site: Part 3](https://www.youtube.com/watch?v=5-VY_9_DX0E) by [[Ryan Welcher]] via [[YouTube]]. Published 2024-12-23. Accessed 2024-12-23. > "What this is doing is this is calling the TOC tracker store and then I'm calling the store name passing two semicolons and then the callbacks.init item." Demonstrates global state management patterns for coordinating multiple interactive blocks through shared stores. [view highlight](https://www.youtube.com/watch?v=5-VY_9_DX0E?t=3495#H1) #xref #blockseed ID:rw_001 ### [H2] CSS variables integrate seamlessly with context > [!quote] [Using every Interactivity API feature in one site: Part 3](https://www.youtube.com/watch?v=5-VY_9_DX0E) > "I wonder if the style if my context can hold a CSS variable. That is interesting. Well, let's find out because this is a dark light mode theme." Shows dynamic styling capabilities using CSS custom properties passed through Interactivity API context. [view highlight](https://www.youtube.com/watch?v=5-VY_9_DX0E?t=2695#H2) #xref ID:rw_002 --- ### 🔖 Atomic Split Pad (Zettel Candidates) #### [Z1] Context parameters improve store architecture over DOM queries - Scope: When blocks need to communicate state changes - Pointer: 64:40 timestamp discussion - Links: [[Interactivity-API]] [[Block-Communication]] [[State-Management]] #### [Z2] Theme-level CSS organization reduces block bundle duplication - Scope: Interactive blocks sharing common styling patterns - Pointer: 18:30-25:10 refactoring session - Links: [[Block-Themes]] [[CSS-Architecture]] [[Performance]] --- ### ✏️ Fleeting Queue - [F1] Test parameter validation in store actions — security implications #fleeting #research - [F2] Document scaffolding template patterns — developer experience #fleeting #documentation - [F3] Profile memory usage of global state management — performance #fleeting #testing <!-- 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=5-VY_9_DX0E)* **[04:07]** Hello everyone. How is it going today? Your error is here. The dramatic countdown timer. What the deuce? Oh, great. It's Ryan. What's going on? What's going on, everybody? Let's let me double check. is >> nice. Hello. You're live. I hope you're alive. What? What do you mean you're alive, Corey? Was there a chance you **[04:37]** wouldn't have been alive today? That's not good. >> Uggh. The dramatic timer. Wow. Who's barely holding on? What is happening? Kevin, what's what's going on, man? Mr. Fus. Oh, well, you are always welcome back. Thanks for thanks. Thanks for **[05:07]** being here with us today. Fun fact, I was watching your old stream yesterday about dark theme because I was making Woo Commerce block theme and I thought it would be cool to add that feature to it. Oh, nice. Cool. Thanks, thrower. Um, I have to I have to give a shout out to Justin Tadlock for that. He um he uh uh is the architect behind the CSS for all of that stuff. We um uh worked on that sort of together. If you're interested, there is a uh my block developer cookbook has a dark light mode um button **[05:39]** if you want to check that out. I don't know if this is helpful at all, but uh that's that. That's that. Um yeah. Cool. Cool. How is everyone today? So, I am still working on uh interactivity API trying to build stuff that has as many examples and and and try to use all the pieces as I can. Um where's my where's my bookmarks bar? I want that. Okay, turns off again. All right, cool. So, **[06:09]** I'm gonna I'm trying to go basically through all of this list here. Um, it's in the API reference. So, we can I just want to like build build one and see what sort of craziness we have to do, right? Um, excuse me. Got a [clears throat] bit of a cold today. Bit of a cold. Um, right. So, where did I leave off? Um, so what I have right now, so this is kind of fun. I I have this table of contents thing that I built. It's a block. It's an interactive block. But what I wanted to do is I wanted to have **[06:39]** sort of like a reference to like one I wanted to to to show the ability for blocks to talk to each other in uh in various in different stores. So for example these this is automatically these this list is automatically generated by the content in the page. So for example um if I were to uh actually let's see I I think if if I were to switch these um I'm just going to group these. I would like to group these. Gonna group those together. And I'll **[07:10]** group these together. Who did that? Fantastic. [snorts] Every time that happens, it makes I I I I think I I I I lose power every single stinking time. Anyways, all right. So, I'm gonna just Oh, not that. I'm gonna I'm gonna re reorder these now and just uh That's what I want. Reorder that. So bind is on top of text now. So I think **[07:41]** if we were to look at this now we should have bind on top of text. So the order of this dictates this because this is a a data store. Sorry this is there's an onet that's running that that basically tells this table of contents what things it needs to track. Uh which is kind of fun. And then what I wanted to do is I have so there's this little toggle code code button. So when you click that, it shows what's in the render.php and it also shows what's in the V.JS. But also check this out. It it marks it as like, oh yeah, you viewed it. I'm so proud of **[08:12]** that. And you click the next one. Oh, look at that. Yeah, it's amazing. Um, [clears throat] a couple things I I have to fix here though is the width of this column is incorrect. Uh, something's going on here. Footer columns do this column. Um, no. Oh, did I set that to 20 there inner stuff? Something's something's not title spacer content. **[08:44]** Maybe I'll make this 80%. And make the other column 20%. Just make it a little bit little bit more narrow because I want it to be That doesn't look very good. The hell happened there? Gh. Where's the header? How What happened to the header? Oh crap. **[09:15]** Did Did I break that without realizing I broke it? What the heck is going on here? Did I just I don't have it. You know what? I don't even think I What happened to the header? Okay, let's go into templates. This is fun. Templates. Uh, no, sorry. Patterns. Patterns. Header. It's empty. Why is it empty? Uh, I'm going to do uh reset. Yes, there we go. Don't know what happened there, but it happened. **[09:47]** And okay, so let's go back to the templates, the single thing with the thing, and that should be working. All right. Uh, okay. Weird. So, that's okay. That looks strange. Something happened here. I have to reset some some things. [sighs] Reset. Yeah, reset. Okay. So, now if I do this. Okay. It's a **[10:18]** little bit better, but I don't like I want it to be wider. So, I'm going to go back into here. I'm going to go into group. I'm going to go into columns. I'm going to uh take this column and I'm going to group. First things first, I don't want the comments. I don't need the comments. I also don't want the featured image because there won't be featured image or the post meta. I just want that. I want that. I want this. I'm going to take that off. I'm going to take that off as well. And I don't want text. That can go away. So, let's see where **[10:49]** that gets us. Okay. All right. gets a little bit closer, I guess. Take that off, too. Aha. This inner thing is annoying thing. Um, so if I set that to 20%. And I set this column to 80%. Will that give me closer to what I was what I'm aiming for? No. Why did I do that? **[11:22]** Nemser from uh YouTube. Hello uh to you. Thanks for hanging out today. I'm fighting with this stupid thing. Oh, that's probably the problem. Uh wait, you wait one second. Do I have a max width on that? No, I don't. Um **[11:55]** I thought I had max width on that somewhere, but I do not. Well, we're just going to spend the whole stream fighting with this. Why not, right? Why not? That's good times. Title name. No figure. No group content. So that that makes that happen. **[12:25]** The thing is I want it to be wider because I want it to be wider for this exact reason. Maybe Oh, hold on. Maybe I have to take the content and make it uh group. I bet it's cuz I plunked them in groups because I'm a dope. I bet that's what did it. That's what did it. [cough] I'm an [clears throat] idiot. All right. Anyways, cuz what I I I want to be a able to show like large code blocks like this. So, I'm going to do that. I think this needs to go above instead of below. I think that's a bad UI. Anyways, so the **[12:58]** idea here is that you'd be able to to take this code and you you you can you can plunk it into your own store uh for each one of these examples. So, this is the example content and this is um like this is just binding the text and then I've got this uh updated this is a you know uh bound text bound text, right? So you say, "Oh, how's that work?" Okay, well you have to do this. Okay, so we're going to have some text and we're going to set some state and then we're going to come in here and we're going to set label and then this is going to be actions. We're going to **[13:29]** update the text and then over in our store we're going to run update text and we're going to do it that way. Pretty cool. I like it. A couple [clears throat] things I want to fix, however, is um I'm going to look at that right now. So, the WP um I'm going to just uh reorder that. Put text back. Right. So, text, this is a bit ugly. Uh I also want that to sit below this. So, I'm going to move that. And text in my render. I've got this. Um **[14:04]** the button is Where's the button? Where's the button? This is the button. Uh, I'm going to move the button above my um, yeah. So, that should still sit there now. So, but I think I want to add a bit of padding down there. So, let's do this. Let's just um back this. And I don't know if anybody can read that. Uh, so this is the button. Um, **[14:39]** explainer area. Oh, you know what? Um, do I have margin on here? Just transition box shadow. I just add margin bottom like one rim. Yeah, that's probably all I need. Let's say margin actually. What's uh what what's giving me the the extra padding on the top **[15:18]** margin top we'll set it to maybe 0 five not 10.5 rim say margin bottom one look right okay [clears throat] so I can condense that into margin uh 0.5 right because it's top right bottom left right yeah okay so I'm **[15:48]** do that so what class is this on this is on the help button class the other thing that I have that I have to do is I have all this like duplicated CSS and I don't want that I'm going to maybe start putting this into um styles what is There's no assets CSS. [sighs] Um, I don't think I have any. No, I don't need any of that. Okay. So, I'm just going to plunk this into the theme that I have. So, not there, the main thing. So, I'm just going to do this. Uh, no, no, I'm not going to do **[16:19]** that. Uh, get rid of this. Get rid of this. I want uh my styles. There's a bunch of this junk in here. So, all this stuff is like for the blocks. That's fine. >> [snorts] >> Um, this is the inputs, the labels, the text header. Uh, which sure explainer area. Okay. So, I'm going to put I'm going to I'm going to copy that and pull pull this out. And [music] then in here, I'm going to do explainer area. **[16:49]** Right. Uh, what was I? Oh, the help button. All right. So, I'm going to hide that. And too much CSS going on here. So, I have this explainer area. So, hopefully I turn this off. I shouldn't see any difference. I don't. That's fine. Uh I don't have the I don't have the um um button stuff in there yet. So, I'll pull that out **[17:20]** now. [clears throat] So, the help button goes here. And then I'm going to have to nest this stuff properly. So help button right in here like this. And then it' be like what? Help. Help button. And then what's so help button? Help button dot. **[17:52]** >> [clears throat] >> Man, it's been a long time since I've written um just regular old CSS without a build. It's been a long time. Right. So, this help button should be like that, right? What did I have? I had I think I had that wrong clip. Margin margin margin margin margin margin. There you go. **[18:22]** Okay. So, if I turn the help button off now, if I hide if I hide I hide this and this actually. Oh, I don't do that. Uh I need need label. Yeah, I don't do a lot of CSS. Um but I this does makes no sense for it to be in like each block. This this should all this should all be be its own thing. Um, oh my god. You know what I should be **[18:52]** doing? I'm such an idiot. Instead of doing that, why don't I just come in here? [laughter] Hold on. Why don't I just come in here and get the uh the the CSS right here? Not that CSS style. This is what I want. Okay. So, I can grab all this stuff. So, the inputs, I don't care about the inputs. Text header, text, help button. So, this is everything that I will grab all of this. help button, label, help text, help text, help text, P, all that stuff. Great. Let me grab **[19:23]** that. Take it out of there. I'm going to put it in my theme, the theme, right? Rid of all that. And then the only thing I have to pull out now is I have to get rid of um something. I'm going have to figure out something with that. But I should be able just to get rid of all of these. I should be able to delete all of these, **[19:56]** right? That should work. This one This one is This is going to break or it's going to do weird things in there. I'm going to have to figure that out. But [clears throat] hey, Tobias. Uh yeah. Well, uh, that's why we're here. Glad to glad to have you aboard here, friend. Um, all right. So, now I'm going to start pulling out, um, all of the CSS to do with all of this stuff. So, all the help button, **[20:27]** help text, and all this. Get rid of that. Uh, do the same with the in here. Help button all the way down to here. So, hopefully this doesn't break too much, right? Um, okay. So, hopefully, let's see, we lost the button text, did we? We lost some stuff. Um, okay. I don't think I'm I don't think I'm targeting that correctly. So, let's see. **[21:02]** Help button. It's definitely not getting the class it needs. I just have to target it properly. Inspect. Yeah, it's definitely not getting that. Okay. Uh area. Is that getting it? Hold on. **[21:53]** H this CSS being lo source uh content themes. Well, it's getting fonts, but it's not. Oh, I'm not in I don't think I'm in queuing the stylesheet. That'll do it. Let's check this theme comes from uh this uh download. [snorts] Maybe I do I need to install and give **[22:24]** the thingy above here. All right. uh child theme in Q uh CSS. **[22:56]** All right. So, we have to do this. Put that in my functions. This will probably do it here. Um, is that yelling at me? What the hell? Let's see. Ah, that did it. Okay. Okay. [cough] Coolio. [clears throat] All right. Um, that is not right, but that's okay. Um, **[23:26]** [snorts] Whoa. Did I just get raided? I've had like 50 people show up. Nice. Fantastic. Um, okay. So, what is uh happening here? Okay. So, explainer area. So, let's look in the style. Yes. Okay. So, explainer text. I don't know why that's not getting targeted. Oh, maybe I have to do it like this. Maybe I have to target it. Let's see. So, if I go **[23:58]** um So, that's that. That's the heading. Why is it not targeting properly? Block group content entry. Uh what? **[24:30]** So, I don't know why this is being targeted, but this is not being targeted. Where is this getting it CSS from? Let's look. Where's it getting CSS from? Button from hell from style. That's right. Okay. So, uh did I not put the margin in there? I guess I did put the margin in. Oh, I didn't put the margin in there. So, I need to do this. Uh no clip. Where's the margin? That's what I want. All right. So, I should have I have the margin in there now. Okay, that's that's better. Uh, this is weird **[25:00]** why that's not happen. Why that's not a thing that's happening. It should be It's very strange it's not getting that, but we'll figure that out. Um, okay. So, help label, help label, hover icon, this does this not have the help text assigned or something. Um, inspect help button. Oh. Oh, why is what bind styles? Oh. H. **[25:31]** That's probably what it is cuz it's a button. I might have to change that. There's a button in here. Oh, wait. Oh, no. Where's the other button? Uh, button. I'm going to give this a class name. Class uh equals um toggle menu. We'll do that. I think that'll that'll fix this abundant class of toggle menu. **[26:03]** Yeah, that's what fixed it. So, there's just some spec specificity, which is a word I really struggle to say sometimes. Um, okay, cool. So, we now So, I've moved all this stuff out. So, this is great. I don't want any of this in here now. I want this to be handled by the theme because this is going to be a thing. So um see this is okay this is something I have to figure out though um because the this is not really accurate. I don't **[26:34]** want every div every p that's nested under a div to be treated like that. So I'm going to need to to get some stuff in here. This is this is what I'm talking about here. Um no sorry where is it? This is what I'm talking about here. So, I'm gonna add this with a class. I'll say class is going to be uh classes like uh file header. All right. So, we'll do that. So, I'll say any p. So, in the style, I should be **[27:04]** able to say um right, I should just be able to do it like this, right? With the file header. And then I should be able to do the same thing here. And just can I can I I can do that, right? That should work. I don't know why the formatting is not happening here, but hopefully with a little luck. Uh, that did broke that button. What the hell, man? That didn't work. [ __ ] **[27:44]** Uh. Oh, maybe. Oh, did I? Maybe I didn't do it on both of them. Hold on. Hold on. I didn't add it to all of them. I'm a dope, right? So, that should be there. And this should be Where is the other one? Hello. Right there. Class is Which one am I? Which one am I doing this on? [laughter] I'm doing it on the **[28:15]** bind and I'm checking the text. So, that's why that's the problem. I got to come back over here now and do this. I'm going to I once I get this all sorted out, this will be a lot easier to um to figure out because what what what I'm going to do is I'm going to take this all and put it into a template. Why is that stupid button not working? Class. There's no class there. It's a bind is a class. Oh, uh, it should be what? Menu. **[28:47]** What the hell I call it? Um, toggle menu. There we go. Okay. Much better. Much better. All right. So, now the thing I have to do is Okay. So, I'm happy with this. All right. [clears throat] So, what I I what I've done is I've set up a template, like a create block template, because I want to make this a lot easier to uh scaffold out some of these things because I have a bit of a framework set **[29:17]** up. So, in my render.php, I'm going to need to add uh not that I'm going to need to add this class file header into here. And then also down here, uh that should be that. What was the other thing that I added? Um, I don't think I like the song. Let's skip it. **[29:47]** Um, get rid of this. Oops. There we go. Okay. I think that's all I added. I added those, right? And then I added a class in a specific place for the other thing. Okay. Great. So, great. I just said it like that, which is awesome. Okay, cool. All right, let's close these down. Now, I'm going to do one that is um going to um bind. What What should I **[30:20]** do next? Which which which one of these things? So, I've got not that I got a bunch of these things. So, I've done bind. Um should I do bind? I done class. So I could use just use this example actually that might be fun. Um adds or removes a classation element depending on the building value follows the syntax. So okay let's let's grab this. So all right so this is what I have set up. I'm going to do this. I'm stop stop I'm going to stop this. No I don't do not want to **[30:54]** enable the dictation. You're being a dictation. Uh okay. So npm. Okay. So I have a in my package JSON I I I I've got this block script. So I'm going to say mpm run block. This is going to be called wp class. And uh that should be all I need to run. And so what this should scaffold out for me is um another block of example in in here somewhere. **[31:24]** There we go. Uh, so now if I go into CD plugins and then npm start, it should get a class block in there. So let's go ahead and add, we'll go WP class and then uh set it to heading and then save it and then refresh and then do Oh, didn't get the right. Okay, the **[31:55]** icon's not right. Duh. Stupid. All right, so the icon that I'm using is image filter, which I quite like. I'm going to change this in here. And icon is not even set. Interesting. So, I clearly need to add icon to my template down here. Uh, I do have icon set. That's weird. **[32:25]** Is it icon? I'll figure that out later. All right. [clears throat] So, this is going to be called uh Okay, that looks like that. Great. So, this is there's nothing to see on the back end here. But if we look at the front end now, that's a little bit strange. Oh, I think I know why. Um, okay. So, in class, let me just hide this. in class. There should be a style in here where I've got max width of 700, which I already removed. I'm going to get rid of that. I'm also going to get rid of it in the template because we **[32:56]** don't want that coming back again. That's annoying at all. Freaking get out, man. All right. So, example [clears throat] goes here. Cool. So, then I I toggled this. I got Why is that in there? That shouldn't be in there at all. What else is happening? There should be no snippets. >> [clears throat] >> Whatever. We'll figure that out later. Okay, cool. So now what what this is going to do is this is now given us three items in here, remember? So it it opts in to my table of contents here. So **[33:28]** these are the three examples. So I don't have an example, so we're going to add one here in a second, but maybe um yeah, so this is as soon as you you toggle one of these, this becomes sort of checked, right? So you looked at that one, right? And oh, let's look at this one. Awesome. Oh, what? Oh, I didn't move the thing. Did I not move the I didn't move the thing. Oh, [laughter] notice what's happening there. Something is tying into the wrong store. All **[33:58]** right, we'll we'll we'll figure that out, too. So, I didn't move that. Um I'm an idiot. Okay, so I didn't that was the other thing that I forgot to do, I guess. And where did I I do that? I did that in um would have been the text one. So text text render text. So I moved the explainer area just below the All right. I moved the explainer area just below the HR. That's the problem. So in mind I have to do the same thing. I swear to you once this is once I've **[34:29]** done this we can actually get back to building the things. Uh so I'm going move that there because I want that to sit above that. Right. So that's done. I'll do it in class manually. And then I'll go into the the uh template again and update that right here. And then in template, I just need to move the explainer into just below the HR. Okay. So, that should be good. Okay. So, in the class, um I'm going to just use the examples that in here. I have to run. Thanks, **[34:59]** Kev. Thanks for hanging out, Kev. Always good to see you, my my friend. Always good to see you. Um, yeah, have a good weekend. So, okay. So, we're going to put some li in there. So, in my uh I'm going to close all these. In my class, I've got this example goes here. So, we're just going to drop the UI in there and uh going to convert that uh indents to tabs. Um, that's very strange. Okay, so that's **[35:31]** option one. Option two. So, what's it saying in here now? So, store used with the directive above. So, store in here. So, we just need this toggle selection. So, I'm going to grab my view actions. We have a toggle selection in here. And that's all we need, I think. And then we we we can talk about it. So, we'll That's interesting. It doesn't do anything. Why doesn't it do anything? Let me just double check some stuff first. **[36:03]** class. Okay. >> All right. So, what is this? Doesn't work. So, let's find out why. Actions toggle selection on. Oh, I have to click it. Uh oh, I probably need a class. I probably need to add a class to it. That would probably what it is. [clears throat] Um, all right. So let's um let's add a class. So we'll go selected. **[36:34]** So in CSS we can go um dot selected, right? And then uh I don't know what what are we going to do here? We can go uh we'll apply maybe that button text that button stuff to it to the bind. little style CSS in the button. We'll just go We'll grab all this. Sure. Sure. Let's grab all that. Why not, Ryan? **[37:04]** Okay. Class. Plunk that in there. Let's see what happens. Doesn't seem to be working. Not seeing any errors. Okay. Oh, because the interactive is the wrong one. Okay. That's why things were going funny because this is the wrong one. It **[37:36]** should be that this should be this is accessing the wrong store. So, that's a that's something I have to fix in my template as well. So, this should not be that. It should be slug u because now normally I'm using the slug of the of the plugin. Um yeah, streaming next week. No, I am not streaming next week because I will be in Bulgaria. I'm speaking at Word Camp Sophia and I'm super excited to be there. Um but uh we're not American yet. That's right. We're we uh we are America's hat or Canada or the US is **[38:09]** Canada's pants, however you want to look at that. >> [snorts] >> Um yeah. Okay. Let's see. All right. So class. Okay. So store is not working. So let's let's see why. Toggle help toggle selection. Um console.log toggling selection. So I should be getting when I click this get context is not defined. Of course it's not defined **[38:39]** because I didn't import it. Get context. Getting some like very generic errors that aren't There we go. There we go. What do you think of that? So when you click that, it becomes selected. You click this it becomes selected. Um, so this is an example of how that Oh. Oh. Ah. See, all of a sudden stuff stopped working. Okay, cool. So what I'm going to do now is I'm going to update the in the render. I've I've got these **[39:11]** uh these these snippets and the snippets are are in here. So, the thing that I don't care to include is any of the sort of infrastructure stuff that I'm doing. So, um I just want to show the example that needs to be shown, not the example including all of my other junk. Um like you know what I'm saying? So, um what I'm going to do is I'm going to grab this uh when I grab this all the way up to here. I'm going to grab that all all the way up to here. I'm going to put that into the PHP snippet. **[39:43]** And then just I'm just going to end the section tag right like that. And then I don't I can get rid of this init and I can get rid of this tracker name because it doesn't really have anything to do with what we're doing. Um in here this is the internal. So this so now we can see this. Let me let me close that. And and we can see how the store works. I just need to get get rid of that toggly uh selection. So, the thing that I'm not super happy about this with is that it is very manual how I'm storing these **[40:14]** these snippets, but once they're sort of built, I don't really need to do much with them, I don't think. Right. [clears throat] Um, [cough] so that's cool. So, I think maybe I should probably add some e explanation, you know, maybe a link. Oh, you know what might might be nice? You know what might be really good is if we add like a button that um links out to to the documentation. That might not be a bad idea. Um and then I **[40:45]** should probably explain what what we have to do um to do this stuff, right? Um should I wrap this in a ul? I it this feels wrong to me to just have this li just like random li right there. Unordered list. Let's do that. What happened on the mountain? All right, we'll do this. Does that look better? Yeah, see that looks a little better. Um, **[41:15]** kind of counterintuitive. Anyways, whatever. These are the examples that I'm I'm working with, so deal with it. All right, that's that example. All right, [clears throat] what's the next one? Next one in the list. So, we went to class, we did style. Cool. Let's add style. So, we're going to grab this. There's an extra tag in. Is there an extra tag in there? No. Yeah, there's an extra tag in there. We got to fix that. Hey, if anyone wants some quick props, I can show you where to where where to to fix this. Gutenberg. Um, there we go. **[41:47]** Gutenberg. Uh, docs. Uh, where are reference guide activity API? Uh, reference find class >> where style. Yeah. So if you if you go and you edit this uh make a pull request, remove that extra thing. If you do that, I will approve it right now and you'll have core prompts immediately. **[42:20]** [clears throat] That's all you got to do. And the place where you have to do this is just go into that file that I just linked and edit it because this should not be not this is all manually done. So you should be able to go in there and just remove that little training thing and then uh you'll have props. Ping me on the PR and I will absolutely 1,000% approve it. Um yeah, cool. Awesome. Okay, so the next one was what was what what was the next one? It was uh style. Okay, so we're going to uh close all this stuff. Open this again. Close this **[42:51]** cd out. npm run block wp style. We're going to run that cd plugin and npm start. All right. So we have style. So then in in our style, let's let's look. We have wp style snippets. Yeah. WP style. Beautiful. So we got to put the example in. Example comes from here. We'll grab that little example. And I'm going to just drop it right in **[43:22]** there. >> And we'll do this. >> Um um I think I had what? Toggle. I think I should probably class equals uh I need I'm going to reuse the the toggle menu menu um example there. Okay. So, we'll come back in here. Refresh this. I don't know why that looks different. Oh, because it's in a group. Because it's **[43:53]** not in a group. Because it should be in a group. Let's put these in a group. Uh group. There we go. Okay. So, this is going to be We're going to go uh Oh, there it is. WP class. Yappy data wast. Perfect. Um class heading. Uh move it up. Move it up. Uh can I just group them from here? I can group them from here. Beautiful. Save. Refresh. **[44:24]** >> What? Oh, I hate this. That needs to just stop. >> There we go. Oh, wait. Did I put Did I Did that No, sorry. Not class. I'm an idiot. I need I need to transform this. Oh, you know what? But what would be interesting if we could transform these to every one of the other ones, but we'll do that later. um style. I didn't get the icon again. **[44:57]** Why is it not getting the the icon? It seems like it's in the doesn't seem right. I need to test something. I have got a transformer, right? Yeah. I don't icon. We're going to set it to image filter. So strange that icon is icon in here twice or something. So annoying because I want that I it doesn't it's not even being added like this should be icon image filter. **[45:28]** That's what it should be. It needs to stop being stupid. Sure. Okay. All right. So save this. Uh okay. Go over here. Oh. Oh, wait. Hold on. Let's see. Is that Let me check something. Oh, I just didn't add just didn't add it. I thought for a second that was the Okay, cool. **[45:58]** [cough] Okay. Uh, so why is that not getting added? Inspect. Oh, because I don't think it's a Okay. You know what I'm gonna do? I'm going to pull that toggle text out. I'm gonna um in the bind I've got this. No, I've got CSS. I've got this button toggle menu. And I think what I'm I'm going to do is I'm going to just pull it out of here. And I'm going to add it into the theme. **[46:29]** Wherever the F and theme, it's gone. There it is. And we're going to give it a generic name. It's gonna be button called uh we'll call it yappy yappy button. So that's what we'll call it. And then back in my renders um hopefully that'll work. No, that works. But this one's broken because it's not the same name. So we're going to go back into there and bind. Call it the happy button. **[47:02]** [snorts] There we go. There. Beautiful. So, toggle that text. Okay, cool. So, now the next thing is we need to look at the store that's being used. So, we just have this toggle directive action. Does everyone know what I'm talking about when I talk about actions and all of this junk? Um, because I can we can talk about it. I'm just like flying through these examples, but I'd be happy to like get into it a little bit deeper. Uh, so the style, we have this. We're going to add this into our actions, right? So now what this Oh, we also need to get pull get context out. Get context. I think I **[47:35]** might add this to the template as well because it's okay if I don't h if I don't use it. I just uh No, that's not it. That's not it. I just would rather not have it break because it's not there. Okay. See what happens. Toggle text. Did it work? Didn't seem to work. Uh oh. Yep. Okay. Toggle text color. I'm going to say **[48:06]** console.log toggling text color. All right. All right. Inspect. Oh, I I just am I Is it not is not in there? Have I found it? **[48:40]** Weird. Okay, let's look. Um style. Is it hidden or something? Oh, this might be the thing that's causing me the problems here. **[49:15]** Uh, that's what it is. Okay, so this [clears throat] this is the problem. This is that. Okay, that's the issue. Let's hear the church sound. Oh, waiting for it. >> There he is. You know what? That's a great idea. I think what I'm going to do is I'm going to add a channel reward where it's it sings whatever message you [laughter] you put in there. That's what **[49:45]** I'm going to do. I don't know how to do it. I'll figure it out. Uh I will figure that out. What does this do? Uh text to speech. Oh. Oh, wait. Oh, hold on. I've got one here. One second. Let me just Hold on here. Hold on here. Just hold on. **[50:17]** Um, auto shout out. Look at this. Edit this. I think we can do this right now. So, the shout out run effects list. Cancel. Okay, I'm going to do commands. I got a say command, I guess. Edit. And we're going to run effects list. Uh **[50:51]** effects list go select effects list. Oh, I mean that what did they do here? Cancel. Uh hold on. Hold on. Hold on. [laughter] Hold on. Where is this thing? Auto shout. I just want to see what the what the voice is. I mean, then we can add it. This is amazing. Uh, what is edit? Shout out text to speech is which which voice is **[51:22]** this? It's default. Get out of here. That doesn't seem right. Cancel. If I text uh So, okay. If I go into chat here now, hold on. And I go say hello. >> Hello. [laughter] >> So, anybody I think I uh I might that might Who's that? That's restricted to Oh, it's uh I think I restricted that to uh VIP. **[51:55]** Okay. So, if you're a moderator or Hold on. Yeah. So, if you're if you're in my VIP list, you can do that. So, try it. Give it a whirl. You can say anything. In fact, it'd be very funny to hear what it's how it handled certain words of the English language that maybe my my kids not allowed to say at school. What's Corey doing there? Cory's just dot dot dotting. Okay. So, I got to fix this. There's a specificity issue here again. And this would be in my theme. That's the problem. So, let's look at that. Themes. **[52:26]** I'm trying to use the word specificity as much as possible. Where'd that go? So, this is this is the thing. So, div. I think I need to add that. I think that's what I need to add. And I think that's the problem. There it is. There it is. Okay, cool. So, this is the hell work. So, change that. It goes Oh, there's a red. Yay. But I'm going to probably change the colors. Um because I have like a like a like a like **[52:58]** a dark glide mode thing going on here. Um can I Oh, here here's an interesting This is interesting. I don't know if this is going going to work, but I wonder if uh the style if it my context can hold a CSS variable. That is interesting. Um, well, let's find out because this is a dark light mode theme. Oh my god, it **[53:29]** works. That's awesome. Okay, I didn't I didn't know you could do that. So, there's a there's a contrast one. So, we can change the color to um and I Okay, so I have another color. I think I'm going to use the uh accent. Is it the accent or is the accent? Where's the accent, guys? What's the accent? Um, yeah, that's what I want. So, if I make the color go to the accent now in my Vue.js. So, instead of uh Oh, **[53:59]** interesting. Okay. So, we're going to set it to this. That's an interesting uh thing that they've done there. So, where did that go? I got to get rid of this. Got to get rid of this. I'm going to say if the value is set to this, excuse me. Okay. So, Oh, this is interesting. So now I it's just checking whatever their con the color value is. So now if I refresh this, I should be able to toggle it and have it go back. Oh, that's super slick. I don't know why that that amazes me so **[54:30]** much, but it does. And then I toggle that. It still goes back to that same color. Okay, cool. A little bit harder to read, but that's I don't really care. I'm wondering now if this button should be okay, whatever. Okay, so now I I hate light mode. I'm just gonna switch back to dark mode there. All right, so now let's add the snippets in to our examples here. So we'll start with a store because I have it open and we'll jump back over here. **[55:01]** We'll go into JS snippet like this. We're going to get rid of >> toggle help. [laughter] >> Oh god, the horror. Oh, [laughter] I think uh I don't think that worked. Let Let me try it. Well, I think I think it might have to be all one. Um I don't know. Let's try. It may just may it may just be too much. Um **[55:40]** interesting. I wonder there might um weird. Okay. I don't know why that's doing that, but it's doing something. Um it's probably my command that's breaking it. Uh, I'll I'll fix that. It's **[56:12]** probably like it's only taking a certain amount of characters or something. I really don't know. >> Uh, >> yeah. Okay. Something's breaking it. Anyways, that's fine. We'll uh I'll I'll fix that up for the next stream in a little while. Oh, Elpus original. Hello, my friend. I wonder if it's all one because it's **[56:42]** all one word like I wonder if it's because it's all one word. I don't know. I'll I'll dig into that a little bit more. Anyhow, back to what we were doing here. Uh, go back up to my snippets, my PHP snippet, and put that there. And then I just need to end the section tag because that's **[57:13]** the example that we're looking for. And then I got to get rid of the the tracker stuff. [laughter] >> What the deuce? Love it. So good. So good. All right, let's see. Let's look at the code. We got the render uh thing in there. That's cool. Um I want to see something here. Does that render out better? Why is that breaking there? **[57:43]** Bre there. Oh, because it's breaking there. Because I'm telling it to break there. So, let's see. Is this Is this more readable? That is a little bit more readable [clears throat] or I don't know is it is that more readable or is this more readable like that? Oh, I think that's bit more readable. **[58:22]** All right, cool. Say what the deuce. [snorts] [sighs] All right, cool. So now look at this. I I I Okay, so should do you want me to to explain how I'm achieving this this sort of unrelated dooddad? I'm going to just explain it. Um [clears throat] so what I've done is I have this I have a block uh so so I have a number of blocks. I have one, as you can see here, for each one of my um for each one of my **[58:53]** uh directives, but then I have this thing called TC tracker, table of contents tracker. And now, so what I'm doing in here is um Oh, I see. Yeah, for two properties, leaving on one, but it's more of the two. Yeah, I find especially with the the interactivity API, I find it very hard to um I find it less readable. Like something like this, right? Like I should probably do it that way. Like that is Why is that yelling at me? H **[59:27]** uh I should do it this way. Sorry. That I find way way more readable. Uh because I mean obviously it's going to it's going to break off the page anyways, right? So, um yeah, but like something like this is fine or even um like this seems fine. This this could be okay, right? [clears throat] So, anyhow, um okay. So, what I'm doing with the the the table of of contents is I am basically just I have a I have what? **[59:59]** Oh, sorry. Um why is that still yelling at me? That's why that's telling me. Um, so I am initializing some global state for this called items and viewed items. Um, and so what this is doing is this is going to do um I don't even know if that's being called anymore. Uh I I have to fix I I was doing this on scroll but uh so so basically all all this does is this this uses a um a w a data wp each **[60:29]** which is a way of looping through it and it's providing a template um and that template um is basically each item in my array and [clears throat] then so over here um I don't think I'm needing this anymore. I'm I'm going to just get rid of this. I I I I had this in I was using an intersection of observer to um uh when it when it scrolled into view then then it was um it was marking it as uh as viewed but I'm I'm not going to I'm not **[61:01]** doing that anymore. So anyways so then uh oh god why I'm jumping the whole place here. So I have basically um I have a is viewed which I don't need that either. All right. So the idea here is that when each one of these blocks is inserted it in in the render I have this init thing in here. And what this is doing is this is calling the TOC tracker store and then I'm calling the store name passing two two semicolons and then the **[61:32]** callbacks.init item. So in that store what this does is it calls it init item. It it gets access to the attributes of the item that it's called on. And I have an attribute called data tracker name that sits in here. So data tracker name and it's just this um and then what that sorry what that does um this I don't probably need that. Uh so this is going to this is a default value I don't need. Uh but all all this is doing is pushing **[62:03]** into items um the name and that's and then in the in the render we're taking the context item which is just the name and we're we're binding the text we're setting the text of the list item to whatever that name is. So and h how that looks is you get examples here. So every one of these auto inits itself and and populates the table of content table of contents which [clears throat] is super cool. And **[62:33]** uh yeah and and then so oh sorry uh where am I? Yeah. So that handles that part. And then there's a a um there is a mark a marked [music] as viewed thing here. And so what this is doing is this is getting called. How is this getting called? I can't remember. I think I have this kind of like doing this in a couple of ways. So, when the button uh the the code button right here is pressed, I'm hiding all of those things. There's a toggle help um action that is called in **[63:04]** the store that's available. Um and so the so each one of these so the style for uh for example h has got this this toggle help. So what it's doing is it's setting the the state of this particular one to show or hide that um that um this section but then it's actually calling the store the TOC tracker storing and calling this **[63:35]** tracker.actions.mmark is viewed. So then the mark is viewed uh over here uh just basically checks it gets the attribute name of the place where it's been called right so it gets the element that called it and then gets the attribute the data attri data tracker name attribute checks to see if it's in the array and if it's not in the array it pushes it on and that's how we handle that. So, there's a lot of like roundabout back and forth. And as I'm thinking about it, I'm wondering if **[64:06]** there's like different ways like a different way that we could do this. Could this toggle help toggle help? Could Could this be stored? No. No. Because we need huh I'm wondering if we could simplify this slightly. Um, **[64:38]** so when I click this button, I I I want it to show and hide. So, should I try to simplify it? So, Oh, no. Sorry. Where? Uh, that's that's this one. I need this one. So, this toggle help doesn't have to be in every single store. **[65:09]** I don't think it'll work. I think I have to do it this way. But I am wondering though, can we pass an attribute? I I I've never done this. So, if I were to in my TLC tracker store in in my view, if I were to to uh we could say um item I can say console.log mark is item. So, this I wonder if that would work. So, if I refresh this now and I I inspect this. **[65:41]** Oh man, am I getting a cold or I kind of already have one? I'm g sneeze like a crazy man in a second. So, when I click this, where did I wait? Where did I do that? So that takes that and then style. So I have to go down to style because style is the one that's passing it. So if I click this, boop. [laughter] Did you guys know that console log 9 is not a function? Did you know that? I thought it got added in the latest version of JavaScript. Okay. All right. So you can pass **[66:13]** parameters in there. However, [clears throat] do we want to? because anything using this you can't pass parameters inside a directive. So like in I if I were to add this to a button and do like actions actions.mmarketus viewed this this this wouldn't this wouldn't be available. So you could do something like I don't know. But so anyways, the reason I'm saying this is because what I could **[66:43]** probably do is instead of having to add um in style, right? I could probably uh where did that go? Where did I call this? Oh my god, what am I doing? So item marker view item. So in style right here, markers viewed. I'm passing this because in here I could probably just get the um the context, right? **[67:19]** Uh hold on. How am I adding that? Am I adding it as context? Because I could add it as context or as state. I could add this value is what I'm getting at, right? I mean, I could get even super tricky with it and get the store name. Maybe I should just leave this. It's interesting to know that you can indeed do that, though. Um, so like what I was thinking was like if I could pull this toggle help out and **[67:50]** then just pass context to markers viewed or or even just get the data attribute that I've assigned up here like the this data tracker name. I can keep that as part of the context too. So I I could do something like data-wp context, right? And sorry. And I could do like uh uh tracker do like tracker name, right? I should be able just to put the **[68:23]** like I should just be able to do this. That should be all I need because then inside of view style I could get context context const um const ctx equals get context right and then I can uh console.log lug right I bet this is going to show me **[68:53]** the context for for this. So, if I click this, right? So, I've got the context here. Oh, Lord of Blood. We'll wait for it. [snorts] >> Lord, [laughter] I'm I'm gonna love it. Lord of Blood, welcome to the stream, Lord of Blood. It's always great to have you here. **[69:23]** Lord of Blood, you're late. But but we discovered that if there is actually a command if you do say and then and then uh do type something um I love like if you do if you do this >> I love turtles. [laughter] >> It works. You just have to separate all of your all of your stuff with uh with hash marks or with with hyphens. So go ahead and **[69:55]** ruin the stream doing that. Okay. So cool. [clears throat] Well, so what? So that's kind of interesting because now what I can do is I don't think I need to actually track all this stuff. This isn't something that I need to track in more than one place, right? Because if I were to um Oh, the init though. Um, **[70:26]** so the init [clears throat] on the toggle help bit, right? I should be able to instead of doing this, I should be able Where am I? Because this marked as viewed, where'd **[70:58]** it go? Mark is viewed does all of this stuff. It gets this attributes. It gets all of this. And I don't want to do that. So, if I just have it pass this like name, right? If I just have it pass name in here, hide. Hide all that junk. Hide. That didn't hide any of that junk. Hide all that junk. I pass name in here and then in here because and then on on on on this end I can just get um uh what what what is it called? What is it called? Tracker name, right? I just call **[71:29]** tracker name. I can I can get that off of the context. I should be able to pass tracker name in there. All right. Not use any of this. Oh, no. I will need this stuff. All right. So click that [clears throat] there. Oh, it didn't work. Oh, okay. Because the name that I'm passing in context is not is this extra one. So that's what I need. I bet this is going to work now. So if I click this **[72:01]** boop, there it worked. Okay, [clears throat] cool. So the reason, okay, I like that a lot better because what it allows me to do is track the context here [cough] and then I can do the exact same thing. I don't have to talk I don't have to call this or maybe I do have to call this. So I should I shouldn't need this anymore. Right there. That should still work on this one. So let's check. It does. Okay. because what what it was doing was it was taking when I was calling the inner **[72:32]** store, it was taking the um um and like Yeah. So the other thing that you could do toggle help, right? So really the thing is though I'm just wondering should this only do this? I don't know anymore. Because the other thing that you could do is I can just call markers viewed and **[73:02]** then pull all this in, but then I'll have to pull it off the attribute. I don't know. I'm I'm I'm waffling on this approach. This is an interesting uh sort of um it's an interesting um exercise though to see what we can do. I don't know if this is bad practice. I don't know if anyone is here from the team, but I'm going to ask about this if this is a bad practice because this market's viewed. I'm gonna have to check to see if like um **[73:33]** like false like you know I'm gonna have to do like like if if uh name right something like like that like I I have to make sure that this is actually that this is actually being passed um because if it's not being passed what's it going to Let's see. So, if I don't pass it, if I don't pass anything in there, what **[74:04]** happens? If I just do this, shouldn't it should break. Like, it won't work, but I don't want it to break either. So, click that. That didn't do anything. No errors. No errors. Okay. Um, so that's that's a that's that's not a bad way of doing that, right? [clears throat] Excuse [cough] me. I feel like this is a little bit cleaner. Like this handles the updating, right? And this is just **[74:37]** toggling the help becomes a lot more generic. Then o over here it just takes whatever it it needs and updates that. I don't really mind that. So this init item is taking the the tracker name and it pushes it on. Now is that something that we can make easier? I I don't know if we can. **[75:13]** So I don't need that anymore. I don't think I'm using that snippet anywhere because I'm just using it in in one place. That's kind of cool. Okay. Anyways, uh so that's how that's working. It's It just knows about Oh, none of these are working now. [laughter] Why Why are none of these working? What? Oh, right. Because the other ones don't have that that context set anywhere. I'm adult. Okay. So, let's we'll have to fix that. So, then context **[75:46]** start with style and go to class. I'm going to have this up here. This is going to be a class and then bind the same thing. That's not good. **[76:17]** PHP Am I using it somewhere? Oh, you don't have you don't what? You don't You're not That's weird. How can you not use that? Let me just edit this. Hold on. It's all right. That's weird. I don't know why that's uh **[76:47]** just to see here. Um, how do I set the who can use it? Oh, here we go. Permissions. Oh, yeah. Okay, you should be able to run it there now. Um, try try running that again there. There, Lord of Blood. Lord of Blood. What is this style render for you? Style **[77:21]** How are you? Beautiful. Oh, I do need it. I still need it in one place. Okay, let's just see. That's That's not That's not working. **[77:52]** All right. Okay. Just need this. Um, let's bind class. style text. **[78:24]** And did I do this in here, too? No, I did not. **[79:16]** Great. >> Hey, Troy. Okay, so text example is not working. I don't know why the text example is not working. All right, let's take another look here. So text should be getting context, right? So, we should be able to console log tracker name. Tracker name, right? Let's grab that. Oh, get context. Of course, Ryan is not **[79:48]** including get context. There we go. That works fine now. [clears throat] Oh, got some questions from from YouTube. Just Q user Q. Hi, Ryan and everybody. Q does the interactivity API is a good choice for you using in a filter forms to filter custom post types in reactive Ajax style. Yes, it absolutely is aside mostly different variations of making it in jQuery, vanilla or alpine.js though. Yeah, you **[80:19]** can make this I mean the interactivity API can anything you can build in JavaScript for the most part. Um you can access um the rest API endpoints and all of that. You can definitely do like a reactive Ajax style. You can do like um you know faceted search and all that kind kind of stuff. It's it's modeled sort of loosely after well I shouldn't say it's modeled after AlpineJS. Uh the concept of directives came from Alpine.js. Um the **[80:50]** [clears throat] big difference being that there's no the the server side rendering is handled much differently because AlpineJS requires Node whereas we don't have Node in the back end. We have PHP. So, uh, yeah, you can absolutely do almost anything that you want to do. Um, yeah. So, there you go. There you go. Answer. There you go. Um, okay. So, I need the tracker name there, but I don't need the tracker name anywhere down here now. So I wonder like I wonder **[81:25]** okay on this init item I want to check something. I don't know what this is going to do. On the init item I want to uh I want to do I want to say constct ctx get context. I want to console log context. I have a feeling this is going to be undefined. I think this is the um I think this is the issue that I ran into before and why I'm accessing the attribute of it. So, let me just see. Um I'm probably going to get a whole bunch of undefined. Yeah. So, there is no **[81:56]** context defined there and that is because this [clears throat] callback is in a different store. So, it doesn't really doesn't really know doesn't really know what it's doing. Now the other thing I could do is I could try this a different way in for example that's it. So there isn't a init code block in here where where is that being run that's being run like where's Oh that's being run on the code **[82:26]** block I think. So, if I were to to do like uh if I were to do another init here, I'll call init um block, right? Something like this. Then I could probably do something similar like I did like we're doing in here. We could get the tracker name, right? We should be able to get the tracker name, right? I should be able to contact uh console.log log tracker name. Now I'm **[82:59]** going to put the init block on the root element of in here. So we have another init. So I'm going to do this and it's going to be callbacks. Actually I'm going to get rid of this one. Uh it'll be callbacks and it block. Let's see what happens for that one. Okay. So that is exactly what I want to have happen. So it has the context of this, right? It has a tracker name. Cool. So instead of instead of reaching **[83:32]** to it, um yeah, you're you're welcome, Hugh. Thanks for for uh hanging out. Um and thanks for asking question. We're all over here in Twitch. That's where the maj majority of chatters are. So if you want to come jump in with us, we will welcome you with open arms. Sure. That's what I said. So then we're going to get the the tracker store like this. Okay. We already have that. And then I'm going to say um we have to get the action that I want to call. So what's the action that we were calling? So this is a netit item. So **[84:04]** this we don't want. So netit item is going to be we'll say we'll do name again, right? And then we'll say if if name uh we're going to push we're going to push uh that onto the state. Oh, should I just open that up to everybody? All right, I'm going to do that. Hold on. Hold on. I don't know why I'm I'm **[84:35]** being weird with the ranks here. I'm I'm just going to fix it. Hold on. I'm just going to fix it. Um, can I just I don't want to. Oh, I just get rid of that. All right. Try it again there. Uh, who was it? Desarert. Try uh try try your command there again and see what happens here. **[85:05]** So, what I'm hoping is going to happen. Oh, it broke it all. Okay. So, so then >> I love interactivity. [laughter] >> That's amazing. That was so good. Oh. Um, okay. Okay. Well, I didn't actually init the block because I have to actually call tracker dot **[85:36]** callbacks.init item tracker name. Okay. So, that is what I'm going to do. And I should still have nothing that's working there. Why is it not working? Okay. I'm going to go do this callbacks. Wait. Tracker view callbacks and net item. I'm going to say console.log. **[86:06]** Why? Why is that an error? Oh, is this error? Oh, okay. So, that that's working fine. Okay, cool. I I think I like that. I think I like I like that approach a lot better because [clears throat] Um, okay. So, **[86:38]** so the text block now has this init block thing that needs to go into all of these. And we'll put this into all the callbacks and make sure we have them all. Okay. And then the next thing is we have to do Oh, wait. Which one of these was Oh, do that one. And here we already got that. We'll change that. **[87:10]** Change this. And then we'll change this. And all I'm doing here is I'm I'm calling the internal stuff instead of trying to call the um external store. So hopefully they all appear. They seem to all have appeared. That is marking that one. So I scroll up to the top. Okay, they're all marked. Okay, great. I love that. So that also means I don't need to carry I **[87:41]** don't need to have this data tracker anymore anywhere. I shouldn't need it at all. Uh because it's all being stored in the context of this particular thing. In fact, it could even just be stored in state. This this could be stored in state as well. H yeah, **[88:13]** because each store is different. It could be stored in state. If these are all the same store, uh it would be better to store it in in there. But but yeah, we're not doing that. So, isn't it fun when you kind of start thinking about things and you're like, "Oh, oh, I could do this way differently now. Let's change everything. Stand by. Don't need that. And I don't need this. Don't need that there." Uh, okay. And last one is don't need that. And something else down here. **[88:46]** I don't think I need it anymore. Okay. So, let's refresh. There's no errors. Works. Okay, great. Now for the fun part. I have to [clears throat] update my template now. Okay, so my template is going to have some changes to the render.php. So render.php is going not going to have that anymore. Uh what we are going to have is a this. We're going to have one of the these things here. So under that we're going to do this, **[89:17]** right? And this is going to be slug example. Okay. And then I don't need to have don't need the tracker name in here anymore. That's that. Okay. And so in Vue.js I need uh V.JS for div text. We're going to do init block. Put that into here. That should be all the changes **[89:50]** that I need. And actually, while I'm in here, I'm going to This is dumb. Okay, I'm going to uh rename this. Rename that to template. I'm gonna uh rename this to files. **[90:22]** I'm gonna move that in there. And move this, this, and this into the root. Move that into the root. That the root. Get rid of this BDC. I don't need it. And then the other thing I have to change is going to be files. files because that's just template index package. This is gonna **[90:52]** Okay, cool. All right. Hopefully that should work. Okay. So, [clears throat] um yeah. Okay. I feel like we're getting a lot done here, but I also feel like I haven't been explaining very much. So, does anyone have any questions or anything about anything that I've been doing or the inactivity API in general? Um um I mean obviously we've all been very very into um um the say command which I love. **[91:30]** Okay. Well, all right. Maybe I'll just start committing some of these things. I think I need to add um I'm going to do some committing here. I'm going to say get add. It's going to be uh source uh oh uh plugin source wp um can I do that? I don't think I can. **[92:07]** Oh, I did do that. Okay, cool. Look at here. So, this should be um add cool. Okay, so um get get commit message um add all um directive examples so far. Cool. Uh we'll push that up. So [clears throat] the next thing is um [snorts] **[92:37]** okay I'm going to get add template. Okay. Um message adding um changes temperatures. **[93:22]** Okay, cool. Let's let's let's include the deleted stuff that we're getting rid of in the template. Okay, so get message um restruct God, I can't type restructure templates. All right, so then the last stuff. Oh, I have some things in here I have to get rid of. So I'm using Prism.js. I actually got it working. So, kudos and props to Mr. Kevin **[93:53]** um to for helping me for pointing me in that in that direction. That worked out really well. Um Oh, wait. What? Yeah. No, I don't want to delete that. That should not be deleted. Where is that? Where that go? That that can go back. Yes, I want to restore that. Okay. Weird. Um, good. It's cool. So, **[94:24]** the rest of the stuff is um Okay, I'm just going to add everything from plugins. I think we're good to go. Get add plugin. Oh, no. No, no. and plug in. **[94:58]** Should be nothing. Okay. All right. So, let's just leave. Okay. Um this T at all the message um theme updates to to uh centralize the CSS **[95:29]** get push. Okay. [clears throat] Okay. So that's got us all completely up to date here now, which is great. Um, all right. So, let's All right. Let's uh let's see how the template's going to hold up and we'll do another one. So, what did we just do? We just did style. We've already done text. [clears throat] Um, we've done contextbind class style text, right? And now we just need on. So, **[96:01]** let's do an on example. Uh, okay. Okay, so let's see what the on example is. Okay, so we'll just do the on example. So in here, we're going to go npm run block np on. Oh, shoot. Okay, I need to fix that. Um, so it's not in there. So I've got to go. What's this template? That should be it, right? Clear. **[96:33]** Clear. There we go. Okay. So, now we have this on. So, let's look in here. Oh, why is icon not not working? Why is the icon not being added? What is the deal, man? Uh, external project templates. Great block. **[97:05]** Do you know I have any idea? That's not it. Is icon not avail not? Is it not possible to use icon? **[97:40]** Dashicon. That doesn't seem right. All right. That's weird. I don't know why that that isn't working, but we'll make it the right one. Okay, cool. So, uh I have to figure that out. [clears throat] Um Okay, cool. So, what what was this one called? on and on on right CD plugin and npm start and then we'll jump over here and do uh on **[98:12]** make this make this a header heading there gop on there we go both those group them group them get rid of the inner inner block cont what's not working what's not working is that I am defining I in my create block template let me show you in my create block template I have defined in a number of places icon and icon [clears throat] should correspond with the icon property **[98:44]** in block.json JSON, right? Yeah. But for whatever reason, it's not working. I have I'm doing it in two different places. Like I have this transformer that's doing it and I have this in here, but it just when it when it scaffolds, it just does not get output. And I cannot figure out why. So that's a weird thing. I have to look at that. Maybe it's been maybe it's a problem with the tool. So I'll have to take a look at that. **[99:15]** Um, all right. Anyway, so we have this on. So, let's jump over here. And so, we have the on. We have the on. And now it's got WP on example. Um, you can pass the value as an as a as a as a dashon for sure. Um, but it the property like in in block JSON, unless I'm doing this wrong, block JSON, right? like there is no dash icon but there is **[99:48]** you know if I go icon so that's that's the issue is that icon is not being defined for whatever reason my create block template is not it's not it's it's not working so the property name is is icon but this is actually this is a dashon so that should be working I don't know why it's not [clears throat] and I think if you if if you leave it out I think it it um it it'll default to smiley or something so I don't I I have to look at that. Maybe there's been a change to the the the create block uh package that's going to uh affect that. **[100:19]** All right. So, let's look at the example. Super simple examples. Here we go. So, we got a button. We're going to put it in uh render where the example goes right in here. It's a button. So, we're going to give it the uh yappy button. I'm just going to do this. Do this. We're going to give it a class of um yappy. Happy. Yeah. Well, it it can be a Dashicon, but **[100:51]** the the property Oh, you thought that the property was dashon dashon. Huh. It's weird because it shows his Oh. Oh, wait a minute. This is showing his dashon. Uh, hold on. Maybe it maybe it needs to be set as dash icon, but it comes in as icon. That's super dumb. Let's test that. MP MPM **[101:23]** uh blocks will be uh testing. Okay, let's see what Let's see what happens. Maybe it needs to be defined as as that. Let's see. There you go. There you go. I was That's dumb. There you go, Troy with the big win. Thanks, man. Appreciate that. That's amazing. Um, that's the only time though that the name in here **[101:54]** doesn't represent. Okay, that's It's dumb. I I hate that I have to say. Not that not because it screwed me up, but because it makes no sense to me that that things like, for example, in a block JSON, when you have category, category is the name of the property and category is the name that you would change in here. And same with text domain attributes, any of those top **[102:24]** level things get should not be a different naming convention. I don't like that at all. Anyways, but thanks for helping me out with that, man. I really appreciate it. that that makes my life so much easier. In fact, we're going to just go ahead and we're going to What about that? What did I do here? Oh, okay. I have to fix that and I have to fix this uh correctly. Access the template **[102:56]** and Troy saves the day. with dashon dashon. All right. Well done, my friend. Thank you so much for that. Am I wrong in thinking that? I don't think I am. I think that's a dumb a dumb thing. I think that's going to trip people up. I've been working with create block for a very long time and I've written patches for create block. I've **[103:26]** added features to to uh create block. Uh the the variance thing was my baby. that being able to pass variant um have variants contain their own path to files. That was also me. But uh it's dumb that [laughter] the icon property is dashicon somewhere else. I don't think that's very that's not a very good developer experience in my opinion. I'm grumpy. No, dude. Never hesitate to mention anything. If you're wrong, I will just laugh and point like this. But **[103:59]** >> [laughter] >> Oh, what happened? It didn't do it. All right. Well, I wish there was a kudos button. So, there is. You're >> That's about as good as it gets. [snorts and laughter] It's all I got for you. I can do this one, too. >> Ain't nobody got time for that. Oh, this is >> I am madly in love with you. >> There we go. Madly in love with you, **[104:29]** Troy. Madly. [clears throat] Oh, check it out. This is the sweater, Troy. It finally showed up. So, here's a fun fact. Troy is an amazing dude and uh was like one of the lead or organizers for Work Camp this year. And I ordered a sweater um just like cuz I get some swag stuff. and I was going to bring it as a gift for him because he asked me one day, "Hey, if you ever see a WordPress sweater at Work Camp US or whatever, I I'll grab it. I'll pay it back." So, I'm **[105:00]** like, "Well, you know, so I ordered this thing and it it was like months and months and months." And this is no shade on any of the people who are managing the store internally and automatic. It is a huge undertaking. Y'all doing a fantastic job, but it took forever to get here and so I I brought him a hat instead. Uh and then when I got back and then like a week later, guess what shows up? This thing. But I love it. It's very comfortable. So, um maybe I'll try to get another one for next year there. Try. [laughter] So, anyways, um [clears throat] what were we doing here? Uh okay, so **[105:32]** that doesn't need to be in there. So, render. We have all this. We have all this. We have all this. Um okay, so we have click me. So, what? Oh, is this console logging things? Oh, I haven't added the store. Okay. So, I have to add this this thing log time. Um, that's not super helpful. I think I don't think I want to put it into the um. Oh, no. No. So, I just need this. Uh, that needs to go away. **[106:03]** All right. So, this should this is going to work. It's going to click. Oh, is it going to work? I put this wrong place. Hello. What is it supposed to be do? Oh, wait. Am I not building? No, I'm not building CD plugin. Uh, npm start. Cool. Cool. Call call. So, the we have the event. If I refresh this, refresh this now, I should get some. **[106:35]** There we go. Maybe [clears throat] maybe maybe what I'll do, I'm going to I'm going to make a slight change to this. I'm going to store this in in in uh state. I'm gonna I'm gonna come up here and I'm going to say uh last click, right? I think I'm going to do that. And then um I'm yeah, I'm going to modify the the example a a little bit. I'm going to say P **[107:06]** I'm going to bind the text. So data wp text is going to be set to state.last click. Um that Oh, come on. Pressing buttons. Last click. Um and you know, >> ain't nobody got time for that. So, we'll do this. Oh, you know what? The other thing I'm I'm going to do is I'm going to wrap it in this so we can show **[107:37]** Neant never. I don't need double quotes. I need single quotes. Right. So, click that. Okay. Cool. And then in the store, what I'm going to do is I'm going to log the time and I'm going to set uh state doc exactly that. That's exactly **[108:09]** exactly what it's going to be. Oh, come on. And then I don't need this. So that should do that, right? So if I click this, I go click last click to the front D. There we go. No time. Yeah. All right. So that's kind of cool. [clears throat] And then I have to do the code. So let's **[108:39]** do the code. All right. So, I'm going to grab the whole store and then JS snippet here. I'm going to get rid of init block and this because we don't need any of that doing any of that stuff. We're going to get rid of the toggle help because that's not really what's being done. And that's cool. So, then in uh oh, in render, I already have it. So, in this one, I I think I need to include maybe I should just include this as context. **[109:13]** No, I'll do it this way. So, I'm going to add that. And then where's P? PHP snippet. Do this. Going to close that. So, this is going to just get rid of that. Then we'll grab this section down to the H where the HR is. Oops. And then do this. And then do section We don't need this and we don't need this, **[109:50]** right? That should be all we need. Refresh this now and click that. I should get the render movie.js. Okay, cool. All right. Well, I'm I'm actually pretty excited. We We kind of got through a lot of this today. So, let's see. Let make sure this all works. So, scroll down here. Boop. Oh, why didn't that work? Why didn't that one work? **[110:21]** Click in here. Oh, you know what? I didn't do an idiot. Okay, I got to I I didn't update the toggle help function needs to be updated uh for the on and then also in the in the [clears throat] template VJS help needs to be like that. Okay, so I think this should work now. Let's go to the bottom. Click on that. Scroll to the **[110:52]** top. Okay, [cough] that works. This is actually kind of fun. Oh, fun. Nerdy, maybe. Definitely nerdy. Uh, what's this? I want to take this whole thing. Uh, not this thing. I want to do column sidebar group position sticky. Save. See, actually, I want this to like scroll with. Why is it not working? You son of a [ __ ] **[111:43]** Oh, anyways, maybe that's maybe that's the thing that I need to do is I need to just get this thing so it just like tracks the whole way down. Oh, you know the other thing I should do? I should be able to jump to this that Oh, that might be I think that might be something to do. All right, this is going to be probably the last thing that I do today. But in in in this Okay, so now that we have this in here, TLC tracker, we're going to do this. We're go render. Now, inside of this, I'm going to do **[112:15]** How can I do that? Um, the text is going to be Oh, we'll just do this a HF. It's going to be um thing. Oh, I need to data dot WP. **[112:45]** We go bind. We go href. Okay. And it's going to be state. Is it state? Well, I don't know how to do this. **[113:23]** I don't know how to do this. What I want to do is be able to have it jump to a particular anchor. I think I need something a bit more complicated than that though. Um, unless the context item maybe I can I think I have to think this through a little bit more. I think what I have to do is I have to basically have item and then anchor. So like when it gets **[113:54]** updated. So for example like if I were to do so I push it in here and I go. So this would be um like name, comma, and then I can go anchor. It's like that. So, this is going to um this it's going to break my view, but I think this Oh, boy. Okay. And then the other thing. Okay. So, then in my TLC, **[114:24]** get the out of here. I think what I need to do is I need to go item um.name dot pull that out and then I go um uh what's this context? So context doc context item **[114:54]** anchor and then we'll go data wp text will be context item I don't know this going to work but we'll see that name. So we'll see what got spit out into there. So stands view class viewed. **[115:29]** Why is the name not showing up? [clears throat] **[116:08]** Interesting. Okay. Did I Did I call it something wrong? Let's see. Let's check something here. Um, where's the There it is. It's done. **[116:51]** >> [clears throat] >> Oh, I know exactly why I'm doing this. You ever spell something wrong? [laughter] This is what I just did. It's context, not content. So, I should be context. There we go. So, I click this. Okay. So, I don't have an anchor. But if I come back in here now, I wonder if I Okay, I'm going to grab the style. I want it to have uh event. I want to have an anchor. **[117:24]** So hopefully if I check on style is doing that wrong. Let me check this out. Inspect. What does the anchor look like? Oh, is this WB WP style? Oh, **[117:58]** so if I click on All right. **[118:44]** Oh. Oh. Um, how do you uh can't remember how to do it? Justreplace, right? It should be place. **[119:18]** What's looking for periods? I want it to be space. That's what I want. [clears throat] Nah. Beauty. Okay. Nice. So now I can jump around. >> [snorts] >> Oh, what is this? Sorry. Speaking of block JSON, I would assume I could specify which post types a block is available on in the right JSON file, but it doesn't look like it doesn't look **[119:48]** like it. Uh oh. Yeah, I don't know if you can. That's a good question. I don't think you can. I know you can. You can apply templates to post types that way, but I don't think you can do it. That's a good question. I'll ask around. I'm not sure if that's actually possible, but um I'm not really sure. Okay, cool. So, this is neat. So now all **[120:18]** I have to do is come in here and I want to go WP text example. Oh, cool. So, if I click on bind, it should **[120:49]** jump me down to bind. I want this to track with me. We haven't got there yet, but that's cool. Okay, very cool. Very cool. Now, we do this. Uh oh. Oh, I know why that doesn't work. Okay, I need to figure that out. Okay, so mark is viewed. I need to get um the viewed items. So what is state viewed items push name. **[121:25]** I gotta look at um Okay, I gotta look at uh I knew I said I know I said this would be the last thing I do, but I'm going to keep working on this. Let's object items. Okay. **[121:55]** Is viewed. There's nothing in is viewed right now. [clears throat] Is viewed exception. There's no context. **[122:36]** Okay, so that should be working. **[123:35]** Okay, that's the thing. So now I click that. There we go. Okay, so because I named it because I [cough and clears throat] changed the the way that the state tracks this stuff, I need to just pull out the the name and not the not the everything. So this should work now. So I jump down to on example. I should be able to click that. Oh, look at that fun stuff. Scroll back up. It works. Yay. Stocking position on your sidebar and have a minute. Yeah, I was trying to do that actually. So, my sidebar here advanced. I don't have the uh the area **[124:06]** to to do that. So, I was trying to do it in column doesn't work. I was trying to do it in in my group. Why is it is it locked? It's set to sticky, which is very very odd, but it doesn't seem to want to. Oh, maybe I didn't save it. No. See, it's not not working, man. Had that working before. I don't know why it's not. So, **[124:39]** very strange. Very very very very strange. I'm gonna delete this. I'm just going to try to delete this. I'm going to put a group in here. Um, group and it's going to be whatever that and here make sure in there. So, position is going to be **[125:14]** sticky. All right, it's working now. That's exactly what I wanted. But I do want to have it I want to have it like lined up with that, though. **[125:52]** Maybe I can just pull title. Oh, I have an idea. What's in here? What's that? What's this? Let's pull the Let's pull the title out above the columns. Uhhuh. You think? Oh, no. That was legit. **[126:36]** That looks a little better. Kill the spacer. Yeah. Or I mean maybe I I need a spacer. What? I don't want tags. That needs to go away. Delete the tags. Delete the tags. Then here. Maybe I should add a spacer inside of here. Maybe I don't Maybe I just need that. I don't need this group in there anymore. I don't know. Let's see. Well, that doesn't look good. We'll put that back. **[127:07]** Uh group. and this and then title it's going to be yeah sure we'll just use the inner box for that I don't know um so that lines up with that that lines up with that oh you know why because it's because my um you know what might make more sense is if if I style my content like if I have this group if I style this group with uh like if I do like a background color whatever I do That **[127:38]** might look a little bit Yeah. So that'll that'll line up better. Um looks like poop [laughter] border. Yeah, sure. Yeah, why not? All right. Something like that. Um [clears throat] I'll come up with something. But anyhow, I I hate that actually. Like completely hate that. But we'll just go ahead and reset this. **[128:11]** Cool. And that's just Why is that doing that group? Um that does. Nope. No. Does that That doesn't look bad. Actually, that's not bad. table of contents looks worked, but we'll figure that out. Um, **[128:43]** go 70, maybe 30 on this one. Anyways, okay. Well, this is this is me tweaking stuff. Um, we'll just uh What do I do here? Turn that off. Not that bigger. Right. Yeah, that's that's **[129:15]** better. Okay, whatever. We'll figure it out. So, uh, this is exactly kind of how I want it to look. Except this is not how I want it to look. I'm not a fan of com blocks. Yeah, I'm starting to not be a fan of that as well. But I don't know what. Let's look at what this looks like in mobile. Oh, see? See, that should go the other way. It's interesting. **[129:53]** Why is it stacking that way? I guess because it's not really a navigation. I don't know. Anyways. Okay, cool. We'll leave it for now. This [clears throat] is my working example of everything. Oh, I need to I need to kill those. Okay, cool. That does this. That does this. That has those. Okay, [clears throat] **[130:24]** awesome. Okay. Well, um I think I'm going to call it, but thanks so much for hanging out with me today. I think I've got a lot done. I'm very excited with all this. Um I have 24 more things. Oh, the class. Oh, right. I'm going to um we just going to yolo this or what? Yeah, I'm just going to yolo this. Okay. So this is um the add the they the be on example and fix some template some uh issues with **[130:56]** template. All right, cool. Here we go. Sync changes. All right. Oh, if you're not uh this this is a I have this uh repo here um that you're more than welcome to take a look at. Where are my repos? Where are my repos? Um, I'm I've just been pushing this all up to this repo that I'm calling mastering the the interactivity API. Um, it's pretty rough right now, but you're welcome to grab a look at that. Um, I'm going to clean it up and stuff. This this this is loosely **[131:26]** affiliated with the talk that that I'm doing um in Word Camp Sophia. So, I'm going to clean this up a little bit and, you know, maybe add a playground link and everything so you can just take a look at these and get a better idea of how this stuff works. Um, essentially, I think it's just going to be one big like this. It's going to be basically just showing all of this stuff. I'll do some I should probably do some explanations on this. Um, yeah, and so on and so forth, what have you. So, I might do that. Actually, what it might be neat is if inside of this we could do like uh uh like the title, the **[131:59]** debut text, and then the um like we'll do like a um like a just like some interlocks with like a a heading and a and a um paragraph tag so you can like explain this stuff and then have the example sit below it and then like you know toggle the code that way. Anyways, well thanks so much for hang hanging out with me today. Oh, I'm streaming on Facebook now. I have a Facebook page, Brian Welch Code. So, if you're a Facebooker, go there, check it out. And I also might try streaming live on Tik Tok. I don't know. I think I had to be approved to do **[132:30]** it by Tik Tok. So, I went through that process. So, we'll see. I don't know if it's going to work or what it's going to look like, but why not, right? I'm [clears throat] a cool hip 13-year-old, so I should be on TikTok. All right. Well, anyways, friends, thanks for hang hanging out with me today. And uh I'm not streaming next week because I will be um on a plane actually headed to Bulgaria. Uh, but I will be back. I have a special stream coming up. December 2nd is State of the Word. Um, and I will be doing a live stream watch party with that. Um, I think I'm going to have a **[133:01]** special guest with me. I don't know yet. We got to work that out. Um, but if you want to hang out, it will be live. So, I think that's like 6:00 p. p.m. or so Eastern uh time. Uh, so yeah, I will get a event on there. But uh but yeah, you should definitely um hang out and we'll watch uh the the state of the word live. All right, talk to you'all soon. Have a good one and uh have a good mosh pitting. Bye.