Interactivity Router - CourtneyR.dev's 2nd Brain

Interactivity Router 🔗 **Source:** [Interactivity Router](https://www.youtube.com/watch?v=hlbT0fnIe8E) > [!note]+ Document Notes > tags: [interactivity-api, wordpress, javascript, router] > author: Juanma Garrido > source: YouTube > reference: https://www.youtube.com/watch?v=hlbT0fnIe8E > date created: 2024-12-19 10:30 > > # 🏷️ Title: Interactivity Router - Client-Side Navigation for WordPress >  ## 🧰 Action Inbox - [H1] Enable client-side navigation in Query Loop blocks — 6.9 feature #wordpress - [H2] Implement router regions with data-wp-router-region attribute — performance optimization #development - [H3] Use script modules instead of bundled JS for better performance — experimental-modules flag #optimization ## 🧭 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 Development Examples](https://github.com/WordPress/block-development-examples) ## 📝 Summary - WordPress 6.9 introduces client-side navigation through the Interactivity Router - Query Loop blocks can now navigate without full page reloads using router regions - Only specific DOM portions are updated, dramatically improving performance - The system works similar to React's single-page application model - Developers can build interactive blocks that maintain state across navigation ## 📖 Main Content The Interactivity Router is a package within WordPress's Interactivity API that enables client-side navigation, transforming WordPress sites into single-page application experiences. This system fetches page HTML in the background and updates only specific DOM regions marked with `data-wp-router-region`, avoiding full page reloads. The router leverages JavaScript modules for performance optimization. Instead of bundling all dependencies, it serves lightweight modules that import the Interactivity API engine dynamically. This approach reduces bundle size and enables better caching strategies. State management works across both server and client contexts. The system merges server-provided initial state with client-defined state, allowing blocks to maintain data across navigation while receiving page-specific updates through a soft-merge process. ## 🗒️ Notes #### ⏱️ [00:00](https://www.youtube.com/watch?v=hlbT0fnIe8E?t=0) — [H1] Introduction to Interactivity Router - Key idea: Router enables client-side navigation in WordPress blocks - Evidence: "Query loop block by default triggers full reload but can be set to client side navigation" #### ⏱️ [02:30](https://www.youtube.com/watch?v=hlbT0fnIe8E?t=150) — [H2] WordPress 6.9 Router Toggle - Key idea: Client-side navigation toggle now available in Query Loop advanced settings - Evidence: "This toggle was disabled because modules weren't loaded properly, fixed in 6.9" #### ⏱️ [05:15](https://www.youtube.com/watch?v=hlbT0fnIe8E?t=315) — [H3] Performance Benefits Demonstration - Key idea: Router navigation shows no new document requests in network tab - Evidence: "No full page reload anymore, fetching HTML via background requests only" #### ⏱️ [08:45](https://www.youtube.com/watch?v=hlbT0fnIe8E?t=525) — [H2] Interactive Blocks Within Router Regions - Key idea: Blocks maintain interactivity during client-side navigation - Evidence: "Lightbox behavior works within router regions using data-wp directives" #### ⏱️ [12:00](https://www.youtube.com/watch?v=hlbT0fnIe8E?t=720) — [H1] Router Region Definition - Key idea: data-wp-router-region attribute defines updateable areas - Evidence: "Only portions marked as router regions get updated during navigation" #### ⏱️ [15:30](https://www.youtube.com/watch?v=hlbT0fnIe8E?t=930) — [H3] Documentation and Examples - Key idea: Comprehensive examples available in WordPress developer resources - Evidence: "Block development examples repo has interactivity API examples with live demos" #### ⏱️ [18:20](https://www.youtube.com/watch?v=hlbT0fnIe8E?t=1100) — [H2] Quiz Application Example - Key idea: Complex interactive applications possible with router navigation - Evidence: "Quiz with timed questions maintains state across page navigation" #### ⏱️ [22:00](https://www.youtube.com/watch?v=hlbT0fnIe8E?t=1320) — [H1] Script Modules vs Bundled JavaScript - Key idea: Script modules reduce bundle size and improve performance - Evidence: "Using view-script-module instead of view-script prevents library bundling" #### ⏱️ [25:40](https://www.youtube.com/watch?v=hlbT0fnIe8E?t=1540) — [H2] Dynamic Module Loading - Key idea: Router package loads only when navigation occurs - Evidence: "actions.navigate dynamically imports interactivity router on first use" #### ⏱️ [28:15](https://www.youtube.com/watch?v=hlbT0fnIe8E?t=1695) — [H3] State vs Context Usage Guidelines - Key idea: Use context for DOM-specific data, state for cross-block communication - Evidence: "Local context affects specific DOM portions, global state enables block communication" #### ⏱️ [32:00](https://www.youtube.com/watch?v=hlbT0fnIe8E?t=1920) — [H2] Server-Client State Merging - Key idea: Soft merge preserves client state while adding server updates - Evidence: "New properties added automatically, existing values require manual handling" #### ⏱️ [35:30](https://www.youtube.com/watch?v=hlbT0fnIe8E?t=2130) — [H3] Custom Template Implementation - Key idea: Router works with custom page templates for app-like experiences - Evidence: "Created quiz homepage template without header/footer using router navigation" #### ⏱️ [40:00](https://www.youtube.com/watch?v=hlbT0fnIe8E?t=2400) — [H2] Block Attributes and Context Integration - Key idea: Block attributes provide page-specific data through context - Evidence: "Time limit attribute stored as context, changes per page navigation" #### ⏱️ [45:20](https://www.youtube.com/watch?v=hlbT0fnIe8E?t=2720) — [H3] Server Context Access Methods - Key idea: getServerContext and getServerState provide access to new page data - Evidence: "Get server context retrieves updated values without affecting client state" ## 📚 References - [WordPress Interactivity API Docs](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/) - [Block Development Examples](https://github.com/WordPress/block-development-examples) - [Juanma's GitHub Organization](https://github.com/wama-b) ## 🗣️ Paraphrase - The Interactivity Router transforms WordPress into a single-page application by updating only specific page regions instead of reloading entire pages - Script modules provide better performance than bundled JavaScript by loading dependencies independently and on-demand - State management allows data persistence across navigation while enabling page-specific updates through server-client merging ## 📰 Newsletter 🚀 **WordPress 6.9 Unlocks Single-Page Application Power** The new Interactivity Router brings client-side navigation to WordPress core! Query Loop blocks can now navigate without full page reloads, updating only specific regions for lightning-fast user experiences. **Key Benefits:** - Dramatically faster navigation (no full page reloads) - Maintains block interactivity across page changes - Reduces bandwidth and processing overhead - Creates app-like user experiences **Getting Started:** Enable the client-side navigation toggle in Query Loop block advanced settings (WordPress 6.9+). Mark regions with `data-wp-router-region` for selective updates. **For Developers:** Use `view-script-module` instead of `view-script` for better performance. The router dynamically loads only when needed, and state management works seamlessly across navigation. Resources: [Interactivity API Docs](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/), [Block Examples](https://github.com/WordPress/block-development-examples), [WP-CLI](https://wp-cli.org/) ## ✅ Action Items #### WordPress - Core: Enable interactivity router toggle in Query Loop blocks for 6.9 release - Core Performance: Document performance benefits of script modules vs bundled JS - Documentation: Add router region examples to Interactivity API guides - Training: Create lessons on client-side navigation implementation - Community: Share router examples in showcase discussions #### DevRel - Developer advocacy: Present router capabilities at WordCamps and meetups - Education: Workshop on building SPA-like experiences with WordPress - Developer experience: Improve router debugging tools and error messages - Developer marketing: Case studies showing performance improvements - Community management: Gather feedback on router implementation challenges ## 🧪 Hypotheses - Client-side navigation reduces page load times by 60-80% for content-heavy sites - Script modules improve First Contentful Paint compared to bundled JavaScript - Router regions enable complex interactive applications while maintaining SEO benefits - State management across navigation increases user engagement metrics ### 📊 Methodology - A/B testing Query Loop blocks with and without client-side navigation enabled - Performance monitoring using Core Web Vitals for router vs traditional navigation - User engagement analysis measuring time on site and bounce rates ### ❓ Questions - How does router navigation impact SEO and search engine crawling? - What are the memory usage implications of maintaining state across navigation? - Can router regions work effectively with third-party plugins and themes? ### 🔮 Future Research - Router integration with WordPress caching layers and CDNs - Accessibility implications of client-side navigation patterns - Router performance with large-scale enterprise WordPress installations ### 💡 Implications - Practice: Developers can build app-like experiences without leaving WordPress - Policy: Core team needs guidelines for router-compatible block development - Security: Client-side navigation may require new CSRF protection strategies - Education: Training needed on state management and script module optimization - Funding: Performance improvements may reduce hosting costs for high-traffic sites ### 🧠 Learning Styles Assessment Reading level estimate: Grade 12-14 (technical documentation level) #### 👀 Visual learners - Present: Code examples, network tab screenshots, DOM inspection views - Improve: Architecture diagrams showing router data flow, state merge visualization #### 🔊 Aural learners - Present: Live coding session with verbal explanations - Improve: Podcast episode breaking down router concepts, audio summaries #### 🗣️ Verbal learners - Present: Clear technical explanations, analogies to React/SPA concepts - Improve: Glossary of router terminology, comparison tables #### 🧩 Kinesthetic learners - Present: Step-by-step implementation guide, live coding demo - Improve: Interactive playground for testing router regions, hands-on exercises #### 🧠 Logical learners - Present: Performance comparisons, technical architecture explanations - Improve: Decision trees for when to use router vs traditional navigation #### 🧑‍🤝‍🧑 Social learners - Present: Community examples, showcase discussions - Improve: Router implementation workshops, peer code review sessions #### 🧘‍♀️ Solitary learners - Present: Comprehensive documentation, self-paced examples - Improve: Router implementation checklist, troubleshooting guides #### 🌿 Naturalistic learners - Present: Performance impact analogies - Improve: Router efficiency compared to traditional web patterns ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Proper heading structure in code examples - Improve: ARIA live regions for router navigation announcements #### Keyboard navigation - Present: Router maintains keyboard focus during navigation - Improve: Focus management guidelines for router regions #### Contrast and readability - Present: Code syntax highlighting with sufficient contrast - Improve: High contrast mode compatibility testing #### Text resizing and reflow - Present: Responsive code examples and demos - Improve: Router region behavior at 200% zoom verification #### Media and captions - Present: Live coding session with verbal explanations - Improve: Auto-generated captions for technical terms #### Forms and interactions - Present: Interactive block examples maintain accessibility - Improve: Router navigation doesn't break form context #### Standards reference - Router navigation should maintain WCAG 2.2 AA compliance across page transitions ### 🌍 DEIB Assessment #### Cultural breadth - Present: Technical concepts explained in clear English - Improve: Router examples from diverse global WordPress sites #### Inclusive language - Present: Avoids overly technical jargon, explains acronyms - Improve: Plain language alternatives for complex concepts #### Neurodiversity support - Present: Structured presentation with clear headings - Improve: Processing time considerations for router state changes #### Representation - Present: Focus on technical implementation over personal branding - Improve: Diverse developer perspectives on router usage #### Psychological safety - Present: Encouraging tone about exploring new features - Improve: Acknowledgment that router concepts can be complex ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Router reduces page loads therefore improves performance - Inductive strength: Examples demonstrate consistent behavior patterns - Causal reasoning: Script modules reduce bundle size leading to faster loading - Analogical strength: Router compared to React SPA navigation effectively #### Fallacies - Appeal to novelty: Newer router system assumed better without complete comparison - Hasty generalization: Limited examples may not represent all use cases #### Tone of voice - Overall tone: Educational and exploratory, appropriate for technical tutorial ### 🛡️ DARVO Analysis - Deny: No denial patterns present - Attack: No attacks on alternative approaches - Reverse victim/offender: Not applicable - Emotional cues and rhetoric: Positive, encouraging exploration of new features ## 🎯 Conclusion The Interactivity Router represents a significant advancement in WordPress's evolution toward modern web application capabilities. By enabling client-side navigation with selective DOM updates, it bridges the gap between traditional WordPress sites and single-page applications while maintaining the platform's accessibility and SEO advantages. The key practical takeaway is that developers can now create app-like user experiences within WordPress core functionality, particularly beneficial for content-heavy sites with pagination or multi-step processes. The performance improvements from script modules and selective region updates can significantly enhance user experience. Looking forward, this router foundation opens possibilities for more sophisticated interactive WordPress applications while maintaining the platform's commitment to universal web access and content management simplicity. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad Purpose: Stage CEE units that become Literature notes. Split level: H3 ### [H1] Router enables client-side navigation in WordPress > [!quote] [Interactivity Router](https://www.youtube.com/watch?v=hlbT0fnIe8E) by [[Juanma Garrido]] via [[YouTube]]. Published 2024-12-19. Accessed 2024-12-19. > "Query loop block by default triggers full reload but can be set to client side navigation" Context: WordPress 6.9 feature enabling SPA-like experiences within core blocks. [view highlight](https://www.youtube.com/watch?v=hlbT0fnIe8E#H1) #wordpress #interactivity ID:rw_router_001 ### [H2] Script modules improve performance over bundled JavaScript > [! --- ## Full Transcript [04:29] We are live. [04:32] Hello there. How you doing? [04:51] say hi in the chat if you are there. [05:00] Okay. [05:05] So [05:07] in today's session I want to talk about [05:10] the [05:12] interactivity router [05:15] which is a package that comes with the [05:18] interactivity API. [05:24] So [05:26] this package is [05:30] already enabled in some parts of the [05:38] WordPress core blocks. For example, the [05:41] query loop block. [05:44] Let me try to [05:48] the query loop block [05:52] has a toggle and the query loop block by [05:55] default it triggers a full reload of the [05:59] page. [06:08] But we can [06:12] set this block [06:15] to do a client side navigation which [06:18] means [06:21] that not the full page will be loaded [06:23] only the specific portion of the HTML [06:26] that needs to be rendered. [06:29] What's the advantage of this? The HTML [06:32] is going to be loaded, [06:36] but the amount of HTML that is going to [06:40] be processed by the browser is going to [06:43] be only a little portion of it. Let me [06:47] see if I can [06:51] configure the query loop block [06:55] to have [06:58] client side navigation. [07:01] So by default we come here. [07:07] Okay. I only have one post. [07:12] Let me create. There is this plugin [07:14] called faker [07:17] which I like a lot to create [07:24] like to create [07:26] a lot of fake post. For example, I want [07:29] maybe 20 posts or something like that. [07:35] I activate this. [07:39] Here I can select maybe [07:43] 25 [07:50] because by having several posts we can [07:54] we can check how the query loop block in [07:57] its pagination [08:00] it only loads the specific [08:03] portion of it. [08:10] Okay. So, the posts are generated. [08:15] If we go to appearance [08:20] and editor [08:26] in this template, for example, [08:30] we have a query loop block here. [08:36] If we go to the advanced [08:39] section, we can see this toggle [08:44] which is disabled because we are in 6.8 [08:51] and this is one of the new things coming [08:53] in WordPress 6.9 for the [08:58] for the interactivity routter. [09:01] The thing is that [09:04] we couldn't [09:06] disable this because by default is full [09:09] page. But if we disable this, [09:15] we can [09:18] enable client side navigation with the [09:20] query loop block. [09:23] But right now we are in WordPress 6.8. [09:28] So, let's update. I think I'm going to [09:31] lose the the posts that I have created. [09:35] But anyway, let's load 6.9. [09:43] Let's go to [09:46] Yes, I have lost. Well, it's very [09:48] quickly. [09:58] Okay, I want to install this plugin. [10:03] I want to activate this plugin [10:06] and I want to create 25 for example. [10:14] Nice. So what I want to do is [10:18] to show how the query loop [10:23] leverages the interactivity router [10:26] package. [10:29] In order to do that, I have created a [10:31] lot of posts. [10:36] And if we visit the site [10:44] and we inspect the page [10:49] and we go to network [10:52] and I filter by doc. [10:55] Every time that I go to a new page, [10:59] I'm going to get a new [11:03] doc, which means there's a full [11:07] page reload. We're getting a new [11:10] document, which means that [11:14] the whole HTML is fetched, [11:18] but also the whole HTML is processed in [11:22] the browser. [11:24] So a way to avoid [11:27] to process the whole HTML because we [11:30] don't need to process the whole HTML. We [11:33] only need in this case this area. [11:36] We don't need to process the header [11:38] again. We don't need to process all this [11:41] footer. We just need to [11:44] update this specific portion. [11:51] One way to do that is to enable client [11:54] side navigation and the interactivity [11:56] API allows that. And the query loop [11:59] block [12:05] allows us to do that [12:07] with a toggle [12:12] that can be [12:16] disabled by default. The quil loop block [12:19] uses like full page. [12:28] So if we go [12:33] edit side [12:36] here we are editing this template. [12:41] If we go here to query loop [12:47] and we go to advanced now because we are [12:50] in WordPress 6.9 we should have this. [12:54] This is related to one of the [12:59] updates coming in WordPress 6.9 for the [13:03] interactivity router. [13:07] The specific update that is related to [13:11] this is this one. [13:15] The thing is that it was disabled [13:17] because when [13:20] there was a navigation to a page that [13:22] had some block [13:27] that require to load the script modules [13:31] that those blocks didn't work because [13:33] those modules those modules weren't [13:36] loaded. This has been fixed in WordPress [13:40] 6.9 and [13:43] this fix has allowed [13:46] this feature to [13:50] to be enabled. I mean now we can disable [13:53] this. We can save. [13:58] And when we navigate through pages using [14:02] the query loop block, we will see how [14:07] there's no full page reload anymore. [14:12] So let's check that. [14:20] If we inspect the page and we go to [14:23] network, [14:27] maybe what I can do is to [14:33] select less elements per page. [14:37] This is something that I can set here in [14:39] custom. [14:41] H maybe I don't know three per page. [14:52] Okay, with these elements per page [15:00] and if I inspect [15:04] and we go to network and we filter by [15:08] doc [15:14] and we select next page. We can see how [15:19] there's no [15:21] a new document [15:26] loaded directly from the browser. [15:31] But what we are doing is retrieving [15:37] those [15:39] pages, the HTML of those pages. We are [15:45] getting them [15:48] by using a fetch in the background. [15:51] We can see we click another one. [15:55] We can see we are doing this. So the [15:58] HTML is here [16:02] and what the interactivity router and [16:05] interactivity API is doing [16:08] is [16:09] getting the HTML [16:12] comparing with the current HM HTML [16:16] and just [16:20] update the difference in that section [16:24] that is defined as uh [16:27] routter region I think is the the right [16:29] name. Okay. So this is more or less the [16:32] idea of [16:34] the [16:38] interactivity router. Another thing that [16:41] we can do here is [16:45] for example, let me go to [16:50] the post one. [17:00] If I edit this post [17:11] And for example, I'm going to add here [17:14] an image. [17:20] For example, this one. [17:23] And what I'm going to do is alert on [17:27] click. [17:30] because this [17:32] behavior [17:34] is powered by the interactivity EBA. [17:39] So what I want to prove is [17:45] this thing that [17:48] when inside of [17:51] router navigation, no interactivity [17:54] router navigation or client navigation [17:58] through the different regions. [18:01] The blocks that are inside those regions [18:05] can be interactive as well. [18:13] Okay. If I save [18:23] If I save [18:40] Okay. [18:41] So we have saved this post where we have [18:45] added an image and that image now have [18:48] lightbox behavior. [18:57] So now if we go to the [19:03] query loop, [19:10] we can see how inside the query loop we [19:14] can have this behavior working. And this [19:17] is working. [19:24] As you can see, it has some directives [19:28] here that will be onload and blah blah. [19:31] And there's also an [19:37] attached to somewhere. [19:45] Let me see. [19:51] Touch to [19:56] here. [19:58] Data region rout. [20:10] So the thing the thing that happened [20:12] here [20:15] How are you? [20:21] I'm talking here about the interactivity [20:24] router. All good. Good to know. [20:29] Are you familiar with the interactivity [20:31] routter? I've been working with um [20:36] that this week a lot. I've been [20:38] reviewing the documentation [20:41] and I feel much more comfortable with it [20:45] now. Yeah. So yeah, the thing about the [20:48] interactivity routter is that [20:53] it's actually applied in some parts of [20:57] WordPress core. I was just explaining [20:59] that [21:01] in the query loop for example is [21:03] implemented and it allow us to it allows [21:07] us to [21:10] do navigation [21:14] as an [21:17] single page application. You know the [21:19] concept of this single page application [21:21] where the navigation is controlled by [21:24] the client. So we can do something like [21:26] that now with the interactivity router. [21:30] I have here an a really cool example. [21:33] Let me see if I can find it. [21:39] This is a very simple. [21:43] This is something that I have borrowed [21:45] from from Luis which is the [21:51] mastermind behind um [21:56] the interactivity API [22:01] and this is a [22:05] implementation of the [22:10] interactivity routter and interactivity [22:13] AP. PI [22:17] in raw HTML. I mean we can really these [22:20] are [22:22] MPN components that we can use in in [22:26] different environments because they [22:29] encapsulate some logic and some APIs [22:31] that can be used even outside of [22:34] WordPress. [22:35] The good thing about these packages is [22:37] that they are [22:40] they have been implemented [22:43] with the mindset of WordPress blocks and [22:46] the on the block paradigms. So they are [22:49] fully compatible with how blocks work, [22:53] but they can also be used outside the [22:56] WordPress installation. And this is [22:59] interesting if we want just to very [23:01] quickly test [23:05] these packages and the API they provide. [23:10] For example, here [23:16] we have a a little app [23:21] that uses some directives of the [23:24] interact 3D API but also some regions. [23:29] I'm going to create here a scaly draw. [23:33] I have a started here one. [23:36] So this is the idea of the interactivity [23:40] router. We have here [23:43] um [23:46] page A, [23:50] we have page B [23:55] and we have page C. and they are almost [23:59] the same [24:02] but there are some regions that I want [24:04] to [24:07] update. So here [24:25] something like this. something like this [24:29] and something like this. [24:34] So we have three pages and the [24:40] usual thing we would do [24:45] is there any repo with um [24:50] okay so mag is asking if there is any [24:53] repo with examples of the interact with [24:55] the API [24:57] because he wants to see examples and [25:00] ideas of blocks. Okay. Um yes there are [25:05] let's start from the documentation which [25:08] is the uh which is the best place to [25:12] start. If you go to the [25:17] if you go to developer.workwordpress.org [25:19] you can find here different handbooks. [25:21] There is one about the block editor and [25:24] here in the block editor there's [25:28] the documentation about interactivity [25:30] API. So here in the interactivity API [25:35] section I'm going to share a link in the [25:40] chat [25:44] at the end you can see here docs and [25:46] examples and here you have some examples [25:49] some really good examples [25:56] for example [25:59] there's a showcase discussions which is [26:02] really interesting because people have [26:04] been [26:06] publishing here the different [26:08] applications of the interactivity API. [26:11] So these are here you can find a lot of [26:14] ideas [26:18] and another good resource is the block [26:22] development examples [26:26] which is this compilation of examples [26:32] using the APIs provided by WordPress for [26:36] blog development. [26:40] I'm the main maintainer of this repo. [26:42] So, I created this little app. I'm going [26:46] to also share this in the chat. [26:53] And the good thing is that you can very [26:56] quickly [26:59] find the examples you want by [27:03] selecting the right tax. For example, [27:04] there is attack for the interactivity [27:07] API and here you have a few examples [27:11] and the good thing about this app is [27:13] that this page can be shared. [27:18] So yeah, there are some examples here [27:22] and for each example [27:30] you have a live demo and you have the [27:34] zip so you can download directly. [27:37] This this each example is a plug-in. So [27:40] you can just throw this folder [27:44] into the plugins folder of your [27:46] WordPress installation [27:48] and you can just uh try the behavior. [27:54] For example, this one [27:58] interactivity API quiz block. You can [28:00] see here the code [28:03] and you can see here the live [28:06] um [28:07] live demo of that plug-in. [28:10] For example, this is a a an [28:13] implementation of a quiz [28:16] singer of Leeppell was [28:19] a plant. Yes, I'm a Leepperin fan. So, [28:24] Revolver was of the of the Beatles. [28:31] Yes, [28:36] as you can see only when I'm controlling [28:38] this on the on the client only when I [28:41] have answered all the questions I can [28:43] check my answers. So [28:47] um okay [28:52] I know the answer because I wrote the [28:53] the questions. H but now we can check [28:57] the answers. Okay and we can reset and [28:59] then we can say single was uh whatever [29:04] uh yes and whatever [29:09] and we have only one correct [29:12] we can. So yeah, this is an [29:14] implementation and here in the code you [29:17] can see how the there are two blocks [29:21] actually one for each question and [29:24] another one [29:27] controlling the other blocks. [29:30] And here in the viewjs [29:33] we can see how we have different stores [29:36] and different actions. [29:44] And for the other one we have [29:51] okay this is the this is the main one [29:54] and this is each question and for each [29:56] question [29:58] we also have [30:01] its own set of action actions its own [30:05] set of state properties and so on. [30:09] So yeah we can we can play and we can [30:11] connect [30:14] the different um [30:18] different blocks. One interesting thing [30:20] is that [30:24] with project store [30:27] FA [30:35] with play store FA. One interesting [30:38] thing is that these two blocks they [30:40] share a specific name space. So [30:44] when [30:45] I define two different blocks that share [30:48] a name space, I can share information. [30:50] So I can do things in one block and I [30:53] can make the other block to react to [30:56] that to that change. So that's really [30:57] cool. [31:00] I think the most complex thing. Okay, so [31:03] Maggot is asking um I think the most [31:05] complex things right now is to [31:07] understand when to use the state, when [31:10] to use the context. But I but he's he's [31:13] getting the thing. Yeah. [31:16] Yeah. There are also in the [31:19] documentation some guides and for [31:22] example here [31:24] it's a really good article about [31:28] each concept. [31:31] um [31:36] that I think um [31:41] yeah it provides some guidance uh in [31:44] that sense. [31:46] the [31:48] my [31:50] the way I see it right now is that [31:54] the local context [31:57] or the the local context makes sense [32:00] when the information is only relevant to [32:02] a specific portion of the DOM and that [32:05] can be very small. It can be a div, it [32:07] can be a ul. Um, it's a way to [32:16] to isolate one portion of code only to [32:21] affect a specific uh portion of the DOM. [32:28] The global state makes sense when the [32:36] information the state [32:40] variables [32:42] the [32:45] all that information that I want to [32:46] store and manage and modify. [32:50] I wanted to affect different portions of [32:54] the DOM inside a bigger inside the the [32:58] inside the block inside the HTML that is [33:02] managed by the block. In that case, I [33:06] think the global state is interesting. [33:10] It's true that we could also use like a [33:13] context on the top level, but in that [33:15] case, um, you can decide. The [33:18] interesting thing about the global state [33:21] is that you can share the information of [33:24] the global state with other blocks. And [33:26] that's where things get interesting. [33:30] If you define local context, I don't [33:33] think let me check that [33:40] I don't think you can access from the [33:42] outside to that information but with the [33:44] global estate you can access that [33:46] information [33:47] from other blocks and [33:54] there's this demo of this deb [34:00] that showcase what is saying here. For [34:03] example, here's a a block and here's [34:05] another block. [34:08] They both share a name space. But when I [34:12] So this allows me to implement this type [34:16] of effects. When I click here, this [34:20] block reacts to the [34:24] state variable that is in the name space [34:26] that is shared by both blocks. So maybe [34:31] the data has been defined here. But as [34:35] this block is also defined [34:39] as part of the same name space, they can [34:41] share information and they can share [34:44] actions and they can share callbacks and [34:46] they can share everything. [34:49] So yeah, this is an example and as you [34:51] can see it works all the time [34:55] with all the blocks. [35:00] This is a really good example of of [35:02] that. [35:06] Okay, where was I? I think I have [35:09] deviated a lot. [35:12] Yeah, examples. [35:15] There's also an example for [35:17] interactivity router [35:22] which is this one. [35:31] I don't think it's the best example in [35:34] the world. I have a better one now. But [35:37] yeah, it's an example of an [35:39] implementation. The idea here is that we [35:42] can [35:44] I have four posts created and I can [35:46] navigate through the content of each [35:48] post without doing a full [35:54] reload of the page. [35:58] For example, when I click next, [36:04] this part [36:07] doesn't change and I get [36:11] the new content. And you can see here [36:14] the specific attributes of the new block [36:17] that is being loaded and the [36:21] URL that is being loaded here. [36:26] So yeah, this is an example of using the [36:28] interactivity router. I have a better [36:31] example now. Let me just show you that [36:34] very quickly. [36:47] I'm still working off on it. [36:53] But if I go here to quiz. Okay. [37:02] The idea [37:03] I think this is a a better use case of [37:05] using the [37:08] interactivity router. [37:10] Right now I have five posts. [37:20] I have quiz and I have question one, [37:22] question two, question three, question [37:23] four. [37:25] They are all built over a [37:29] block. [37:31] So the information here [37:34] is [37:36] inside a block and also this block has [37:40] an interactive block. [37:43] So I can go here and this is uh this is [37:47] a block [37:50] that uses the interactivity API. Well, [37:53] the idea is that I can go to [37:59] a page. Maybe this could make sense not [38:02] as a post but as a page and then each [38:05] question is a custom post type and they [38:08] all share the same template. Something [38:10] like that. I think it's the the best use [38:12] case for this. So you can have even just [38:15] a landing page. I I may do that. You can [38:18] have just a landing page without any [38:20] other type of navigation and you just [38:22] enter directly into this quiz. [38:26] And right now I'm randomly selecting [38:29] questions. [38:32] And when I start [38:35] each question has a time remaining [38:38] and I cannot navigate [38:42] I cannot navigate anymore to this [38:45] question and I have 10 seconds [38:49] right now. I don't have a way to provide [38:52] an answer. I just want to test the [38:57] interactivity router and the navigation. [39:02] But yeah, this is working fine. [39:07] And we can see [39:11] here [39:15] if we go reset quiz well I can share the [39:22] repository where I have this [39:25] which is in [39:30] by the way [39:32] if you are interested in following what [39:36] I'm doing lately I have implemented this [39:40] thing in my [39:43] GitHub profile [39:49] which actually I have like different [39:51] GitHub profiles because [39:54] my GitHub username is actually [39:59] one my guitar [40:03] but I have different organizations to [40:05] organize is the different areas um I've [40:10] been working during my career. [40:15] So when I started focusing more on [40:17] WordPress, [40:20] I created this Jamavp [40:24] organization and here's where I do most [40:27] of my work. Okay. So in this [40:29] organization I have a landing page that [40:33] shares the activity I have had lately. [40:40] For example, I automatically share here [40:43] the latest posts that I publish. I have [40:48] here my feature projects which are like [40:51] the [40:53] yeah the most interesting projects that [40:56] I have and [40:59] and you can see the activity I do on [41:01] them but also I share here the [41:07] repositories that I have created lately. [41:10] So here you can see [41:14] the repository with the project I'm [41:17] showing you. I going to share this in [41:21] the chat as well [41:29] and also some [41:32] repositories that I start and also some [41:36] guests that I have. [41:39] For example, this is a G that I use a [41:42] lot. [41:46] This is a a way a very quick way to [41:48] detect [41:52] to check if the custom blocks that I [41:56] have defined are properly registered. If [41:59] I in this, [42:03] if I go to the block editor, I need to [42:05] be in the block editor, [42:08] which means I need to have access to the [42:11] doll BP global window. I can just launch [42:14] this and this tells me the custom blocks [42:19] that it so it goes through the list of [42:23] all registered blocks and excludes from [42:27] that [42:29] array of objects. It excludes the core [42:32] blocks. So it just returns the custom [42:36] blocks. So this is a pretty useful [42:40] snippet that I [42:43] use from time to time. [42:48] So yeah, I was [42:50] sharing this because I wanted [42:54] to share this repository with this [42:56] example, but also if you want to [42:59] to check some other things I've been [43:01] working on lately, you can directly go [43:03] to github.com/wama-b. [43:09] Perfect. [43:11] Let's continue. [43:17] with this demo. If I go to rest quiz um [43:24] we can see here in the console [43:27] in the elements. [43:34] So this is [43:36] when we navigate through different [43:40] pages. I have here defined a [43:43] interactivity routter region quiz. So [43:46] this is the portion that is going to be [43:48] updated whenever I navigate. As you can [43:51] see if I go to question one [43:55] you can see how things here have been [43:59] highlighted which means that only this [44:02] portion of the DOM has been [44:05] processed and updated. So this is the [44:07] interesting thing. The whole page hasn't [44:10] changed. [44:12] And the only [44:14] portion of HTML that has been updated in [44:17] the browser is this uh new elements. So [44:21] there's a div happening and the new [44:23] parts inside this section are the ones [44:27] that are updated. [44:30] Okay. [44:32] Okay. Let me close [44:36] conversations [44:38] because I'm just uh jumping from one [44:41] thing to another. [44:43] But that's fine. This is just sharing [44:46] the stuff out loud. [44:51] Um okay, I have shared the samples. [44:55] I have shared this. I have shared this [44:58] and we were checking the documentation [45:02] about the [45:05] global state local context and derived [45:08] state [45:10] and I was here. [45:15] When we navigate through pages, [45:23] we usually do that by clicking links and [45:26] that provokes a full [45:31] page reload. But the [45:39] the activity API router, if we go to the [45:42] documentation, which is this one, [45:54] the interactivity API routter provides [45:58] two [45:59] methods, two actions. One of the actions [46:02] is navigate. [46:04] And the navigate [46:10] method what it does is it fetches the [46:15] page HTML [46:19] and updates any interactive regions [46:22] whose contents have changed in the new [46:24] page. [46:28] So if I navigate using normal navigation [46:30] the whole [46:32] content is updated. But if I if I use [46:42] navigate [46:52] from the interactivity routt [47:00] Put that. [47:31] Then what happens is [47:38] the following. I fetch [47:42] the HTML [47:45] of the new page. [48:01] Um, what I can do this? Okay, I'm going [48:04] to do this. [48:08] Do this [48:10] full full um full. [48:17] Okay, [48:19] then [48:31] one. [48:42] Nice. [48:51] So I have this [48:54] going to group [49:04] to create like different steps. [49:16] We fetch the HTML of the new page. Then [49:21] we [49:33] um get the [49:41] the region. How is this called? Uh this [49:46] we get [49:49] extract [49:53] extract the [49:55] region [50:03] and [50:20] Update in the DOM [50:24] only [50:26] the new [50:29] the new parts [50:33] in [50:35] the [50:37] under the [50:40] in the [50:43] in the R region. [50:48] This is um the part of the interactivity [50:52] API [50:55] that leverages React. [51:12] So I'm going to say here [51:16] react. [51:37] Mhm. [51:40] React is like a React. So this is more [51:43] or less what a React application is [51:45] doing. [51:49] And every time I go to a new page using [51:52] navigate, this is what's uh going on. [51:56] So there's no a full page reload. only [52:00] the HTML is fetched via [52:05] a fetch in the background and only not [52:08] all the HTML is updated in the browser [52:13] only a specific portions. [52:15] How do we define those portions? By [52:18] using the data lip routter region. [52:26] So if we go to the application [52:53] see if I can show [53:00] Yeah, this is the code. [53:17] This is the code. [53:22] Um [53:25] This is the code that I have and the [53:28] demo is [53:32] here. [53:47] Okay, this is the [53:54] And here what I have is a a block using [53:58] interactivity API. [54:03] To define a block with the interactivity [54:05] API, we need to mark the block as [54:10] supports interactivity true. [54:39] This is one of the requirements supports [54:41] interactivity true. [54:47] Then we need to create [54:51] another thing is in the block.json JSON [54:53] we need to define a view script module. [55:00] This will make that in the build process [55:03] the [55:05] bundle [55:07] will be prepared to be loaded as a [55:10] module in the in the client in the [55:12] browser. [55:16] Which means that [55:19] if I go here [55:29] for example the BUJS imports the [55:35] WordPress interactivity [55:39] package [55:42] if I don't [55:47] use the experimental modules flag. [55:51] What happens in the build process when I [55:53] do WB scripts build [55:59] is that this library gets bundled with [56:02] the final [56:05] JavaScript [56:06] which means that the JavaScript is going [56:08] to be bigger. [56:12] When we use the experimental modules, [56:15] what we do is [56:22] we serve this [56:25] JavaScript as a JavaScript module in the [56:29] browser. The browsers can manage [56:31] directly modules. [56:34] So in the bundle [56:37] this [56:40] library is not going to be bundled in [56:43] the final JavaScript. So the Vue.js is [56:46] going to be lighter. So it's going to [56:50] have less size. We can see here [56:57] the Vue.js JS. It basically only [57:01] contains um [57:06] our code. [57:11] Yeah, it doesn't [57:14] it doesn't contain anything else. And we [57:17] can see here that we have an import [57:20] that is going to be managed directly by [57:23] the browser. So [57:26] when we serve JavaScript modules [57:30] and the blocks [57:34] provides different ways to do that [57:39] very easily. [57:42] So what do we need to do to serve a BUJS [57:46] in a block as a module? The only thing [57:48] we need to do is to [57:51] define this view. JS as a view script [57:55] module. And [57:58] when we do the build, we just [58:03] add the flag experimental modules. When [58:06] we do that, any import that we [58:12] use in the Vue.js s is going to be [58:15] imported directly in the browser. [58:20] So let's check that. If we go to the [58:24] demo [58:26] when I load, [58:29] let's see [58:32] network. [58:37] Let's go to quiz. [58:43] Okay, we can see how [58:56] we can see how the [58:59] interactivity API [59:02] engine is loaded independently. It's [59:05] loaded before because there is a preload [59:08] of the code. If we go to sources, no, if [59:12] we go to elements, [59:15] we can see here that the [59:20] direct [59:21] GBT [59:29] API [59:35] reload. [59:38] Yeah, we can see here how there's a [59:40] module preload which means that is [59:43] loaded [59:45] independently but it's loaded [59:48] just when the page starts loading and [59:52] then WordPress at some point WordPress [59:55] at some point it does the NQ script. So [59:59] that's where the [60:04] that's where the [60:10] let me see [60:16] this is the one of the [60:21] block library I guess maybe it's the [60:23] navigation [60:24] then we have the interactivity router [60:31] Wait. [60:41] Uh, why can't it see [60:44] address? I'm going to [60:47] address. What else? [60:51] Type script. [60:56] Yeah, this is the one of our plug-in [61:00] and the interactivity API. [61:04] So I have those packages loaded and then [61:08] also the [61:10] the navigation navigation it loads [61:14] also like its own [61:17] module. [61:19] So here's the views of our plug-in. And [61:23] one of the cool thing [61:26] One of the cool things of JS modules is [61:29] that I can [61:31] I can load. So in this case, let me see [61:35] if we can we can have here a diagram. So [61:39] we have the [61:43] inter the activity interactivity [61:50] API [61:52] JS module [61:56] module [62:01] um [62:03] which is basically the [62:06] activity API engine the JavaScript that [62:10] contains all the logic behind the [62:12] interactivity API. This is a module. [62:16] This is um pre preloaded [62:21] when the page [62:23] uh starts [62:26] uh starts [62:28] being loaded [62:31] in the browser. [62:36] The page starts being loaded in the [62:39] proofs. [62:46] Okay, [62:49] this is um [62:57] one [62:59] model. [63:01] Then we have the [63:09] the Vue.js [63:15] the Vue.js file of our block of our [63:20] custom block. [63:30] This [63:32] Vue.js has import. [63:39] It has this [63:42] import [63:44] blah blah blah. [63:54] It has this import blah blah blah. [63:58] So whenever [64:01] this happens, [64:12] it [64:14] automatically imports [64:18] the [64:21] JS model because it's already in the [64:23] browser. It has been it has been loaded. [64:28] has been preloaded. [64:38] But then at some point the code it [64:44] does this [64:47] which is really cool because when we [64:56] trigger the navigation [64:59] and what's happening here in the code is [65:02] that at some point in the on click [65:07] in the on click we do navigate. So this [65:11] is the navigation [65:15] managed by the interactivity API router. [65:18] This is when we are enabling this type [65:21] of navigation. [65:24] So what's happening is when we do on [65:28] click [65:30] here [65:34] we are dynamically loading the package [65:37] that [65:40] contains the logic of the interactivity [65:42] router which is also super performant. [65:49] And we have this [66:07] We have this [66:12] and this [66:14] it [66:17] going to [66:19] provoke the loading. in of another [66:23] package [66:30] but only [66:34] only when there's a click in that [66:37] element. [66:39] So as you can see all the [66:43] APIs and all the workflows that are [66:48] encouraged by the interactivity API and [66:54] working in the background [66:58] are very performant. They are thought [67:00] with performance in mind like uh making [67:04] the [67:07] requests and the process of HTML in the [67:12] most effective way. [67:17] Okay. Nice. [67:22] So [67:24] when I do click and in our example we [67:29] were doing that here. [67:31] When I click on any of these elements [67:40] and I can see this in the code here. [67:48] I have a random selection of URLs [67:54] that I am [67:58] adding to the state. [68:02] I'm doing that here. random question [68:05] slacks [68:08] and using these directives I'm [68:12] creating a loop and for each value I'm [68:15] creating a link [68:21] the text is managed by a state variable [68:24] this is actually a derived state because [68:27] item slack if I go [68:30] here item slack as you can see this is [68:33] derived state [68:35] which means that I am getting the [68:37] context and for each item in the context [68:40] I'm doing something to generate the [68:43] final text. [68:48] Okay, but the interesting thing is this [68:51] actions navigate because every time I [68:54] click on these links I'm not going to do [68:57] a full page reload. I'm going to do a [68:59] client side navigation [69:02] because actions navigate here [69:07] is this. [69:11] So what I'm doing here is I'm accessing [69:14] the DOM element that [69:18] triggered this method. [69:24] I'm preventing the default. So the [69:29] default event in the browser doesn't get [69:32] triggered is if I do if I don't do this [69:37] I will [69:39] get a full page reload. So I need to do [69:42] this to stop any behavior [69:47] in the browser because it's like saying [69:49] it's like saying hey don't do anything [69:51] else. I'm going to take control of [69:52] things from now on. So what I'm doing is [69:56] I dynamically import the [70:02] interactivity router and then I navigate [70:05] using the [70:09] actions uh navigate [70:13] from the interactivity router. This is [70:16] something that is documented here. If we [70:19] go to the documentation, [70:22] we can see how the package interactivity [70:25] API exposes two methods. The navigate [70:29] method and the prefetch method. [70:39] And the navigate method what it does is [70:42] uh this is it fetches the HTML of the [70:45] new page. [70:47] It extracts the specific router region [70:50] and it updates the [70:57] the portion of the DOM that has been [70:59] updated. [71:01] Nice. [71:08] What else we can show from this demo? [71:12] Okay, another interesting idea behind [71:15] this um [71:18] is the concept of [71:23] a state in the client and a state in the [71:26] server [71:28] because with the interactivity API [71:33] we can define a state in the client. For [71:36] example, here [71:41] I have these props that are defined in [71:45] the state. [71:47] We have a name space which is [71:49] interactivity router region quiz [71:53] and under this name space I can define [71:57] state variables. I can define actions [71:59] call backs [72:03] and here I'm defining these props [72:07] visited question slacks current timer [72:10] page [72:12] this is something that I'm defining in [72:14] the client [72:17] but when the page is loaded I'm also [72:20] passing some initial values from the [72:24] server [72:28] And what's happening here is that [72:34] for every page [72:45] I'm going to put this [73:10] This is the client. [73:20] This is the client [73:25] and this is the server. [73:49] Let me choose this. This is the server [73:54] to be blue. This is going to be green. [73:57] Okay. [74:02] So for the same name space let's call it [74:05] a name space [74:10] a [74:14] or the same name space [74:24] I have um state [74:35] Let me adjust this a little bit. Going [74:39] to put this here. [74:41] Okay. So, this is a state [74:44] or name space [74:48] opposite. This is going to be the name [74:50] space [74:53] and the state is this. [75:00] So we have defined a state in the [75:07] in the server [75:12] and and [75:18] the client. [75:21] So when [75:26] when the page is loaded, I have some [75:28] initial [75:31] values coming from the server [75:34] which is [75:37] what I define with the WP interactivity [75:40] state. This allows me to define some [75:44] initial values from the server [75:47] and then when the JavaScript is loaded, [75:50] I can also define some values in the [75:53] client like for example this. What's [75:56] happening here is that there is a merge [76:01] happening. [76:09] There is a merge happening. [76:15] And what I got here is [76:30] whatever came from the [76:35] Whatever came from the server [76:38] plus whatever was defined in the client. [76:47] Going to express this [76:50] a bit better. [77:07] Mhm. [77:15] I'm going to [77:17] express this a bit better. [77:23] Um, [77:28] put this [77:30] like this and [77:33] this. [77:41] Yeah, I think this is better. [77:51] Something like this is better. [77:54] A bit more clear. [78:03] So we have some initial state in the [78:06] server. Then we have some initial state [78:09] in the client. And we merge both. And in [78:12] the client I finally have the [78:17] two [78:19] um [78:22] the merge of the two states. [78:25] But what happens when we do this [78:28] navigation? [78:32] I can have something similar. [78:42] So I can have here [79:02] I can have here [79:10] some name space. [79:20] That is the result of [79:24] is the result of [79:27] this [79:31] if the result of [79:35] okay let me put this here and I'm going [79:38] to put this here [79:43] so we have in page [79:45] A a state in the client that is result [79:48] of [79:50] the initial state defined in the server [79:56] with this function plus the initial [80:00] state defined in the client [80:04] here. [80:21] Okay. [80:45] Mhm. [81:00] So, what happens when we navigate to a [81:03] new page [81:07] that has [81:10] a new state [81:30] It has a new state. [81:49] because now we have um [81:54] two different states [81:57] and we don't want to automatically [82:00] merge this because maybe we want to [82:04] maybe use the [82:08] val we are [82:13] managing through the whole navigation. [82:15] For example, in the quiz, I may want to, [82:20] I don't know, keep track of the [82:25] keep track of the different [82:29] responses of the the the yes or nos or I [82:33] don't know. [82:37] For example, um [82:42] in this example, [82:45] the initial [82:49] page. [82:51] Yeah, [82:53] you can see how the first time the page [82:55] is loaded, the [82:58] state server and the state in the client [83:00] is the same. [83:04] Well, in other words, the properties and [83:09] the values that we have in the server [83:12] match the ones we have in the client [83:14] because there is a merge of the [83:16] properties that we have defined for the [83:19] server [83:21] which represents this [83:27] with the properties we have defined in [83:30] the client. We sends this and in the [83:34] code this is the properties that we have [83:36] defined the client [83:39] and this is [83:41] but what happens if navigate to a new [83:44] page I have the [83:49] global state in the client but I do [83:52] something like this for a specific pages [83:56] I want to add some information maybe I [83:59] want to add some new fields [84:01] or maybe I want to initialize some data [84:05] for a specific [84:08] URLs. [84:10] So in that situation I have a new state [84:14] in the server [84:17] defined for that page and then I have [84:20] still some value in the client. [84:26] What what's happening in this case? This [84:29] is explaining the documentation [84:34] somewhere. [84:38] If we go to API reference, I think it's [84:50] um okay, I think it's better explained [84:54] here. [85:14] Let me [85:16] have a look at again here. Store client [85:19] methods. [85:39] I think maybe it's in the interactivity [85:42] router. [85:45] Interactivity [85:50] router. If we go to the package [85:55] to the interactivity routter [85:58] package. [86:08] No, this is not explained. This is [86:09] something that [86:11] um needs to be added to the [86:14] documentation. So what's happening right [86:16] now is that there is um [86:22] soft merge happening right now. [86:35] There is a soft merge happening right [86:37] now. [86:50] which means [86:53] that new properties will be added [86:56] directly to the [86:59] global state in the client but new [87:03] values for existing properties [87:07] will not be merged. So we will have for [87:11] the same properties we will have one [87:14] value in the server and another value in [87:18] the client. [87:20] So how do we [87:23] access the [87:25] values coming from the state? So that's [87:30] why we have these methods available [87:34] which are get server [87:39] context, get server state. In this case [87:42] it would be get server state. [87:50] Get server state. [87:53] Get server state. [88:01] We get server state. I can access [88:10] I can access this [88:23] and I can decide what to do. [88:27] with these [88:29] values. [88:31] So get server state retrieves the server [88:33] state in an interactive region. This [88:36] function serves the same purpose as get [88:40] server context. We have a similar [88:43] function for the context [88:47] but it returns the state. [88:50] The object returned is read only and [88:53] includes the state defined in PHP with [88:56] WBP interactivity state [89:00] which is this case. [89:02] We have a default [89:05] state defined in the server. But for a [89:08] specific [89:10] URLs I have some [89:13] modified values. For example, extra data [89:18] is [89:23] different from the server for each URL. [89:27] But then I have new fields happening [89:30] here. [89:34] So when using actions navigate the [89:37] object returned by get server state is [89:39] updated to reflect the changes [89:45] in its properties [89:48] without affecting the state returned by [89:50] star [89:52] and we can subscribe to those changes to [89:55] update the state if needed. [90:02] So if we start the navigation here [90:08] the first time we can see how the state [90:10] that comes from the server [90:14] is completely merged with the properties [90:19] that and the values we have defined for [90:21] the state in the client. [90:25] So we can make a difference between the [90:27] state server and a state. But at the end [90:29] that we can directly work with this. [90:35] But then we go to question one [90:40] and we can see for example [90:43] how the extra data property it has a [90:48] different value than the one stored in [90:53] the client state in the client global [90:55] state. So here's where this function [91:01] comes handy. this one get server state [91:05] because with get server state we can [91:07] access the new values and decide what to [91:11] do with them. Maybe I want to update [91:14] this property with the new value or [91:16] maybe I don't but I can decide to do [91:18] that manually. [91:22] In the case of the new fields they are [91:25] automatically added to the state because [91:28] they are not affecting anything. [91:32] So [91:35] this this is how it works. [91:40] This [91:48] um [91:55] Okay, I'm going to put this here. [92:04] Okay, nice. So, let's work a little bit [92:06] on this uh project. [92:23] Let's go through the logic. [92:26] For example, one thing that I want to [92:28] solve, [92:33] maybe I want to create [92:40] I want to create a template. [92:48] Let me see if I'm able to create a [92:50] template custom template. [92:53] So if we go to [92:57] the editor [93:02] and we go to templates [93:04] right now we are using the single post. [93:17] So what I want to do is to [93:31] okay one maybe I'm not stealing [93:33] WordPress 6.9. [93:43] Yes I'm in WordPress 6.9. [93:46] Okay. So, I thought there was a way to [93:52] duplicate templates. [93:56] Edit [93:59] single posts. [94:07] Can I create? [94:14] Okay, let me see. [94:17] If I go to the post [94:20] to the quiz post [94:24] the template is single post. Um [94:32] create new template [94:35] uh custom [94:37] with template. [94:42] Okay. [94:47] Group content. [94:54] Mhm. [94:58] Okay. I'm going to try just this to see [95:01] what happens. This is the [95:04] custom quiz template. [95:17] And I want to create a page [95:21] that I'm going to call [95:26] with [95:29] contest. [95:33] And this page I wanted to use [95:38] the custom quiz template. [95:47] Okay. [95:49] And [95:51] if I go to the page, I have [95:55] nothing [95:57] because [96:00] I need to edit the page. [96:03] And I'm going to edit the page [96:07] with the content of the quiz. [96:17] So I'm going to copy this [96:21] and I'm going to go to the page [96:25] with contest. [96:32] And I'm going to put this here. [96:39] So whenever I go to the page, I have [96:41] this. [96:44] So no WordPress, no header, no footer. [96:48] The thing is that if I go here, let's [96:51] see what happens. I think it's not going [96:54] to work well, but [96:59] okay. It worked well. [97:02] Nice. [97:07] Then have this here. [97:17] And if I [97:21] go to quiz context, [97:26] maybe I can just uh in the dashboard [97:34] in the settings general. [97:43] Um, [97:46] how do I define [97:51] in the [97:53] site editor that I want [97:56] this page as a front page? [98:01] It should be somewhere here. Customize [98:09] homepage settings. [98:12] static page [98:15] with context [98:18] publish. [98:23] Nice. So whenever I go here [98:27] I'm going to log out. [98:39] Whenever I go to the homepage, I have [98:42] this application. I have can go to [98:45] question two. [98:56] I go to question three [99:05] and I can reset the quiz. [99:11] Nice. I like that. It feels like a [99:16] like a page done with any other [99:19] framework. [99:28] Okay. One thing that I want to do is [99:30] that [99:33] when [99:36] the time gets to zero, [99:43] okay, times up. That's fine. [99:50] But I want to exclude the first page for [99:54] that because by default [99:56] this is zero, I think. And I want to [99:59] solve that. [100:03] I haven't found a way. This should be [100:05] simple, but I haven't found a way [100:09] so far to do that. [100:15] This is the [100:17] portion of HTML that is displaying that [100:21] text which is dynamically created [100:27] with a derived state called timer text. [100:35] and timer text [100:48] should return [100:53] empty string whenever the timer is less [100:57] than zero. And that's why by default [101:13] By default the [101:20] time limit [101:23] the time limit is defined I haven't [101:25] explained this the time limit [101:29] going to close this this This. This. [101:42] And this. [101:45] This. [101:53] I'm going to go to WordPress studio, [101:57] which is here. And I'm going to get the [102:00] password of the admin. [102:03] So I can log here. [102:06] It's admin [102:15] and [102:28] what I wanted to show is [102:35] yeah that for each post and for each [102:39] question [102:43] I'm using the same block and the blocks [102:48] each block has an attribute [102:53] you can see this in the code here [102:56] there's an attribute defined called time [102:58] limit and the edit function is providing [103:03] an inspector control area to [103:08] allow the user to edit that value. [103:13] So whenever I edit [103:17] this value and I save for example [103:22] this value for question four when I save [103:26] it starts in 10. [103:31] This [103:32] value is stored as an attribute for the [103:35] block [103:43] and and [103:49] set quiz. And if I go to question four, [103:57] the timer starts in 10. [104:00] Because [104:04] in the render PHP, we are [104:09] getting this value from the attributes [104:11] of the block. We are setting the time [104:14] limit. [104:15] The time limit variable [104:21] is used to define the context for each [104:25] block. [104:33] Why the context? Because this is a value [104:36] that makes sense only for each block. I [104:39] don't really want to share that [104:41] globally. So I think it makes sense to [104:43] be part of the context and that's why [104:46] I'm defining [104:49] this here by using the DBP interactivity [104:54] data BP context. [104:58] So this time limit [105:02] every time [105:05] I load a page. [105:16] I can see how it's part of the [105:20] data context of each block. [105:46] Nice. [105:50] And if I go to question three, [105:54] we can see how this changes and we can [105:58] get this value. [106:03] So the state in the client [106:06] is merged with the state that [106:11] is provided by the server. there's a [106:13] merge and um [106:18] there's a soft merge in the case of [106:20] navigation but because this property [106:26] property [106:33] time limit let me see [106:37] we go to the console reset quiz this. [106:45] It's in the context. It's in the [106:47] context. [106:52] If I go to question one, [107:01] time limit 22 and time limit 22. [107:12] Okay, this is interesting because the [107:16] time limit that was in the [107:24] in the context [107:39] the fault field. [107:44] Okay, let me do one test. [107:48] I want to do one test. So these [107:52] properties instead of defining them as [107:55] part of the state, I want to define them [107:58] as part of the context. [108:17] H [108:19] extra data now in the client. Well, [108:22] let's see what happens with this. [108:26] Let's see what happens with this. If I [108:29] go to here [108:32] set quiz or just the [108:52] Okay, I need to [108:54] No, I'm doing this already. [108:58] So in the building the quiz I should [109:01] have this as part of the context. Nice. [109:06] And [109:08] so current SL context extra [109:13] data. [109:18] Ah okay. [109:21] No, I need to [109:29] I need to do this here. [109:33] I create the array and then I add the [109:35] extra properties. [109:42] Let's see what happens here. [109:47] Okay. What I want to check [109:52] Is that now [110:00] why is this uh provide maybe it's cached [110:04] something [110:06] if I do a full reload. [110:15] Okay, [110:16] let's do [110:20] the problem that I'm having is that I am [110:23] defining this extra data. [110:30] Ah, okay. [110:33] Ah, okay. Because this extra data and [110:37] the full fields were defined for the [110:39] state. Okay. Yeah, it works as as [110:43] expected. [110:47] Okay. Now is the context in the server. [110:50] Default field, default value, default [110:51] data, default value, default data, chain [110:54] limit and so on. If I go to question [110:58] one, [111:07] the context server provides this new [111:09] value [111:18] that is [111:24] updated. did but the question one data [111:29] is not [111:34] merged. [111:39] This is something that I need to [111:42] clarify. [111:44] Clarify. Yeah. [111:48] Why are some values being merged? [111:55] So time limit [112:04] um [112:08] because on every new navigation [112:12] ah okay yeah I know why I know why [112:16] because I'm [112:18] in the viewjs [112:22] I'm specifically updating the context. [112:26] Yeah, that's why because if I don't do [112:29] this, [112:32] if I don't do this, [112:38] I guess I would get the previous value. [112:45] CTX is not defined because somewhere [112:48] here. Okay, let me [112:53] Let me comment this. [112:57] Let me comment this. [113:02] Okay. Question one [113:06] 21 20. [113:19] Um, no. What I can do here is console [113:22] text and context instead of updating. [113:27] Let's analyze this. [113:29] Let's analyze this. [113:34] Okay, first [113:36] load of the page. What we have here is [113:40] context from the server. [113:45] what I'm getting from the server because [113:48] this is the first load all of this is [113:50] automatically merged in the client and [113:54] because in the client I don't have any [113:56] specific [113:58] context [114:04] define [114:06] well the okay here it makes no sense [114:11] okay it makes no sense [114:13] because I have one context in the client [114:16] for the first time. [114:24] But then every time I rewrite, [114:30] let me see if I go to question one. [114:36] So now I have the context from the [114:39] server that contains the new time limit, [114:44] the new field and extra data. [114:52] But in the client the [114:56] uh yeah [114:59] so the previous context remains as you [115:03] can see the previous context remains [115:06] here. [115:10] So we have default field the fault value [115:12] the full data [115:14] the time limit [115:18] remains. [115:22] So if I start this in question one [115:35] there is no timer happening. [115:44] Um, [115:49] okay. Let's see what happens if I start [115:52] the time limit instead of minus one [115:58] to um I don't know maybe 20. [116:06] Let's analyze this. If I define the [116:09] default, my [116:12] expectation is that the timer [116:16] continues [116:19] with the same value even if I navigate [116:22] to a new page. This is my expectation [116:24] here. [116:26] So, let's see if that's true. [116:31] I'm going to reset quiz [116:36] time limit minus one. [116:44] This is not correct. [116:48] Okay. Because I have changed the build. [116:52] I need to change this one. [116:56] Okay. [116:59] Fire reset [117:02] and let me [117:05] ah yeah you can see 20 19. [117:13] Okay. So this has been [117:20] 11. [117:26] Okay, let's analyze this. [117:31] The first time we had 20 and 20, [117:37] but the second time ah we start from 20 [117:41] all the time. [117:44] We start from [117:47] 20 all the time. [118:00] We start from 20 all the time [118:04] because I'm not updating this, right? [118:10] Okay, this uh this is a timer that is in [118:13] the state, [118:15] right? It says a timer that is in the [118:17] state. So this is not really affecting [118:20] this. [118:24] And every time I start I okay every time [118:27] I start the page I initialize that value [118:30] with [118:33] what happens if I define this as part of [118:38] the context. [118:42] Um, [118:48] let me see. A state timer. [119:00] Okay, I have the context here. So, I [119:02] should be able to instead of setting a [119:05] state timer, I should be able to do [119:07] context timer. [119:10] Context timer. Context timer. Context [119:13] timer. Context timer. [119:18] Okay, let's [119:22] change all the instances of [119:26] state timer with [119:30] cdtx timer which I have here. And then [119:36] in the [119:38] timer text, [119:43] I need to do this. [119:53] I need to do this. Yeah, because I have [119:57] changed this automatically. Okay, [120:00] let's see what happens here. This is [120:04] exploration time. [120:09] 20 19 18 17 [120:14] Oh, [120:17] it gets [120:26] okay. It gets [120:30] h because I'm doing h [120:36] limit because I'm doing this. [120:41] If I don't do this, [120:47] I don't do this. [121:00] Okay, if I don't do this [121:06] times up [121:08] because yeah, I need this. [121:17] Okay. Context server time limit. [121:24] Change this to ctx time limit because [121:28] I have in the context I have a time [121:31] limit. [121:34] So I was initializing every time to the [121:37] context in the server and now I'm [121:39] initializing to the context [121:42] in the client which makes sense. So, [121:45] okay, now it should work. [121:52] 18 17 [121:54] 16. [122:00] No, this is not working. [122:05] This is not working. [122:07] But this is a good way to [122:10] to explore this and to [122:14] to learn more a bit about this. So let's [122:18] check what we have. We have local [122:21] context which is the same than the one [122:26] we get from here. [122:33] 20 seconds. 20 seconds. If I go to [122:36] question one, [122:38] it starts in 20 seconds. Why? [122:42] Because every time I navigate [122:47] this is [122:55] reset to this value but I thought ah [123:00] because it's a timer and now we have [123:03] time limit. [123:07] Okay. So let's h continue with our [123:09] exploration. [123:11] What I'm going to do is [123:16] instead of [123:21] so timer [123:24] what is timer [123:27] define it's in the server timer [123:39] is minus one. Okay. So, what I'm going [123:42] to say is [123:57] what I'm going to say is [124:03] if [124:08] CDX timer [124:12] is [124:15] um [124:17] different that minus one [124:25] then get whatever you have in CTX timer. [124:29] If not then get reset to the original [124:34] value. [124:50] So here [125:03] reset quiz. [125:08] Right now in the context [125:19] uh because it's not CTX timer is [125:25] state timer. So [125:28] if state timer or maybe what I can do is [125:35] find this also in the context [125:51] 20 seconds. If I go to question one 17. [125:55] Yay. And if I go to question three, [126:01] 9 seconds. Yay, we got it. [126:07] Okay, [126:10] so [126:23] yeah, we have this [126:26] context server which is the value of the [126:30] attribute that it changes on different [126:33] pages. [126:38] This is the default value of the [126:39] attribute. This is the custom one that [126:41] we have set via the [126:47] spectral control [126:50] and this is the custom value. Then we [126:52] have the local [126:54] the value in the client that it doesn't [126:58] change [127:00] unless we update it manually. [127:10] And then we have the timer. [127:15] As you can see, [127:18] we have set something like okay, if [127:20] timer is different that minus one, set [127:24] it to the time limit value. [127:29] Then every time I change the page, I [127:33] update it to the previous value. So the [127:35] timer just continues. [127:45] So, [127:53] I don't really need this because I guess [127:56] I can just [127:59] define this as um [128:07] a value that doesn't get properties from [128:10] the server. So, this is just an [128:12] exploration, [128:14] but this I going to [128:17] um [128:23] minus one. [128:34] Okay, [128:37] this is uh reset to 20 because here I [128:43] want it to be minus one. [128:46] So now what I want to do is [128:52] times up. [128:55] This gets gets reset to the [128:59] time limit of this page [129:01] of this the block on this page. [129:08] And this has a different value. [129:20] Stick timer. Stick timer. [129:26] Um, I think I need to reset the quiz. [129:36] Times up. [129:38] Question one 22. [129:47] I think the values are too similar. So, [129:50] let me [129:53] post question three. [129:55] Yeah, because I was really in the quiz. [129:59] So, I want to go to question three, [130:04] exit code editor. [130:08] And here I want to [130:15] to [130:17] maybe [130:26] saving. And if we go to the homepage, [130:36] if we go to the homepage [130:39] and and we have here the vector [130:55] Question one [130:57] 22. [131:00] We can see that from the server we are [131:03] getting for slack question one we are [131:07] getting time limit 22 [131:11] that is set to time limit. [131:17] If we go to question two, [131:24] we can see the time limit and this timer [131:28] has been set. And the state here, the [131:31] local state is the one. [131:38] Okay, let me see if we can. [131:44] We go to question one. [131:48] The state here target. [132:01] Okay, this is the value that is being [132:04] updated. [132:10] So now what I want to do is to remove [132:14] this text whenever we are in the [132:15] homepage. [132:22] This is not working. [132:25] I don't know why because state timer [132:30] is less than zero. [132:35] So let's do some debug. If I go to [132:38] sources, [132:40] go to view and we go to here state [132:43] timer. [132:47] I reload the page. [132:50] State timer [133:00] is minus one. So this returns empty. [133:08] Now start timer is zero. Why is zero? [133:15] Why is this hero [133:28] timer minus one [133:33] when this is set to zero? Is there any [133:37] zero here? [133:46] Ah, state timer zero. [133:52] So that's why. [133:56] Okay, let me see. [134:11] Don't need to do so start new timer [134:15] time limit. [134:21] I was [134:26] I just can't remove this. [134:45] Um yeah, it's uh triggering this every [134:49] time I go through this [134:53] variable because it gets updated every [134:56] time a state timer is updated as well. [134:59] So I'm just going to [135:03] reset quiz. [135:05] I don't get that value because state [135:08] quiz is minus one. But then on every [135:11] question I can show the remaining time [135:17] and what I want to display is that the [135:21] time is up. [135:27] Yep. [135:28] But in the reset quiz, this shouldn't be [135:31] displayed. [135:35] Nice. Nice. Nice. [135:41] Let's do some more fine tuning. [135:49] Post [135:50] one. [136:12] Okay. So [136:18] right now the content that I'm getting [136:21] is directly what I want to do is [136:26] well we can let's do one test. I can see [136:29] how whatever I put here [136:33] is not retrieved by the root region [136:37] because the root region is this area [136:39] here. [136:46] This is nice actually because [136:49] with block bindings, what I could do is [136:53] to create here a [136:56] section to edit any internal information [137:00] via me meta data for this post. And that [137:06] information is not going to be [137:10] um displayed by [137:13] by the let's check this. [137:23] I have this and [137:32] I'm going to this side. Okay. [137:41] Okay, I want question one [137:44] happens. Okay, question one. [137:49] Yeah, we can see how all the information [137:52] that was outside of the region is not [137:56] displayed here. [137:58] So, I can actually do that. [138:02] And here I have [138:04] interactive logs. So here I can do some [138:09] interactive magic. [138:14] For example, this is an image that uses [138:18] the [138:21] activity API for this light box effect. [138:30] Nice. [138:38] So what I want to display now is I will [138:42] just to display the the number of the [138:46] question. [138:54] The number of the question. [139:01] No, the see the the number or the name [139:04] of the question. [139:06] I can do that here in the render. Maybe [139:09] I can [139:13] one thing that I would like to do is to [139:19] separate this maybe [139:23] a different file and then include it. [139:30] Okay, that's something to explore for [139:32] now. [139:34] What I want to do is to this is the [139:38] content and maybe we can do here an H2 [139:47] and [139:49] H2 [139:56] with um data wp text current slack. Um [140:03] I'm going to create [140:06] a derived state called title quest [140:11] and in view.js I'm going to say [140:34] Don't I have the question text [140:41] for example here? [140:45] Uh I'm just doing item SL. [140:51] Okay, let's create [140:55] title question or [140:59] question text. [141:02] No, title question is a good one. [141:14] So in the context like let's see what [141:17] information do I have in the context. [141:23] If I go to question two. [141:28] Yeah, because Okay, let's um [141:31] for now title question is going to be [141:35] just this. And I'm going to [141:38] like this for now. [141:50] The question is going to be just an [141:53] empty [141:55] string. [141:57] If I go to question two, let's see the [142:00] information that I have [142:03] in the context. What I have is the [142:12] current slack [142:16] and in the [142:20] state [142:26] I have the slacks here. So with current [142:31] slack [142:35] um [142:39] well ideally [142:42] this is something that um [142:47] this is something that it would be great [142:48] to implement to add some meta data for [142:52] the post and including some information [142:55] like the title and I don't [142:59] something else maybe some documentation [143:02] to to know more about that but yeah I [143:05] think that the the project I'm going to [143:09] remove uh well what I can do [143:13] what I can do is to [143:20] get the slack from the [143:26] current slack [143:30] from the context. [143:35] So what I can do is to [143:40] to a const CTX [143:48] constant slack [143:54] and we can do this [143:59] or yeah let's do this for [144:23] Um, [144:32] Okay, [144:34] so this is the current context that gets [144:38] updated on every new page. [144:51] Let me try something. [145:15] Um, no, this is [145:19] correct because [145:23] t state title question [145:28] and title question. [145:33] I get access to the context which [145:37] contains the [145:41] the current slack because the current [145:44] slack [145:51] the current slack [145:54] is providing is provided here [146:00] and in the view I'm just Then [146:04] uh because maybe there's um [146:09] slash of something [146:13] is or maybe the directives is not is not [146:16] correct is data [146:20] bit text. [146:24] No, it's correct. [146:27] H2 H2 [146:36] Let me see here what's happening. [146:40] Um, [146:47] let me see if I go to the build [146:50] and to the render. [146:56] The H2 is there. [147:08] Um, let me do else. [147:26] Okay. So, [147:31] let's debuck this a little bit. What's [147:33] happening here? [147:39] Okay, I don't care about this. But in [147:42] question two, [147:46] in question four, [147:52] uh [147:55] this is not [148:10] Stay timer. [148:27] Okay, this is not triggered. [148:35] uh because I need to access [148:39] not get context but get server context [148:47] and I can directly destructure this [149:03] Okay. [149:05] So, I reset [149:09] and if I go to question two, [149:12] let's see what's happening here. [149:17] Okay. [149:35] What is this luck [149:38] from contact server? [149:51] Okay, this quiz that's fine. But if I go [149:54] to question three, [149:58] why is quiz? Because get server context. [150:04] Get server context. [150:16] Get server context. At this point, it [150:20] should [150:40] ser context at this point. It should [150:43] provide. Okay. If I watch [150:52] Um [150:59] server context. [151:05] Okay, let's get this [151:33] Okay. I don't understand this. [151:46] Okay. Reset quiz. [151:51] quiz [151:54] because server context [151:58] server context current slack is quiz if [152:01] I go to question one. [152:06] Okay, the console still [152:09] has not displayed. [152:16] So at this point, [152:31] this [152:59] So in the context server the Slack is [153:03] question one but this is not displayed [153:10] yet. [153:19] title question. [153:21] Okay, [153:24] I know what's going on. I need to do [153:31] the slack get server context. [153:34] Okay, [153:36] and I'm going to return [153:40] for That's fine for now. [153:51] But in the in it question, [153:54] I get [153:57] subscribed to the context server. [154:01] So what I'm going to do is cdx [154:06] the slack. [154:10] No. Put in the slack. [154:13] Yes. [154:14] CTX. Put on the slack. [154:22] Ah, this is down here in start timer. [154:31] Okay. In that case, [154:36] I don't need to do this [154:39] because whenever the timer starts, [154:44] well, this is not the best place to do [154:46] this, but for now, whenever the timer [154:49] starts, the [155:00] I know this is an internal [155:05] the slug. [155:07] So I can do this. I can do this [155:11] contact server [155:14] init question [155:17] and I'm initializing this here. [155:36] And um okay. And now [155:41] the [155:49] Yeah. [155:52] Yeah. I need to do this. [155:55] I get subscribed to the local that is [155:58] going to be [156:01] set two. [156:04] Okay. [156:05] three. [156:08] And if I remove this [156:17] okay [156:20] and okay, perfect. So, this is what I [156:22] wanted to get. And I think, guys, [156:26] I'm going to stop here. [156:30] Um, [156:32] yeah, I'm very happy with this demo. I [156:35] may [156:37] make it bigger with a better design and [156:40] with more questions and maybe with [156:44] meta data that I can add to the [156:49] to the post. Maybe even create a custom [156:52] post type for the [156:54] questions. [156:57] And [157:01] and yeah, this can be like a nice demo [157:03] of the interactivity routter [157:08] and something that works uh really well. [157:12] I think it's pretty fast the way it [157:14] works. [157:18] We can also do a preload preetch. This [157:23] is something that I want to investigate. [157:25] So every time I go to a question [157:29] um [157:32] it's already loaded. [157:37] So this can also be implemented. So yeah [157:40] I'm going to [157:43] what I'm going to do is to prepare maybe [157:44] 20 questions 30 questions with the meta [157:48] data pointing to the specific [157:50] documentation sites. It will display a [157:52] selection of five with this behavior. [157:55] Each question will have specific time to [157:58] answer the question. It can have images, [158:02] uh code blocks and a lot of things. It [158:05] will be a yes or no. And what else? Um [158:14] and yeah, it will will have a prefetch. [158:17] So the navigation is uh bigger and at [158:20] the end you will get a result. Whenever [158:24] all the questions as whenever all the [158:26] questions have been solved [158:30] you can get a [158:33] button here to check results. [158:38] If I reset quiz, I do start question one [158:43] have some time. But if I navigate before [158:48] I can get the time I have spent on each [158:51] question [158:54] and by the end I can get a a result. [158:57] Okay. Yeah, I like it. I like it. This [158:59] is a good use case for this. Okay guys, [159:02] hope you have a great weekend and hope [159:05] this session has been useful. [159:08] Um, [159:10] and yeah, see you [159:13] next week or any other week. Okay, bye [159:17] guys.