What's new for Devs in Wp 6.9: Interactivity API 🔗 **Source:** [What's new for Devs in Wp 6.9: Interactivity API](https://www.youtube.com/watch?v=8X8ztWQFx9E) > [!note]+ Document Notes > tags: [wordpress-development, interactivity-api, block-development] > author: [MISSING] > source: YouTube > reference: https://www.youtube.com/watch?v=8X8ztWQFx9E > date created: 2024-11-23 14:30 > > # 🏷️ Title: What's new for Devs in WordPress 6.9: Interactivity API > <!-- deep-read:sections start --> ## 🧰 Action Inbox - [H1] Review dev notes for WordPress 6.9 Interactivity API changes — live exploration/testing #wordpress-dev - [H2] Test client-side navigation improvements with script modules and stylesheets — hands-on demonstration #interactivity-api - [H3] Prepare examples for upcoming Developer Hours session on Nov 27th — content creation #developer-education ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [WordPress 6.9 Development Cycle](https://make.wordpress.org) - [Interactivity API Documentation](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/) - [Block Development Examples](https://github.com/WordPress/block-development-examples) ## 📝 Summary - Live stream exploring WordPress 6.9 Interactivity API updates, covering new features and improvements - Focus on client-side navigation enhancements, directive syntax changes, and TypeScript support - Demonstration includes testing code examples and preparing for upcoming Developer Hours session - Key changes include standardized unique IDs for directives, improved router regions, and better server state handling - Stream serves as preparation for November 27th Developer Hours session on Interactivity API and Block Bindings ## 📖 Main Content This live stream explores the new features and improvements coming to WordPress 6.9's Interactivity API, scheduled for release December 2nd. The presenter reviews official dev notes while testing code examples in real-time. The Interactivity API enables modern JavaScript framework behaviors within WordPress's block paradigm, supporting reactive state management and client-side navigation. Two main packages handle this functionality: the core interactivity package managing directives, and the router package enabling single-page application (SPA) behavior. Key improvements in WordPress 6.9 include standardized syntax for unique directive IDs, enhanced client-side navigation supporting dynamic script modules and stylesheets, and better server state management. The router now supports more flexible placement of router regions within interactive elements. The session demonstrates practical examples using the Block Development Examples repository, showing how client-side navigation can create seamless user experiences while maintaining block-based architecture principles. ## 🗒️ Notes #### ⏱️ [00:00](https://www.youtube.com/watch?v=8X8ztWQFx9E?t=0) — [H1] Stream introduction and WordPress 6.9 release timeline - Key idea: Friday development stream focusing on WordPress 6.9 Interactivity API changes - Evidence: "WordPress 6.9 development cycle and is planned to be released on the 2nd of December" #### ⏱️ [02:15](https://www.youtube.com/watch?v=8X8ztWQFx9E?t=135) — [H2] Two packages structure of Interactivity API - Key idea: Interactivity API consists of directives package and router package for different functionalities - Evidence: "There are two packages related to the interactivity API... one manages the directives... the router is to manage client side navigation" #### ⏱️ [03:30](https://www.youtube.com/watch?v=8X8ztWQFx9E?t=210) — [H2] Core Interactivity API concept explanation - Key idea: HTML elements react to state changes through global, local, and derived state management - Evidence: "Having an inner state and having elements in the HTML reacting to that state... global state that can be shared by different blocks" #### ⏱️ [05:45](https://www.youtube.com/watch?v=8X8ztWQFx9E?t=345) — [H2] Client-side navigation benefits demonstration - Key idea: SPA-like behavior allows navigation without page reloads while maintaining media playback - Evidence: "We can play the video and we can continue navigating... audio player where we can play some songs and we can navigate while the player continues" #### ⏱️ [08:00](https://www.youtube.com/watch?v=8X8ztWQFx9E?t=480) — [H3] Standardized unique IDs for directives - Key idea: Triple-dash syntax differentiates unique IDs from event suffixes in directives - Evidence: "To assign a unique ID to a directive, append a triple dash followed by the ID... double dash for the event, triple dash for the ID" #### ⏱️ [09:30](https://www.youtube.com/watch?v=8X8ztWQFx9E?t=570) — [H3] Deprecated data-wp-ignore directive - Key idea: Data-wp-ignore directive removed due to context inheritance issues and lack of real use cases - Evidence: "Its implementation broke context inheritance and caused potential issues with the client side navigation feature" #### ⏱️ [11:00](https://www.youtube.com/watch?v=8X8ztWQFx9E?t=660) — [H2] Client-side navigation improvements for script modules and styles - Key idea: New style and script module managers support dynamic loading during navigation - Evidence: "Style assets manager... script module manager has been included supporting multiple import maps from different pages" #### ⏱️ [15:20](https://www.youtube.com/watch?v=8X8ztWQFx9E?t=920) — [H2] Block Development Examples repository introduction - Key idea: Repository provides practical examples and live demos for testing Interactivity API features - Evidence: "Repository of examples to showcase block development APIs and techniques... each example has a live demo" #### ⏱️ [18:45](https://www.youtube.com/watch?v=8X8ztWQFx9E?t=1125) — [H2] Developer Hours session announcement - Key idea: Upcoming November 27th session will cover Interactivity API and Block Bindings - Evidence: "Jonathan Bosen and I we are going to host this developer hour session... talk about the interactivity API and blog bindings" #### ⏱️ [22:30](https://www.youtube.com/watch?v=8X8ztWQFx9E?t=1350) — [H3] TypeScript support improvements - Key idea: New async action return types help address TypeScript circular dependency issues - Evidence: "WordPress 6.9 introduces two new types script helpers... help developers address potential TypeScript issues when working with asynchronous actions" #### ⏱️ [28:15](https://www.youtube.com/watch?v=8X8ztWQFx9E?t=1695) — [H2] Router regions flexibility enhancement - Key idea: Router regions no longer require root-level placement within interactive elements - Evidence: "Previously router regions needed to match a root interactive element... now root regions are updated whenever they are placed in an interactive region" #### ⏱️ [35:40](https://www.youtube.com/watch?v=8X8ztWQFx9E?t=2140) — [H3] Live testing of router region improvements - Key idea: Demonstration shows nested router regions working properly with client-side navigation - Evidence: "Having an inner section for the data developer router region... this works as expected" #### ⏱️ [38:00](https://www.youtube.com/watch?v=8X8ztWQFx9E?t=2280) — [H3] New attach-to option for router regions - Key idea: Router regions can be rendered outside initial page regions using CSS selectors - Evidence: "Router regions accept and attach to property... supports cases like overlays that are necessary for a block but may appear outside all the regions" #### ⏱️ [40:30](https://www.youtube.com/watch?v=8X8ztWQFx9E?t=2430) — [H2] Improved server state and context functions - Key idea: Better handling of client-side modifications and server value resets during navigation - Evidence: "Properties that are modified on the client but should reset to server values for navigation... will still trigger an invalidation" #### ⏱️ [45:20](https://www.youtube.com/watch?v=8X8ztWQFx9E?t=2720) — [H2] Live demonstration of server state functionality - Key idea: Practical testing shows get_server_state working with dynamic content updates - Evidence: "So we can update each region with values that come from the server... this is what's expected" ## 📚 References - [WordPress 6.9 Dev Notes - Interactivity API Engine](https://make.wordpress.org/core/2024/11/wordpress-6-9-dev-notes/) - [WordPress 6.9 Dev Notes - Interactivity Router](https://make.wordpress.org/core/2024/11/wordpress-6-9-dev-notes/) - [Block Development Examples Repository](https://github.com/WordPress/block-development-examples) - [Interactivity API Documentation](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/) ## 🗣️ Paraphrase - WordPress 6.9 introduces several refinements to the Interactivity API, focusing on better syntax standardization and enhanced client-side navigation capabilities - The main improvements include clearer directive ID syntax, deprecated problematic directives, and better support for dynamic content loading during navigation - New TypeScript support and improved server state management make the API more developer-friendly and reliable for complex interactive applications ## 📰 Newsletter **WordPress 6.9 Brings Interactivity API Enhancements for Modern Block Development** WordPress 6.9, releasing December 2nd, delivers significant improvements to the Interactivity API that make building modern, reactive blocks easier and more reliable. **Key Updates:** - **Cleaner Syntax**: Triple-dash notation for unique directive IDs provides better clarity - **Enhanced Navigation**: Client-side routing now supports dynamic script modules and stylesheets - **Flexible Architecture**: Router regions can be placed anywhere within interactive elements - **Better State Management**: Improved server state handling during navigation **Practical Benefits:** These updates enable developers to create sophisticated single-page application experiences within WordPress's block paradigm, supporting features like persistent media players and seamless content transitions. **Get Started:** Explore practical examples in the [Block Development Examples repository](https://github.com/WordPress/block-development-examples) and join the upcoming Developer Hours session on November 27th for deep-dive coverage. Resources: [Interactivity API Docs](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/), [WordPress TV Sessions](https://wordpress.tv/), [Developer Hours](https://make.wordpress.org/core/handbook/contribute/developer-hours/) ## ✅ Action Items #### WordPress - Core: Test client-side navigation improvements in WordPress 6.9 RC builds - Core Program Team: Coordinate Interactivity API documentation updates with dev note releases - Community: Promote upcoming Developer Hours session on Interactivity API and Block Bindings (Nov 27th) - Training: Create lesson plans covering new Interactivity API features and syntax changes - Documentation: Update DevHub examples to reflect triple-dash ID syntax and router region flexibility - Design: Review UX patterns enabled by enhanced client-side navigation capabilities #### DevRel - Education: Develop workshops demonstrating Interactivity API improvements in WordPress 6.9 - Developer experience: Update block development examples repository with new syntax patterns - Developer marketing: Create content highlighting SPA-like capabilities within block paradigm - Community management: Gather feedback on Interactivity API changes from early adopters ## 🧪 Hypotheses - Triple-dash ID syntax will reduce developer confusion between event handlers and unique identifiers in directives - Enhanced client-side navigation will increase adoption of Interactivity API for dynamic WordPress sites - Flexible router region placement will simplify complex interactive block layouts - Improved server state management will reduce bugs in navigation-heavy applications ### 📊 Methodology - Compare directive syntax clarity between double-dash and triple-dash notation through developer surveys - Measure performance improvements in client-side navigation with new script module manager - Test router region flexibility across different block composition patterns ### ❓ Questions - How will the TypeScript improvements affect adoption rates among JavaScript-focused WordPress developers? - What performance implications exist for the new style and script module managers during frequent navigation? - How do the server state improvements impact memory usage in long-lived single-page applications? ### 🔮 Future Research - Comprehensive performance benchmarking of client-side navigation improvements - Developer experience studies comparing Interactivity API to other JavaScript frameworks - Investigation of advanced use cases enabled by flexible router region placement ### 💡 Implications - Practice: Block developers need to update directive syntax and test navigation improvements - Education: Training materials require updates for new syntax patterns and enhanced capabilities - Security: Client-side navigation enhancements may introduce new attack vectors requiring review - Funding: Enhanced Interactivity API capabilities may drive increased investment in WordPress as application platform ### 🧠 Learning Styles Assessment Reading level estimate: 12th Grade #### 👀 Visual learners - Present: Code examples, architectural diagrams of state management - Improve: Add visual flowcharts showing client-side navigation process, directive syntax comparison tables #### 🔊 Aural learners - Present: Live stream format with verbal explanations and demonstrations - Improve: Audio-only summary of key changes, podcast-style deep dive #### 🗣️ Verbal learners - Present: Clear definitions of technical terms, step-by-step explanations - Improve: Analogies comparing Interactivity API to familiar JavaScript frameworks #### 🧩 Kinesthetic learners - Present: Live coding demonstrations, hands-on testing of features - Improve: Interactive tutorials, downloadable code samples for experimentation #### 🧠 Logical learners - Present: Structured progression through dev notes, systematic testing approach - Improve: Decision trees for choosing directive syntax, performance comparison tables #### 🧑‍🤝‍🧑 Social learners - Present: Live stream chat interaction, upcoming group Developer Hours session - Improve: Code review sessions, peer learning workshops #### 🧘‍♀️ Solitary learners - Present: Self-paced exploration of code examples, individual testing - Improve: Self-assessment checklists, independent project templates #### 🌿 Naturalistic learners - Present: Organic discovery approach, real-world application examples - Improve: Case studies showing Interactivity API in production websites ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear heading structure, code examples with proper markup - Improve: Add aria-labels to code demonstrations, improve live region announcements #### Keyboard navigation - Present: Standard video player controls accessible via keyboard - Improve: Keyboard shortcuts for code example navigation, focus management #### Contrast and readability - Present: High contrast code editor themes - Improve: Adjustable text size for code examples, better background contrast #### Text resizing and reflow - Present: Responsive video player and chat interface - Improve: Scalable code fonts, reflowable transcript text #### Media and captions - Present: Live stream with real-time audio - Improve: Auto-generated captions, downloadable transcript #### Standards reference - Address WCAG 2.2 AA requirements for time-based media and interactive content ### 🌍 DEIB Assessment #### Cultural breadth - Present: English-focused content with some global WordPress community references - Improve: Multilingual code examples, international developer perspectives #### <!-- 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=8X8ztWQFx9E)* **[00:13]** [music] **[04:43]** Okay. Hello. Oh, hello. Welcome to another stream session. As you know, I usually connect on Fridays at this time, like around 4:00 UTC [music] to talk a little bit about WordPress development, especially focused on block development. **[05:17]** And today I want to talk a little bit about what's new for developers and especially about the interactivity API. So what I plan to do today is to review the dev notes that have been published about the interactivity API **[05:52]** [music] and test some of the code in some projects we can create right now. And yeah, just try to understand. I haven't checked this yet. So, I'm going to [music] discover this at the same time than you. Let's see how it goes. And the idea is that we together discover this new features for the interactivity API that are coming in WordPress 6.9, **[06:23]** which is going to be released in December. I don't know exactly the date. I think it's the 4th. And let me see in [music] make WordPress core we should have here somewhere or what we can do is to say WordPress 6.9 **[06:54]** release. Yeah, this is the post I was looking for. This is a WordPress 6.9 development cycle and is planned to be released on the 2nd of December. Hey Troy. Hi. How you doing? Yeah, December 2nd. Thank you. Thank you for **[07:25]** the tip. So, yeah. Hey, so we are going to review the interactivity API and let's see what we can find here. So, let's start by checking the dev nodes. There are two dev nodes actually related to the interactivity API. One of them is focus on the **[08:02]** interactivity API engine and the other one is about the interactivity API interactivity router. So yeah, first thing to clarify is that there are two packages related to the interactivity API. And if we go to Gutenber and we go to **[08:32]** packages and we go to look for interactivity. Here we have the two packages. One of them, the interactivity package is the one that manages the directives. I don't know if you are familiar with the interactivity API, but um in the block **[09:03]** editor in the block editor handbook. I'm going to share here the link in the chat if I am. Yeah, here's the documentation about interactivity API. There's one image that I like a lot and it's in the API reference. **[09:35]** So, this is the interactivity API. Let me see if I can open the image. So yeah this is ladies and gentlemen here you have the interactivity API. So is this whole idea of having an inner state and having elements in the HTML reacting to that state and that state can be a global state that can be shared **[10:05]** by different blocks. We can have a local state [music] that is only available for a specific piece of the DOM. So we can repeat different pieces of the DOM. Each one of them will have its own local state. And then we have derived state which are properties which value are calculated from values in the other states like local **[10:36]** state or in the global state. And the cool thing about interactivity the interactivity API is that the HTML reacts to any change we get in the variables of the state and there are a lot of directives you can see them here. These are the directives. So yeah this is more or less the idea **[11:07]** like very summarized. I invite you to to check the the documentation here. So yeah, that's one idea that there are two packages being worked regarding the interactivity API. The first one is about the directives. The other one the routter is to [music] is to manage client side navigation which is this idea of **[11:39]** creating a WordPress site that behaves as an SPA as a single page application. The idea is that we can navigate, we have control over the navigation without provoking any reload of the page. And that that's really really cool. We can create really cool effects because the navigation is faster, but also we can control the elements that we want to **[12:12]** change [music] and which ones we don't want to change. For example, if we step if we play trailer here, this is running right now. **[12:44]** Okay. So the nice thing is that we can navigate. You can see ah we lost this. Yeah. I think that this app needs some some review. But you get you get the idea, right? We can go to we can go to play trailer **[13:14]** and then theory. No, this is broken. But the idea is that we can play the video and we can continue navigating. [music] So imagine um an audio player where we can play some songs and we can navigate while the player continues [music] reproducing uh whatever we are playing without any interruptions and some other effects and also it's **[13:44]** faster because we only reload the portion of the page we [music] want. So yeah, we can create really cool effects and at the end the idea is that with the interactivity API, we can emulate the same behaviors we can get with other frameworks such as XDS or or any other JavaScript frameworks [music] with the addition that all of that will work in a block paradigm [music] because the block paradigm is another really cool thing **[14:16]** that means that we can generate any type of content with blocks. So this is a really cool thing behind interactivity API that it provides [music] all these modern I'm quoting modern uh behaviors but yeah modern behaviors that we can get with other framework within the block paradigm. So yeah that's the cool thing about the interactivity API. Yeah. So well this is an introduction. Okay. **[14:49]** So let's go to the to the thing changes to the to the interactivity API in WordPress 6.9. So we have a standardized API to set unique IDs in directives. HTML does not allow multiple attributes. Okay. I read about this the other day, but **[15:22]** I think there was something similar already for this. Yeah, I think this this this was already available with the interact 3DBI. So data watch unique ID. Okay. What's different? **[16:01]** Okay. So this needs to be changed. Um okay. What has changed here? HTML does not allow multiple attributes with the same name on a single element. Yet, multiple plugins may need to add directives of the same type to the same element. Okay. To address this, WordPress 6.9 introduces a standardized way to assign unique IDs to interactivity API directives, allowing an element to have multiple directives of the same type as long as each directive has a different **[16:32]** ID. To assign a unique ID to a directive, append a triple dash followed by the ID show in the following example. Uh, okay. **[17:02]** Uh, what? Okay, let me unique ID. Yeah, this was available before init log init focus. What's different is that now it uses maybe a **[17:33]** different syntax. To assign a unique ID to a directive, append a triple dash followed by the ID shown in the following example. Okay, the triple dash index and ambiguously differentiates. Okay, let's read the the issue for more information about this. **[18:12]** Okay. Adds official support for Unique ID's interactivity API. This is the same that was in the dev node. New parsing logic that recognizes the triple dash and differentiates it from regular suffixes. Uh okay. So now there is like the idea of **[18:43]** suffix directive suffix. Okay. Okay. My conclusion to this is that to completely differentiate make a difference between this and the and the IDs because previously we had this that will be in it lock [music] but also we had the **[19:22]** the on window resize. So yeah, I think it's more clear like double hash for the event, triple hash for the ID. Yeah, I think double dash Yeah, double dash event on window resize and triple dash ID. **[19:56]** So yeah, I think this is not completely new. What's new is the the specific syntax. That's my [music] my understanding of this. Okay, another new thing deprecated data dvp ignore directive. I have never used this. So the data dvp ignore directive was designed to prevent hydration of a specific part of an interactive **[20:28]** region. However, its implementation broke context inheritance and caused potential issues with the client side navigation feature of the WordPress interactivity routter module without addressing a real use case. Okay, so deprecated haven't used this before. So I won't have an issue with this. What we can do also is to help test. **[20:58]** Let's see if there are some tests for the interactivity API. For the interactivity API. Oh, here we have some updates. Okay. Interactivity API improvements support new styles and script modules on client side navigation. So let's check i API routters support new styles and **[21:31]** script modules on client side navigation. This PR updates the current interactivity API client side navigation feature addressing the following items. the style assets manager introduced previously in issue blah and removed in in the PR has been [music] reimplemented. It replaces the document with another based on new style and link. **[22:02]** The new script module manager has been included supporting multiple import maps [music] from different pages. Okay. What I think this has to do interactivity APS router has been adapted to support full page client side navigation while sharing most of the logic used by the region based navigation feature. Okay. **[22:33]** Style sheet manager. This piece is necessary to update the applied stylesheets after a client side navigation. New pages even when navigating between pages with the same template can have different style sheets as they can contain different blocks. [music] The previous approach was based on the document adopted style sheets API which requires constructed this. However, for third party stylesheets without the appropriate course **[23:05]** configuration, these instances were impossible to create as the CSS code is unreadable. A script module manager as new modules may appear not only should their stylesheets be handled but also the script modules when they are interactive. These pages can contain different import maps as new interactive blocks could have different dependencies **[23:36]** than those on the initial page. Okay, this needs to be addressed. Okay, these are the technical details. Okay, what I understand for this is that with client side navigation **[24:08]** this is um okay before I forget there's this uh developer hours happening next week on the 27th of November Jonathan Bosen and I we are going to host this developer hour session and we will talk about the interactivity API and blog bindings. We did a similar session.tv **[24:48]** WordPress.tv TV. We did a similar session a few weeks ago [music] that was focused on data views, data views, and data form and the abilities API. This is taking too long. Okay, I can show you later. I think I'm going to **[25:20]** save this just in case. Although I think And what I'm going to do is to reset the canvas. **[25:52]** Clear the whole canvas. Okay. We have here of a page. And here we can We can specify I think actually several areas that are **[26:27]** and here I'm going to stroke with background is going to be is okay. So this is the page A and we navigate to **[27:02]** page B. Oh my god. Okay, go away. We navigate to page B. And the only thing that changes is this. Is this goes from this to this. **[27:32]** The rest remains the same, but this is um this is a portion of the HTML that can include several blocks. It can have one block here. It can have another block here. But this new page can have different **[28:04]** blocks like here and this. Okay. The thing is that if this block, if this block is an interactive block, **[28:38]** interactivity [music] API block, which means means that has its own JS modules can have its own JS modules. **[29:11]** So what this What this pull request is enabling is that this works that whenever I hydrate a portion of the HTML with new content [music] using client side navigation, if that portion includes a **[29:41]** block that is an interactive block, And because of that it [music] loads some JS modules. That's uh why the import map here. Import map. Import map here. Import map. Yeah. So this is going to work. Now I guess that before this request you could have client side **[30:14]** navigation but that client side navigation wouldn't [music] include interactive blocks blocks using interactivity API and now they are enabled in this in this uh client side [music] navigation and also if they have custom some CSS they will those style will also be properly loaded **[30:44]** because of this [music] style assets manager. Yeah. So this is related to client side navigation. So by the way I don't think there is too much documentation about that. Let's check this. I think the only documentation we have it's in the activity router. **[31:19]** And so the package WordPress interactivity routter enables enables loading content from other pages without a full page reload. Currently the only supported mode is region based. Do you know what I think there is an example here in the block development examples. Do you know this repository? **[31:49]** I'm going to share this in the in the chat. If you don't know this repository, I think it's a very good resource and there's actually um explorer. This is a repository of examples to showcase block development APIs and techniques. And you can look for examples here using this [music] **[32:20]** interface. And I added this interactivity rout. And each example has a live [music] demo. So let's refresh a little bit. So we have this **[32:55]** and as you can see this text doesn't changes. If we go back to If we go back to our example this let me put this here and then this we can put **[33:26]** it here. So the blue area is this text. It doesn't change. And the green area is this. The yellow and the green area. As you can see, this changes, but this text doesn't change. And also with the client side navigation, we have **[33:58]** control over the URLs. So if you can see here I'm changing but I'm controlling the whole navigation with the client site navigation. I have control over the areas that are reloaded. Also I have control over the the URLs **[34:29]** and here we can see block regioning display attributes. So this is a block that is being displayed here and the region has this specific URL. So it contains which one is the next **[35:01]** which one is the previous. So the block is all this thing. You can actually have a look at the code. If we go to the C and if we go very important to the HTML that is being **[35:40]** so we have here This is the block the block interactivity router or we can we can actually check if we go to is this in we can go to posts **[36:14]** So this is the block is the interactivity router block and I have this here next and previous links. **[36:46]** And if we check the code we have Next. Okay, let me see the here we have these attributes that **[37:17]** are updated and then these attributes if we go to I think it's in the view. Here we import dynamically the WordPress interactivity router a [music] state URL region display. **[37:54]** This is a state variable that we assign to the it target href to the current URL and then we navigate to we navigate using the client side navigation using the internal methods and from The navigation is controlled by **[38:26]** the client side navigation. So if we go to the HTML, well we can we can check the the render and here we have for each block. Yeah, we have all these all of these **[39:02]** all of this. Is this an inner block? Let me see. There's a safe. There are inner blocks. I guess the inner block here is this. This yes interactivity routter columns and **[39:34]** this is the inner blocks and then I wrap all of that into this is save. So internally we have the inner blocks and then at some point I should display here the content. So this this is the ear blocks but I wrap all of **[40:06]** that into this. So displaying region displaying region from and here I display [music] the URL region display which [music] is taken from the URL in the browser. Then I display the inner blocks and then here's here's the interesting part because here the navigation is controlled by the **[40:36]** client side navigation. So we check if there is so I have two attributes prep and next with the prep. Um so if there is no prep this link it won't be uh displayed and the same thing with the next. So I'm controlling that somehow. I don't remember how **[41:12]** how do I control that? Yeah, I think because a Yeah. Okay. So, here's the thing. Here's the thing. I have **[41:46]** four pages. Each one has a URL. Your Harrison, your Lenon. So when I go So when I use action navigate and the action navigate it navigates using the client side routter what it does is that it fetches the internally the target **[42:17]** destination and it loads it reloads only the portion managed. by the client side navigation. And the thing is that each one of these posts and each implementation of this block has different **[42:50]** has different attributes. For example, Joe Lenon has next and have prep. But if we go to George Harrison and we check the code and if we check the code has next prep. So I guess Paul McCartney only has text **[43:22]** and Ringo only has breath. So yeah this is how we can implement client side navigation. Now this has a bolts. I need more examples but this is an example. Let me **[43:53]** say this again in the blog development examples. I have shared the link in the chat but if not you can just look for blog development examples in the WordPress organization. You have a bunch of examples about blog development. one of the examples and actually we have this link here which is explorer of examples. I want to add more examples because I have some more examples over there. But **[44:23]** if you look for if you click this tag you have here a bunch of examples of the interactivity API and specifically about the interactivity [music] router with these regions. So when we navigate only the regions are updated. Cool. So given this reminder I wanted to show before [music] the **[44:56]** previous developer hours that the newest. Yeah, this is the one I was referring to. I'm going to share this in the chat. Paste. There you go. So, a few weeks ago, Jonathan Bosener and I, we hosted a developer hours focused on what's new for developers in WordPress **[45:27]** 6.9. The topics we covered a few weeks ago were data views data form and abilities API. And the next one that is going to be next week is this one. Let me be sure the link chat. The next one which is going to be next Thursday is about block bindings and **[45:58]** interactivity API. So yeah, if you want to join us, we'll be talking about this. There will be a space for questions. So take note of that. Okay, let's continue reviewing the the dev node. So we have reviewed um there's an standardized way to set unique ids. **[46:28]** I think is that [music] with two hyphens we can set the event with three uh dashes we can set the ID. [music] We have this deprecated. And now the six WordPress 6.9 introduces two new types script helpers helper types a sync action return type and and type yield to interactivity API. [music] These types help developers address potential TypeScript issues when working with **[46:59]** asynchronous actions. Okay. Sync action return type. This helper lets the developer explicitly type the return value of an asynchronous action generator. For example, if we go to the if we go to block development examples **[47:33]** and we go to the activity API. So here for example, let me see. **[48:14]** Okay. By using any for yielded values we can add here and here. It breaks circular type dependencies when a state is used within G expressions or in the final value. for more information examples. It's an interesting topic. Interact API **[48:45]** using TypeScript. I need to check this more in depth. Okay. So, nothing super impactful I would say regarding interactivity API in WordPress 6.9. **[49:16]** [music] A new way to set IDs, a deprecated directive and new types. But I don't know how many people is working with Typescript and the interactivity API. So not sure about the impact of this. But what about the client side navigation improvement? So in WordPress 6.9 the client side **[49:47]** navigation feature provided by the WordPress interactivity router module has been expanded to cover additional use cases that were previously unsupported. Okay. Support for new scripts modules and stylesheets. Yeah, this is the the thing that was here. And how we could test this? So this **[50:19]** updates enhances this update enhances interactivity client side navigation with a new style sheet manager and script module manager supporting multiple input maps and restart full page navigation sharing logic with region based [music] app. It also fixes missing styles during navigation between pages with different blocks. Okay, let's [music] test this in the site editor. Go to the home template. **[50:58]** Going to test this with a playground. WordPress.net. And I'm going to make sure that I have the latest version here like nightly. Okay, not nightly the RC2 which which shouldn't change much for the final version. Okay, we have now 6.9 **[51:32]** in the site editor. Go to home template. So let's go to the in the side edit go to the home template. Okay. So we need to go to templates and now we need to go to the home template **[52:02]** block home. Ensure the force page reload setting is disabled in the query block. So if we come here very **[52:37]** ensure the force page reload setting is disabled in the query block. Um, okay. Anyone knows how to do this? **[53:11]** How do we change this? Ensure the force page reload setting is disabled in the [music] query block. Force page reload type advanced. Okay. I think reload full page force page reload is this. **[53:47]** Ensure the force page reload. I think this is it. But if anyone can confirm this, add an image block inside the post. Okay. So, go to the home template. **[54:18]** Ensure the force page reload setting is disabled in the query block. Done. Add an image block inside the post template. So we are touching two templates, the home template and the post template. And I need to add an image block. Change its style and make the image rot. Okay. Visit a page of the home that doesn't exist. For example, page two. So it shows no results block. **[54:51]** Click on the previous page link. Images should appear round it. Okay, let's try this. Reload full page. Then we are going to go to the post template. We're going to go to the post template **[55:27]** single posts. Add an image block inside the post template anywhere I guess. So I'm going to add here um at after image upload. **[55:59]** And here we have some images. So I can maybe this one. And it says change its style and make the image rounded. So I'm going to come here aspect ratio border and shadow. Nice. **[56:34]** Save. visit a page of the home that doesn't exist. For example, page two. So, we can come here. Is it side? **[57:12]** H2 page not phone. **[57:44]** So, it shows the no results block. Click on the previous page link. Okay. I don't know exactly how to test this API iterations for WordPress 6.9. **[58:38]** Let's continue. Okay, we can test more things. Let's continue with the Let's continue reading the de notes and then we can **[59:14]** Okay, we can close this. We can close this. We can close this. This is the the test. We can leave it for now. Um, make WordPress core interactivity API. **[59:51]** Okay, we have already reviewed this and let's focus on this. Okay, previously only the HTML of the new page was updated, keeping the styles present the initial page and ignoring any new script models. This worked for basic client side navigation cases, but it didn't handle more complex situations [music] such as when new blocks appear on the next page. Okay. With this update, WordPress now replaces stylesheets and **[60:22]** loads any script models after client side navigation. Okay. Understood. But we need an example for this and this is going to take some time. So let's go to the next thing. Support for router regions. Well, a reminder that we are going to host this event and I'm going to actually cover the interactivity API. So, next week I will **[60:55]** be working on getting some examples to to showcase this support for router regions inside interactive elements. Rooter regions are those elements marked with the data routter region directive. When the navigate action from WordPress interactivity router is invoked, [music] the content of these regions is updated to match the newly requested page. Okay. **[61:28]** In previous WordPress versions, rooter regions needed to match a root interactive [music] element. for example, one of the top most elements with a data WP interactive directive. This meant that if the data rooted region directive was used [music] anywhere else in an interactive region, its content wouldn't be updated. **[62:00]** Now root regions are updated whenever they are placed in an interactive region. The only requirement is that they must still be used alongside the data interactive directive. So they receive the corresponding name space. Okay. Support for rooted regions inside interactive elements. So let's check the example we have **[62:34]** here have the okay if we go to the render. Yeah I think this is the thing. So previously to this change. **[63:14]** So we have data interactive example. And then the deep. Um. Okay. So, we need to duplicate **[63:47]** We need to generate one top [music] data interactive but also data rooted region. So for example, if we wanted to just update this area, we would need to add these two uh keep this one here, but also copy and paste these two ones here. **[64:19]** I wonder this would work the same but here I guess that okay let's try this let's try This the good thing about this is that I can download I can download this. **[64:51]** I can open this in cursor. This is the code. And what I'm going to do is I'm going to go to a studio. **[65:22]** Going to go to studio here to the streams and I'm going to open iTerm. And for the content plugins, what I'm going to do here is to I'm going to link the plugin that right now I have in the desktop. **[66:02]** So now I have the interactivity routter in [music] the plugins. If I go to the admin and we have here this one. Now we have this block. **[66:33]** But we need to create the content to test this. The content to test this is the one we have at the blog development examples. So let's **[67:08]** Okay, here we have all the going to download this file to the desktop and then in my WordPress installation I'm going to import this content. **[67:41]** Going to import the content run importer. Choose a file desktop export. Import everything. Submit. Okay. **[68:11]** We have Harrison. We have for my car and also we have this blocks that are interactivity. Okay. And what else we're going to do? We are going to install here the dependencies for the blog **[68:45]** and also we are going to launch the start because what I want to test is the the new thing. So what I want to test [music] is that We can. So this one is fine because the state **[69:15]** variables belong to the to the Vue.js, but These attributes belong to each. Well, we can try different things. For example, let's start by trying **[69:48]** this. Let's start by trying this. We have the class. We have the data WP interactive. We have Dolby rout. And we are going to remove this here. So before 6.9, we needed to have data root region as a **[70:20]** top top element. But now we can use it from the inside. Let's see what happens here. **[71:03]** Okay, it seems it's working. Let me check if I'm getting I'm going to at console lock.js. this. Okay, so we have our new code in place. **[71:34]** And it works. And if I remove this shouldn't work. It works as well. Okay, it works. **[72:13]** It works because maybe I'm reloading the whole page. So, let me what we can do what we can do is to preserve the lock and I can also add here a time stamp. I can do something like Yeah, something like that. **[73:06]** Okay, it works but I am losing. No, it's not really working. It's not really working. Let me reinstate this and see what happens. Now go to breath. **[73:39]** No, I think it's because we need to wrap all of this into a D. So, let's do that. I need to wrap all of this. **[74:13]** I'm grabbing [music] everything this. And now my rubbed my wrapped area. It goes from **[74:44]** it goes from here to here and it includes everything. Yeah. And now it's working as before having **[75:14]** look how we are only loading the page one. We are not reloading the page because [music] the Vue.js is not being is not being reloaded [music] and how the navigation is still works having an [music] inner section for the data developer router region. So this works as expected. [music] **[75:47]** New attach to option for rout regions in WordPress 6.9 router regions accept and attach to property [music] that can be defined inside the data will be root region directive [music] allowing the region to be rendered even when it was missing on the initial page. This option supports cases like overlays **[76:17]** that are necessary for a block but [music] may appear outside all the regions. The attach to property should be a valid CSS selector that points to the parent element where the new router region should be rendered. For example, the following region would be rendered in body if it appears in a visited page even if it wasn't initially rendered. **[76:53]** I need to get examples for this. So improved get server state and get server context functions. When using the interactivity API with client side navigation, the get server state and get server context functions now properly handle the following scenarios. **[77:25]** properties that are modified on the client but should reset to server values for navigation. The get server state and get server context functions now properly handle the following scenarios properties that are modified on the client but should reset to server values or navigation. Now whenever get server state or get server context is tracking a value that doesn't change after the **[77:55]** client side navigation it will still trigger an invalidation so that it can be used to reset values get server state let's learn about this get server If we go to the block editor **[78:31]** this is documented it's server state Okay. Get server state here. Get server state allows you to subscribe to changes in the global state. Allows you to subscribe to changes in **[79:04]** the global state that occur during client side navigation. This function is allows to get server context but it works with the global state instead of the local context. The get server state function returns a read only reactive object. This means that any callbacks you have defined that watch the return object would only trigger when the value returned by the function changes. If the value remains **[79:35]** the same, the callback will not retrigger. Okay, let's consider a quiz that has multiple questions. [snorts] Let's say I actually have a quiz example in the block development examples API the quiz and here **[80:10]** so we are not using this Here let's consider a quiz that has multiple questions. Each question is each question is a separate page. Okay. When the user navigates to a new question, the server provides the new question and the time left to answer all questions because we set this from the **[80:48]** from the render PHP for example. So we have interactivity state. Maybe we can try this in our example. Okay. data interactivity routter and we can do this **[81:22]** get question for page get the ID. Okay, we need get random question. and random question. And maybe we can do here function get random question for example. **[81:57]** Okay. Um, echo. Maybe I can add here a little bit something like this. **[82:33]** Okay. And now if we go to the we come here. There has been a critical error on the website. Yeah, we have added something. Get random question. Get random question. **[83:48]** And I it's because of this. Ah, okay. Yes, this is it. Um, I'm going to Mhm. **[84:19]** So this is fine. This is fine. Going to remove this. And to remove this **[85:18]** H. And now if we reload the page now it works because we have here **[86:05]** Oh, it was fine. Okay. And if we come here, we should see **[86:51]** >> [music] >> We should see somewhere here array. This is empty because of this **[87:40]** Okay, I should have here this array. Well, this is not really array. This is a interactivity state. Interactivity state. Populates the initial global state **[88:10]** values. This is something I do here. [music] **[88:56]** Okay, let me check other examples. If we go to block development examples, we come here. add the global state for this block. Okay. **[89:31]** And it creates a JSON somewhere. If we look for this Let's script the script module. This is the actual dip. This is another area. **[90:07]** another area an image and here we are. Okay, this is the global state in the form of a JSON. If we do random question here question 33 **[90:38]** question. Okay. So this is working. Now what we wanted to test is actually Yeah. Who wants to test this? The server provides the new question **[91:08]** and the time left to answer all the questions. So we navigate to each question in our case to each bele that's fine. This call back will be triggered by a directive like Okay, we can try this. We can try this **[91:39]** and see what happens inside this region. I'm just going to do this callback update question and in the views what I'm going to do is callbacks update question but what I want to check is con server **[92:12]** get server update [music] update with the new value coming from the nice. So if I do this [music] to going to see this state question [music] **[92:42]** then here what I can do is question. Okay, this should work. **[93:40]** It's not working. Well, we put this Well, but this **[94:16]** ah okay because I need to import get server state from here. Let's start again. Let's try this. Nice. Nice. So we can update each region with values **[94:47]** that come from the server happened here. I go to S. **[95:28]** Okay. Can already declare because I'm redeclaring I can already declare a function. Okay, I understand. So, okay, I don't I don't need this. What I can do directly is this **[96:19]** It guest locked four times. Okay. One, two. Okay. This is what's expected here. Rev. **[96:53]** Nice. Okay. So, I like this example. I'm going to close this. So get server context allows you to subscribe to changes in the local context that occur during client side navigation. This function is analogous to get through state but it works with **[97:24]** the local context. The get server context function returns a returnly reactive object. Consider a quiz that has multiple questions. Each question is a separate page. When the user navigates to a new question, the server provides the new question and the time left to answer all the questions. But it provides that as local context **[97:56]** instead of global context. question get question for page blah blah blah. So for get the ID for each page we have a specific question and again we can do the same but with **[98:26]** local context. So okay, now that we understand better this improved get server state and get server context functions when user the when using the interactivity API with client side navigation. The ser the get server state and get server context functions now properly handle the following scenarios. properties that are modified on the client **[98:59]** but should reset to server values on navigation. Now whenever get server state get server context is tracking a value that doesn't change after a client side navigation it will still trigger an invalidation. So it can be used to reset bodies. **[99:46]** So we can state counter server state counter reset to to zero. The properties that only properties that only exist on certain pages server state and context are now fully overritten. Only the properties present on the current page are retained. **[100:17]** Only the properties present on the current page are retained and those from previous pages are removed. This allows having the certainty of knowing if a property doesn't exist in the [music] sever state even if it was present on the previous page. [music] Okay, we need better examples here. Additionally, this function include property definitions and error messages in the book font. **[100:54]** Okay, I think I got a better feeling of uh what these improvements are about, but I need to create better examples. So stay tuned because next Thursday we will talk about this these new things coming about the block bindings and about interactivity ABA and yeah I will work on having better examples because the ones that are in **[101:27]** the dev notes are not really really good. Okay so yeah I'm going to finish the session. Hope you all have a a great weekend and hopefully see you next Thursday on the developer hours session. If not on Friday I will connect again to to review some some more things about [music] WordPress development and blog development. Okay. So yeah have a good weekend. Bye.