Creating Commands for the Commands Palette

Creating Commands for the Commands Palette ![rw-book-cover](https://img.youtube.com/vi/ETqUp0UXH0k/maxresdefault.jpg) 🔗 **Source:** [Creating Commands for the Commands Palette](https://www.youtube.com/watch?v=ETqUp0UXH0k) > [!note]+ Document Notes > tags: [wordpress, command-palette, gutenberg, developer-tools, react-hooks] > author: Mario Santos > source: YouTube Live Stream > reference: [https://www.youtube.com/watch?v=ETqUp0UXH0k] > date created: 2024-12-19 10:30 > > # 🏷️ Title: Creating commands for the Commands Palette >  ## 🧰 Action Inbox - [H1] Implement handbook quick access commands — use WP.data.dispatch for simple navigation #commands - [H2] Create modal-based commands with React hooks — mount React components manually #react-integration - [H3] Add contextual commands for block editor — use register_plugin for editor-specific features #block-editor ## 🧭 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 Developer Blog](https://developer.wordpress.org/news/) - [Mario's GitHub](https://github.com/WordPress) - [Stream Resources Repository](https://github.com/WordPress/streams) ## 📝 Summary - WordPress 6.9 expanded command palette availability from block editor only to entire admin area - Three main approaches for creating custom commands: WP.data.dispatch, React hooks with manual mounting, and register_plugin for editor contexts - Commands can be contextual (site-editor, entity-edit, block-selection-edit) for better UX prioritization - Challenges exist with React hooks requiring React environment while admin pages may lack this ## 📖 Main Content WordPress 6.9 introduced a significant expansion of the command palette, making it available throughout the entire admin interface rather than just within the block and site editors. This creates new opportunities but also technical challenges for developers creating custom commands. The core challenge stems from WordPress's data layer architecture. Many helper functions for command creation are React hooks that require a React environment to function. However, traditional admin pages outside the editor don't provide this React context, necessitating creative solutions for universal command compatibility. Three distinct approaches have emerged for command creation, each suited to different use cases and technical requirements. The choice depends on where commands need to function and what level of interactivity is required. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/ETqUp0UXH0k?t=0) — [H1] Session introduction and context - Key idea: Live coding session exploring command palette development - Evidence: "WordPress 6.9 the command palette is available everywhere" #### ⏱️ [05:23](https://youtu.be/ETqUp0UXH0k?t=323) — [H2] Command palette expansion in WordPress 6.9 - Key idea: Command palette now works beyond just editors - Evidence: "Before WordPress 6.9 the common palette was only available in the block editor" #### ⏱️ [08:45](https://youtu.be/ETqUp0UXH0k?t=525) — [H3] React hooks challenge outside editor context - Key idea: Hooks require React environment not always available - Evidence: "These hooks can only be executed inside React components" #### ⏱️ [12:30](https://youtu.be/ETqUp0UXH0k?t=750) — [H1] First approach: Direct dispatch method - Key idea: Use WP.data.dispatch for simple command registration - Evidence: "We can use the dispatch method of WordPress data" #### ⏱️ [18:15](https://youtu.be/ETqUp0UXH0k?t=1095) — [H2] Demonstrating handbook navigation commands - Key idea: Register commands to access WordPress handbooks directly - Evidence: "Commands to access directly the handbooks directly from the command palette" #### ⏱️ [25:40](https://youtu.be/ETqUp0UXH0k?t=1540) — [H2] Redux store inspection for commands - Key idea: Command store visible in Redux DevTools - Evidence: "One of the stores we have is called commands" #### ⏱️ [32:10](https://youtu.be/ETqUp0UXH0k?t=1930) — [H1] Second approach: useCommand hook with manual React mounting - Key idea: Create DOM element and render React component for hook usage - Evidence: "We need to find a way of mounting manually a react container" #### ⏱️ [38:50](https://youtu.be/ETqUp0UXH0k?t=2330) — [H2] Latest posts modal command demonstration - Key idea: Modal interface for browsing and navigating to recent posts - Evidence: "We can go to the specific post and we can show latest posts" #### ⏱️ [45:20](https://youtu.be/ETqUp0UXH0k?t=2720) — [H3] Using useSelect hook for data fetching - Key idea: Leverage WordPress data layer for dynamic content - Evidence: "I'm using the useSelect which returns the post and is loading" #### ⏱️ [52:15](https://youtu.be/ETqUp0UXH0k?t=3135) — [H1] Third approach: register_plugin for editor contexts - Key idea: Use existing React environment in block editor - Evidence: "If we are in the block editor we can leverage register plugin" #### ⏱️ [58:30](https://youtu.be/ETqUp0UXH0k?t=3510) — [H2] Contextual commands and prioritization - Key idea: Commands can be contextualized for better UX - Evidence: "Commands can be contextual. This means that in a given context some specific commands are given more priority" #### ⏱️ [64:45](https://youtu.be/ETqUp0UXH0k?t=3885) — [H2] Copy post content command implementation - Key idea: Editor-specific command using clipboard API - Evidence: "navigator clipboard write text content" #### ⏱️ [71:20](https://youtu.be/ETqUp0UXH0k?t=4280) — [H3] Block usage analysis command - Key idea: Dynamic command loader for analyzing block usage - Evidence: "useCommandLoader used for dynamic commands" #### ⏱️ [78:10](https://youtu.be/ETqUp0UXH0k?t=4690) — [H2] Context restrictions and user permissions - Key idea: Commands can be restricted based on editing context - Evidence: "canUser edit post returns true only when editing a post" ## 📚 References - [WordPress Command Palette Documentation](https://developer.wordpress.org/block-editor/reference-guides/data/data-commands/) - [Gutenberg Repository](https://github.com/WordPress/gutenberg) - [WordPress Data Package](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/) ## 🗣️ Paraphrase - WordPress 6.9 brought command palette functionality to all admin pages, not just editors, creating new development opportunities - Three main patterns exist for command creation: simple dispatch calls, React hook mounting, and editor plugin registration - Commands can be made contextual to appear first in relevant editing environments like site editor or block selection ## 📰 Newsletter **WordPress Command Palette Gets Major Expansion** WordPress 6.9 has opened exciting new possibilities for developer productivity with the command palette now available throughout the entire admin interface. This expansion means you can create custom commands that work everywhere from the dashboard to post listings. **Key Development Approaches:** - **Simple Navigation**: Use `WP.data.dispatch()` for basic commands like handbook links - **Interactive Modals**: Mount React components manually for complex interfaces - **Editor Integration**: Leverage `register_plugin()` for block editor specific features The contextual command system is particularly clever - your editor commands automatically get priority when relevant, creating a more intuitive user experience. **Next Steps**: Start with simple navigation commands using the dispatch method, then explore React integration as your needs grow complex. Resources: [Developer Docs](https://developer.wordpress.org/), [Command API Reference](https://developer.wordpress.org/block-editor/reference-guides/data/data-commands/), [Live Coding Archive](https://youtube.com/@mariosantos) ## ✅ Action Items #### WordPress - Core: Investigate additional command contexts beyond site-editor, entity-edit, block-selection-edit - Core: Consider command grouping/categorization for better organization - Core: Explore command descriptions and tooltips for enhanced UX - Documentation: Create comprehensive command palette development guide - Documentation: Document screen checking in PHP for conditional JS loading #### Community - Contributors: Share command palette plugins and use cases - Contributors: Test command palette accessibility across different admin contexts - Maintainers: Evaluate command palette integration opportunities in existing plugins ## 🧪 Hypotheses - Command palette usage will increase developer productivity in WordPress admin workflows - Contextual commands will reduce cognitive load by showing relevant options first - Manual React mounting approach will become standard pattern for complex commands - Screen-based PHP loading checks will improve performance over universal JS loading ### 📊 Methodology - Create test commands using all three approaches and measure implementation complexity - User testing to compare navigation efficiency with and without custom commands - Performance analysis of React mounting vs dispatch methods - Accessibility testing across different admin page contexts ### ❓ Questions - How can we improve the architecture for commands requiring React hooks outside editor contexts? - What additional command contexts would be most valuable for developers? - How should commands be grouped or categorized as the ecosystem grows? ### 🔮 Future Research - Command palette performance optimization techniques - Integration patterns with existing WordPress admin workflows - Accessibility best practices for modal-based commands ### 💡 Implications - Practice: Command palette becomes essential skill for WordPress developers - Policy: May influence WordPress admin interface design patterns - Security: Custom commands need careful permission checking and validation - Education: Training needed on React integration patterns outside traditional editor context ### 🧠 Learning Styles Assessment Reading level estimate: Grade 12 #### 👀 Visual learners - Present: Code examples, command palette screenshots, Redux DevTools inspection - Improve: Architecture diagrams showing different command registration flows #### 🔊 Aural learners - Present: Live coding explanation with verbal narration - Improve: Audio summary of key concepts and decision points #### 🗣️ Verbal learners - Present: Clear explanations of technical terms, API analogies - Improve: More real-world use case stories and examples #### 🧩 Kinesthetic learners - Present: Live coding session, copy-paste examples, hands-on demonstrations - Improve: Step-by-step implementation checklists #### 🧠 Logical learners - Present: Clear approach categorization, decision trees for method selection - Improve: Flowcharts for when to use each approach #### 🧑‍🤝‍🧑 Social learners - Present: Live chat interaction, community resource sharing - Improve: Group coding exercises, command sharing gallery #### 🧘‍♀️ Solitary learners - Present: Self-contained code examples, individual exploration - Improve: Self-assessment quizzes on approach selection #### 🌿 Naturalistic learners - Present: Organic development flow, iterative problem-solving - Improve: Ecosystem thinking about command relationships ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Code structure with proper headings - Improve: Alt text for code screenshots, ARIA labels for live demo #### Keyboard navigation - Present: Command palette designed for keyboard-first interaction - Improve: Ensure all demo commands are keyboard accessible #### Contrast and readability - Present: High contrast code examples - Improve: Check video streaming contrast levels #### Text resizing and reflow - Present: Code examples scale appropriately - Improve: Ensure video player controls remain accessible when zoomed #### Media and captions - Present: Live verbal explanation - Improve: Auto-generated captions, transcript availability #### Forms and interactions - Present: Command palette interactions well-labeled - Improve: Error state handling in custom commands ### 🌍 DEIB Assessment #### Cultural breadth - Present: English-language focused but open to global participation - Improve: Multi-language command examples, internationalization discussion #### Inclusive language - Present: Technical terms explained, jargon defined - Improve: Plain language summaries, avoid assumptions about prior knowledge #### Neurodiversity support - Present: Clear structure, consistent pacing - Improve: Content warnings for rapid code changes, pause points #### Representation - Present: Single presenter but encouraging community participation - Improve: Guest perspectives, diverse use case examples #### Psychological safety - Present: Encouraging questions, admitting uncertainty - Improve: Explicit welcome for all skill levels ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Clear categorization of three command approaches based on technical constraints - Inductive strength: Examples build from simple to complex implementations - Causal reasoning: Links technical limitations to architectural solutions - Analogical strength: Good comparison between editor vs admin contexts #### Fallacies - None identified: Technical explanations are well-grounded in code examples #### Tone of voice - Overall tone: Collaborative and exploratory, encouraging experimentation and learning ### 🛡️ DARVO Analysis - Deny: Not applicable - technical content - Attack: Not applicable - technical content - Reverse victim/offender: Not applicable - technical content - Emotional cues and rhetoric: Positive, encouraging tone promoting learning and exploration ## 🎯 Conclusion WordPress 6.9's expanded command palette creates significant opportunities for improving developer and user workflows throughout the admin interface. The three main approaches - direct dispatch, React hook mounting, and register_plugin integration - each serve specific use cases and technical requirements. For developers, start with simple navigation commands using the dispatch method, then progress to React integration as complexity needs grow. The contextual command system provides elegant UX prioritization that should be leveraged thoughtfully. The broader implications suggest command palette development will become an essential skill for WordPress developers, potentially influencing how we design admin interfaces and user workflows across the entire ecosystem. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad ### [H1] Command palette expansion enables universal admin commands > [!quote] [Creating commands for the Commands Palette](https://www.youtube.com/watch?v=ETqUp0UXH0k) by [[Mario Santos]] via [[YouTube]]. Published 2024-12-19. Accessed 2024-12-19. > "WordPress 6.9 the command palette is available everywhere" Significant expansion from editor-only to admin-wide availability. [view highlight](https://youtu.be/ETqUp0UXH0k?t=323) #wordpress #command-palette ID:rw_cmd_palette_expansion ### [H2] React hooks require environment outside traditional admin > [!quote] Creating commands for the Commands Palette > "These hooks can only be executed inside React components" Core technical challenge for universal command compatibility. [view highlight](https://youtu.be/ETqUp0UXH0k?t=525) #react #wordpress-architecture ID:rw_hooks_challenge --- ### 🔖 Atomic Split Pad (Zettel Candidates) #### [Z1] Three patterns exist for WordPress command registration - Simple dispatch, React mounting, register_plugin approaches each serve different contexts - Pointer to 12:30 timestamp and implementation examples - Links: [[WordPress-Command-Palette]] [[React-Integration-Patterns]] #### [Z2] Contextual commands improve user experience through prioritization - Commands appear first in relevant contexts like site-editor or entity-edit - Pointer to 58:30 timestamp and context demonstration - Links: [[User-Experience-Design]] [[WordPress-Admin-Interface]] --- ### ✏️ Fleeting Queue - [F1] Explore command grouping solutions for growing ecosystem — GitHub issues discussion #fleeting #commands - [F2] Test --- ## Full Transcript [04:01] and we are live. [04:05] Let me send a message [04:08] and then we can start with the session. [04:15] In the meantime, please say hi if you [04:17] are there. [04:44] Okay, [04:49] we are connected and the [05:02] I'm sharing this session [05:05] in a slack [05:07] child. [05:25] Okay. [05:29] Yes. So people [05:31] are aware of this. [05:41] And now I'm ready. [05:44] Okay, welcome [05:47] everybody to another session, [05:52] another stream, [05:55] another stream where um [05:59] I usually just work in public about [06:02] stuff and I share what I have learned [06:04] during the the week and yeah, it's like [06:08] an open space so anyone can connect and [06:12] ask questions. [06:14] and yeah maybe just chip in [06:19] how [06:20] other developer is working about [06:22] something. [06:24] So today I want to explore a bit further [06:30] the command palid and the creation of [06:33] commands. [06:34] I've been [06:37] exploring this a little bit in this past [06:41] uh few days. [06:44] And I'm actually in the middle of [06:46] exploring some stuff. So I want to share [06:48] that with you and maybe work on these [06:49] things together and see what we can [06:54] what we can do or if we can solve [06:56] something or if we can create some uh [06:59] new commands. I also [07:03] published this article a few weeks ago [07:12] because I started this exploration. I [07:14] actually did another stream [07:19] at the yeah a few weeks ago in Spanish [07:23] and I struggle with a few things [07:26] so I decided to write about it. The [07:29] thing is that um now in WordPress 6.9 [07:36] the command pallet is um it's available [07:40] everywhere. Before [07:43] WordPress 6.9 [07:46] the common pallet was only available in [07:49] the block editor in the post editor or [07:53] in the site editor but now it's [07:56] available um everywhere. So that comes [08:01] this brings new challenges. Um [08:05] the main challenge I faced is that when [08:08] you create commands there are some [08:11] helpers to create these commands but a [08:13] lot of these helpers are hook are hooks [08:17] and these hooks can only be executed [08:20] inside React components. [08:22] And the thing is that outside of the [08:25] post editor [08:27] there are no usually uh there's no react [08:30] environment. [08:32] So we if we want to use those hooks and [08:36] those hooks are useful if we want to [08:39] interact with a store or something like [08:41] that. We need to find a way to [08:45] make or [08:47] command to work in [08:52] all the the contexts in all the [08:56] environments. It should work either in a [08:59] page that has a react [09:04] um [09:06] environment and in pages that doesn't [09:08] have that react environment. [09:10] Um so yeah, I did an exploration. I came [09:14] up with a few solution. I would like to [09:15] review them to see if we can improve the [09:18] the approach on each of them. [09:22] and [09:24] okay the chat sorry if I don't answer in [09:28] the chat because the chat is not [09:30] connecting here let me see if I can [09:34] solve this somehow [09:36] and now I can see the chat [09:40] hello [09:46] so yeah if you are there say hi say [09:52] from where you are connecting. [09:57] And yeah, if you have any any questions [09:59] about this um [10:02] this whole thing of creating commands [10:05] for the for the command pallet. [10:11] Okay. So let's start by [10:15] I'm going to show what I have so far of [10:19] the expiration that I'm doing and I'm [10:22] also in the middle of checking a pull [10:24] request that has to do with this [10:26] creation of commands. So maybe we can [10:28] explore that together and then maybe we [10:31] can uh we can go through these different [10:35] examples and [10:38] and just talk about them. [10:41] I think that what I'm going to do is I'm [10:43] going to share. Let me see if I where do [10:48] I have this? I think it's here. [10:54] Yeah, this is the project that I have. [10:58] And this is the article. [11:00] So, yeah, let's start. I think we can [11:03] start here by [11:06] or maybe we can check the the [11:07] documentation a little bit. [11:15] Uh, I have to. Okay, let me see. [11:20] I'm not logged in here. [11:25] Okay, let me [11:29] um [11:35] shouldn't I have Let me see. [11:39] uh because I'm not logged in. Well, that [11:42] can be solved very easily. [11:45] I want to access this uh Twitter because [11:49] I have here some [11:54] resources. Well, actually I have them [11:55] here as well. Yeah, that's what I wanted [11:58] to [12:00] to share with you. [12:04] like these resources. I'm going to share [12:07] them in the [12:10] in the chat. Well, by the way, [12:15] um [12:17] I want to [12:19] mention that I have [12:22] published a new post in the developer [12:25] blog which I think is uh is is really [12:30] interesting because it [12:34] it talks about how to combine like [12:36] different APIs in WordPress to create [12:39] effects or to create any behavior you [12:43] want to to implement. And this is a [12:47] really interesting use case because it [12:49] covers [12:51] both APIs [12:53] that affect the edition experience and [12:57] also the user experience. [13:00] So we are [13:04] we are implementing [13:06] um [13:08] the experience in both sides of the [13:11] equation. [13:13] So the effect is this. [13:17] So we have for example a series of words [13:21] separated by commas and I can select [13:23] that text as a format and this is the [13:26] addition experience. I can just okay I [13:28] want this to be a word switcher effect. [13:31] So each word will be detected will be [13:34] isolated and will be presented in the [13:36] form of this effect. So this is what [13:39] this article is about and this um effect [13:45] is done by leveraging the format API, [13:50] the interactivity [13:53] API, HTML API and also using JavaScript [13:57] modules which we need to register and we [14:00] which we need to build as a module. So [14:03] there are some um [14:06] some things to be taken into account and [14:09] all of that is explained in this [14:11] article. So yeah, I really recommend you [14:14] I'm going to share this in the in the [14:17] chat. Whoops. I'm going to [14:21] share this in the chat. [14:25] And without further ado, we can move on [14:29] with the with the command pallet API. [14:34] So the command pallet ai command pallet [14:37] in case you don't know what I'm talking [14:38] about is uh this when we are in the [14:42] admin and now the in WordPress 6.9 the [14:45] command pallet is available everywhere [14:47] which means that is available here. This [14:50] wasn't possible in WordPress 6.8 eight. [14:54] And now since WordPress 6.9 this is um [15:00] this is enabled and we can move around. [15:04] We can go through we can go to a [15:08] specific posts or specific pages [15:12] or we can [15:14] um go [15:17] directly to a specific uh template. [15:22] And from here maybe we can go to um [15:29] we can go to editor [15:33] appearance editor [15:36] and yeah we can move around and the cool [15:39] thing is that we can also create our own [15:42] um we can create our own commands and [15:46] this is what we are going to explore [15:48] today. [15:50] For example, one way to create a command [15:53] is using this uh use command [15:58] which is a React hook. And this React [16:00] hook needs to be executed inside of our [16:04] React component. And that React [16:05] component needs to be um hydrated [16:09] somehow into the DOM. And we need to [16:11] find a way to to to do that. [16:21] So let's explore this a little bit. Um [16:26] what I want to [16:32] what I want to move here is the studio [16:34] where I have this [16:36] um [16:38] actually [16:40] let's create a new site site um commands [16:46] valid [16:47] exploration [16:53] I'm going to add the site. I'm going to [16:56] make it [16:59] I want to create a um [17:04] like a local domain and we can do this [17:08] here. If I edit site custom domain [17:12] and commands valid expiration, I want to [17:14] enable https. [17:25] And with that [17:27] what I want to do is I want to [17:32] link the project that I have here under [17:34] the folder common p valid exploration. [17:38] So to do that, I'm going to come here. [17:46] Um, [17:48] running. [17:52] I think it's because I created the [17:55] domain. After that, I need to stop it [17:59] and launch it again. [18:03] Start. [18:09] Okay. And now we have the site. [18:14] And if I go to overview to iTerm, [18:22] I'm going to go to uh to the plugins [18:25] folder [18:27] and I'm going to link the [18:31] the project where I have all this [18:33] initial exploration. [18:36] Uh it's called commands uh valid no [18:41] exploration command. [18:44] valid exploration. [18:48] So now that I have this project here, I [18:52] should have it in plugins [18:54] and I should be able to activate it and [18:58] this [19:02] um register this custom commands that I [19:05] have created. So these are commands to [19:07] access directly the the handbooks [19:09] directly from the from the command [19:11] pallet. So for example, if I click here, [19:13] I go directly to the blockator handbook. [19:16] Or if I click here, I go directly to the [19:19] theme handbook. [19:22] And the nice thing is that um I can look [19:26] I can search for the words in the the [19:30] title, [19:32] but also I can add some keywords. For [19:35] example, whenever I search for dogs, [19:38] these results appear. So how have I done [19:41] this? Um [19:47] so this is how this is done. This is I [19:50] think the easiest way to to register um [19:53] a command. [20:06] It seems that is offline. [20:11] I'm not sure if I'm streaming right now [20:13] or not [20:17] because it appears offline OBS. Let me [20:21] quickly check this. If I go to YouTube [20:27] and I go to my channel. [20:37] Yeah, it seems that this is streaming. [20:41] Okay. [20:44] Okay. Yeah. Back again. [20:47] Back again. [20:50] Yeah, this OBS software is is really [20:52] strange. I [20:55] I don't fully understand it to be [20:57] honest. So, every from time to time I [21:00] have like these little surprises that I [21:02] have to I have to deal with. Well, [21:05] anyway, [21:07] um [21:08] how these commands are registered. So, [21:11] we can use the [21:14] dispatch method of WordPress data. Um, [21:21] WordPress data is the data layer of the [21:27] of the [21:30] stores that centralize the the data. [21:37] If we come here, [21:40] expect [21:49] Okay, let me I'm going to close [21:53] all the [22:03] I think is if I come here to inspect and [22:06] I go to redux [22:09] here we can see the stores. So the [22:12] stores are [22:14] available. If we come here to the [22:16] console and we check Dolbyp, [22:21] we can see that there are a lot of [22:24] objects and [22:28] shared under the Dolby VP global object. [22:31] So we can we have access to the API [22:34] fetch uh function but also to the blocks [22:39] object the block editor and all of them [22:42] they have a thing called store [22:49] and this store is the one that we can uh [22:54] pass to [22:56] Dolbyp data [23:01] um [23:03] to dispatch actions or to select data. [23:08] If we come here to Redux, we can see [23:11] here how there are different stores [23:14] available. One of the stores we have is [23:16] called commands. And here we can see we [23:19] should see all the commands that are [23:21] registered. [23:23] And [23:25] we should see here our [23:29] own commands the ones that we have [23:32] registered. [23:34] Let me see if I can find them. [23:39] Um [23:43] what is the name? The name of is command [23:47] API exploration. [23:53] command and here here they are. Command [23:55] API exploration docs block editor and [24:00] whenever this command is called I [24:04] trigger a specific callback which in our [24:07] case is uh just a window open to the [24:10] specific link according to this array of [24:13] objects where I have defined all the uh [24:17] data of the different handbooks. [24:20] So what I do here is I loop over the [24:24] array and for each object I register the [24:27] command. How do I register the command? [24:30] I dispatch an action which is register [24:32] command of the command store. [24:37] So we come here and we do commands. [24:50] Um [24:51] no, if I do if I do DVP data and then [24:57] DVP [24:59] commands um store [25:08] If I do WP data this patch comment [25:14] store, this should [25:17] return [25:19] a set of actions we can trigger to [25:24] alter the data that is in the Redux [25:29] store. [25:31] And one of the actions is register [25:33] command. So we do data dispatch the [25:36] specific store in this case in the [25:38] command store and register command and [25:41] register command. If we check the [25:43] documentation here [25:49] register uh command. [25:54] If we look for register command, [25:59] we have here we have here the commands [26:01] data register. [26:06] Well, this is not really useful. So, [26:08] let's go with the other result. [26:19] Yeah, this is the information we need to [26:20] pass to register a command. name, label, [26:23] icon, call back, context, the context of [26:25] the command and the keywords. [26:32] So this is a way of registering a [26:34] command. [26:38] And um [26:42] this is what I've done here. [26:46] And this is a good way because if we [26:48] don't need any [26:51] thing that is super complex, this is [26:53] good enough. [26:56] But what happens if we need to interact [27:00] with [27:02] um [27:05] other hooks and we want to use the hook [27:10] way of registering a command. For that [27:13] we have the use command hook. [27:17] And [27:21] and if we need that and for example if [27:23] we need a models or um [27:29] other effects that can be triggered uh [27:33] from react. We need to [27:37] find a way of [27:40] um mounting manually a react um [27:47] a react container and so this is [27:51] properly hydrated into the dome. [27:55] This is an example. So let's copy this. [27:58] Let's comment this a little bit. [28:04] For example, [28:06] um we can call this [28:09] latest [28:12] posts. [28:19] Okay. Yes. [28:22] And I'm going to copy this [28:38] Okay. [28:42] And what I can do here is okay this [28:45] latest posts and right now [28:50] I'm going to move this logic to the [28:52] index. [29:02] I'm appending a specific DOM element and [29:05] inside that do element I'm creating a [29:08] root to render a specific [29:10] um [29:13] react component which is the one I'm [29:15] going to import [29:18] from here. [29:22] I also need to [29:26] I'm going to remove this [29:30] and I'm going to export [29:34] default [29:37] function. [29:39] This this is a [29:43] a React component. [29:45] What else? the dump ready. I'm going to [29:48] move it to [29:55] I'm going to move it to and uncreate [29:57] root as well. [30:00] And yeah, we should have [30:04] we should have [30:07] no latest [30:10] post uh command [30:15] post commands. Okay. [30:18] So, how are we doing this? [30:25] This is the [30:28] React component that we are [30:34] we are invoking. We are um triggering [30:38] when the specific command is uh called [30:41] is summoned. [30:45] This react component has uh two states [30:48] is open and set is open. Is open will be [30:51] true or false depending if the specific [30:54] uh model is rendered or not. [31:04] So this um react component [31:10] make use of the use command which is a [31:13] hook available from the WordPress [31:16] commands. And if we look for use [31:18] command, [31:21] we look for use command. [31:26] We can see that [31:30] attach a command to the command pallet [31:32] used for static commands. [31:41] Um [31:43] but we need to [31:48] appear this command [31:51] this commands. Okay. If we look for use [31:54] command, let me look for that in [31:55] Gutenber. [31:59] We look for Gutenber and we look for use [32:02] command [32:06] export hooks. Yeah, we can see that this [32:09] is a hook hook. The hook use command [32:16] and it's a hook. It uses this effect. [32:19] So, we need to to to launch this from um [32:23] from a React component. [32:26] And that's why I'm doing this. [32:29] That's why in order to render this [32:33] React component that internally [32:38] is uh making use of the hook use [32:42] command. [32:44] We are um [32:47] what we are doing is via JavaScript we [32:50] are creating a DOM element [32:54] and [32:56] we are hydrating that uh DOM element [32:59] with [33:01] my custom [33:04] re component which is the one that is [33:07] making use of the hook [33:10] here [33:12] and Here [33:15] I can call all the react components and [33:18] this react component uh latest post [33:21] model is uh the one [33:26] that [33:29] uses other hooks like you select for [33:33] example the idea let's um let's try we [33:37] can go if we reload code. [33:46] We can do um [33:50] show latest posts. [33:54] And here we can see a specific uh model [33:57] window [33:59] where we can go to the specific post [34:09] and we can show uh [34:13] show latest posts [34:18] and we can go and edit the post. for [34:20] example. [34:26] So this is an strategy that I think it [34:29] can work [34:34] because this is a way to ensure that all [34:37] command registered via hooks is um [34:41] properly registered. [34:48] no matter where this is executed. [34:56] And what I'm doing here is okay, I'm [34:58] using the use select which returns the [35:03] post and is loading. [35:09] This is the query I'm doing. I'm [35:16] selecting [35:19] from the core store which I have [35:23] imported here. I'm using the get entity [35:26] records and there is a good post in the [35:30] developer blog about the get entity [35:32] records. We go to [35:39] well we have use entity records and get [35:42] entity records. So I'm going to share [35:44] this [35:47] in the chat [35:53] and we are getting the post and while [35:56] this is loading the cool thing is that [35:58] I'm showing a spinner and if it's not [36:00] loading I'm h iterating over the [36:05] different items uh retrieved which are [36:08] the different the latest posts because I [36:11] am uh um using this query [36:16] post type post in the query and [36:20] and I can close the the model. [36:26] So this is [36:32] any tips just started coding as a [36:33] beginner. What language do you [36:35] recommend? Wow, that's um it's an [36:38] interesting question. Do you are you [36:41] interested in in programming in in [36:43] WordPress or just in in general? [36:51] Okay. So we have here a model [36:56] um component which we can import from [37:00] spinner and then the external link. [37:04] This is the [37:10] Okay. In general, [37:12] um, okay, so UB sounds is asking about a [37:16] specific uh language. [37:19] If you are starting, I would recommend [37:21] to start with a programming language um, [37:25] such as JavaScript or Python. I think [37:28] those are the [37:30] the easiest ones to learn and the ones [37:34] you can do the most. uh from my [37:36] experience both Python and JavaScript [37:39] are pretty popular. There are a lot of [37:42] um projects done in in in [37:46] Python and JavaScript and and there are [37:50] a lot of resources on the web. So yeah, [37:53] that would be my recommendation and from [37:55] there you can uh move and explore other [38:00] languages uh such as uh yeah PHP or or [38:05] any other also depending on what type of [38:07] uh products you want to to create for [38:11] the web for example. Hey Elliot, how you [38:14] doing? Hi. [38:19] We're talking about programming [38:20] languages. It's a [38:23] very open open big topic. [38:30] What career paths do those offer? Um [38:34] well these programming languages [38:38] I think there is a lot of uh work for [38:41] for these programming languages. And [38:49] so for example, if you learn PHP um for [38:54] WordPress related uh projects, I think [38:57] there is a lot of uh [39:01] a lot of jobs in that in that uh [39:04] ecosystem. Um and also if you learn PHP [39:09] and JavaScript which are like the most [39:11] uh [39:15] Yeah. [39:17] Yeah. I agree. [39:19] Actually is saying like I think every [39:21] programming language offers path in [39:23] every domain. Yes. Some are more [39:24] dominant than others. Yeah. [39:28] Yeah. From my perspective, I think that [39:30] the JavaScript and Python are pretty [39:32] popular. So that's like um um [39:40] that's a good direction to start with. [39:42] something. But yeah, from from there um [39:47] it depends on what you're interested in [39:50] like if you interested in developing [39:53] games for example or web pages or or any [39:57] other. [39:59] Okay. So let's uh go back to our command [40:03] and [40:05] just to summarize we have um [40:10] we have reviewed two ways of creating [40:12] commands. The first one is the easiest [40:15] one. Um yeah Elliot is saying choosing a [40:19] single programming language is hard. I [40:21] found that the best way to learn is to [40:23] just build things and experiment with [40:24] different ways of doing them. Yeah. [40:27] Yeah. I agree. I agree. [40:31] Do any of you have any um [40:36] favorite programming language? Something [40:38] you feel comfortable with or something [40:40] that you would recommend? I mean um if [40:43] someone is asking you this question, [40:46] which programming language [40:49] should I learn? Do you have like a a [40:51] recommendation? [40:54] For me it would be um [40:58] it would be JavaScript actually [41:02] that would be my my recommendation [41:06] like to start with something because [41:08] it's a language you can use for both the [41:09] front end and the and the back end and [41:12] it's pretty flexible. [41:18] Taxil says, "I like JS and C++ even [41:22] though I don't code in it." Yeah, [41:31] there was this video the other day. I [41:33] saw Yeah, says JS, HTML, CSS, and JST. [41:38] Yeah, I think that combo is pretty [41:40] especially for the web [41:44] like understanding deeply JavaScript, [41:47] HTML and CSS. It's very powerful. It's [41:50] very powerful because with JS you can [41:53] manage the behavior in the front end but [41:57] also a lot of logic in the back end and [42:00] understanding good markup and and CSS. [42:04] Uh [42:08] so Jubie says from what I observed is [42:11] the most hirable or what do you think [42:18] like a JavaScript Yeah, I would say for [42:22] me I think JavaScript, Python, PHP are [42:27] like good bets, are like good options. [42:30] This is a matter of exploring them, see [42:33] what you like most about them and then [42:36] and continue [42:38] doing them. The good thing is that [42:40] nowadays with AI, you can really I I [42:43] really like this current time we're [42:46] living in because you can really [42:49] you can really explore any language [42:51] without having any idea and just let AI [42:54] to to guide you through that. So you can [42:56] say okay uh let's create something and [43:00] guide me through every step of it and [43:02] you can ask questions and it's like a a [43:04] good way to to learn [43:07] to learn things. Um, [43:10] sometimes I think it's like a the [43:14] feeling I have when I use Google Maps. [43:18] AI is free tutori. Yeah, I agree. I [43:21] agree. For example, when we use Google [43:24] Maps, we go into a place we haven't been [43:27] before and we just move around like if [43:29] we live there because we can um [43:34] we can go in a new town and we can just [43:36] set an appointment at a specific time [43:38] and we can just be like very tight tight [43:43] time like um trusting the time the [43:46] Google Maps is uh saying it's going to [43:49] take and we can move around uh with uh [43:53] going to addresses we [43:57] haven't been there before. So yeah, it's [44:00] like moving around places we are not [44:03] familiar with and we we haven't been [44:06] before. And for me AI [44:09] um I feel it uh in a similar way. I can [44:13] start uh working with um a programming [44:16] language I don't know with a framework I [44:19] don't know and I can just ask questions [44:21] and I can learn as I I do think what do [44:24] we all do before will maps [44:28] I don't know I don't know [44:30] because I I use it even if I know the [44:33] the the [44:36] way [44:43] because sometimes yeah I [44:48] um What other uh platform do you stream? [44:53] I'm streaming in [44:56] Twitch and [45:01] Okay, you are from Twitch. I stream at [45:05] the same time into Twitch and [45:09] YouTube. [45:10] So if we [45:13] if you go to YouTube, I'm sharing here [45:17] the my channel. [45:25] So this is my channel and if you're [45:29] interested in [45:31] WordPress development, I have a lot of [45:35] a lot of videos there from the streams [45:39] that I [45:41] that I do from time to time. I'm also [45:44] pretty active in my blog. [45:47] So I'm sharing that resource as well [45:49] here. [45:52] Um, [45:53] what else? [45:58] I'm also pretty active in GitHub and I [46:04] have in GitHub uh [46:07] a map of all the things I've been [46:11] working on. So, yeah, that's another uh [46:14] good uh reference for what I've been [46:17] doing. [46:19] Okay, let's go back to the commands. [46:23] Two ways we have seen so far. Um, [46:28] cool. [46:30] Um, [46:32] we have [46:35] checked ways to register commands that [46:39] work in all pages that work in both the [46:42] admin dashboard and in the citator and [46:44] in the pulsator. [46:46] First way is this one [46:51] this patch. [46:53] Actually we can do a very [46:59] a very quick [47:01] test [47:05] if we [47:08] look if we go to my GitHub page. This is [47:14] um this is something that I uh generate [47:18] automatically every day. So this is [47:20] really cool. The project is here. This [47:23] is my GitHub because I have like [47:26] different organizations in GitHub and [47:30] this is the one that I use for WordPress [47:32] development. And in this specific [47:35] organization in the landing page of this [47:37] organization, I have this uh list of [47:40] resources that I [47:43] that I like or that I'm working on. And [47:46] for example, what I have here is a link [47:48] to some guests. And [47:53] what I want to show you here is that I [47:56] have [47:58] I have a Giz here [48:02] which is a way to create a new command. [48:05] I'm going to share this here. [48:09] Okay. So the cool thing about this [48:11] command is that we can copy. [48:14] We can go to any [48:17] WordPress installation. [48:22] So if I [48:25] type command K, I launch this command [48:28] palid and if I type which is my name, [48:33] there's no command. But [48:37] if I copy and paste this, I can register [48:40] a command using the same approach we [48:44] have used here. The difference here is [48:46] that we are using a build process. So we [48:49] are importing the different libraries [48:53] and generating a build version. And this [48:55] is the one that we are loading. But here [48:58] we are using directly the [49:04] the packages that are [49:07] um published in WordPress. So in [49:09] WordPress the the data package is [49:13] available as a property of the um WP [49:18] global object. The same with the [49:21] commands and [49:24] a lot of other packages. So what we can [49:26] do is directly [49:29] call the dispatch method of the data [49:32] package. We need to pass a specific [49:35] store. This can be like the block store, [49:37] the editor store. In this case, we're [49:39] interested in the comments store. And um [49:42] this dispatch [49:44] method over a store, it returns a set of [49:48] actions that we can execute. Um [49:54] if we do this we can see that we get a [49:57] lot of uh well a lot of uh a number of [50:00] actions like register command and [50:04] this register command we can use it to [50:07] register a command. And if we uh do [50:11] here, we can see how now we have this uh [50:14] command, this custom command that what [50:17] it does is redirect to to my web page. [50:21] But this is a a pretty um [50:25] good way to [50:29] demonstrate how to register commands. [50:32] Okay, so we have this method. Then we [50:34] have this other method, latest posts. [50:37] I'm thinking about the strategy used [50:40] here. I'm not sure. I think it's fine. I [50:42] don't think there [50:45] I'm thinking about the architecture. [50:48] So what we are doing is we are creating [50:50] um a DOM element. [50:54] So let's what we are doing is we are h [50:58] when the DOM is ready we are creating a [51:02] specific deep we are assigning that deep [51:07] an ID we are appending down that to the [51:11] body and then we are uh rendering or [51:16] react component in that uh DOM element [51:19] that we have created on the fly [51:23] and The react component we are rendering [51:25] is called latest post command which is [51:28] this one and this command uh is a react [51:32] component. So inside the react component [51:34] we can use all the [51:37] the different hooks like for example use [51:39] state use command and this [51:45] state variable we use it to [51:52] to display or not this model window. [51:58] can come here and say. [52:02] So when we click [52:06] recently did posts it displays [52:11] um [52:13] it displays the model window based on [52:15] the value of this is open. But when we [52:19] click here, [52:22] we use set this open to false. The on [52:25] close of that model [52:29] uh this on close [52:33] is the one that we pass to the model. [52:36] And when we close and here we can make [52:39] use of other post other hooks like for [52:43] example um you select to get the list of [52:46] posts which is um dynamically [52:52] retrieved and from there we can [52:56] um we have access to both the data and [52:59] both the [53:02] the is loading. Um [53:06] if we come here we can reload. If we go [53:10] to the network we can see this would be [53:13] a fetch I think. [53:17] We see latest [53:19] posts. [53:27] Look how this is triggering a lot of um [53:33] lot of calls to the rest API. But in our [53:36] case, if we do show latest posts, [53:40] we can see how is triggering this rest [53:44] API request via the [53:48] this code. [53:50] This code is triggering the get records [53:54] is [53:56] fetching the data via a rest API [54:00] request. [54:01] This is the data that is retrieved [54:06] and we are displaying this. So yeah, I [54:09] think is uh [54:12] is fine [54:14] because the use command [54:22] this doesn't [54:26] let me see um con command [54:32] and [54:34] console lock command. Let's see. [54:36] I'm not sure if this returns something, [54:38] but just uh [54:45] no undefined. No, it doesn't return [54:47] anything. [54:49] But we can use it to uh to register a [54:53] command. Okay, this is one option, the [54:57] use command. [55:09] Now, if we only want to register [55:12] commands in the in the block editor, [55:17] we can avoid this thing of um [55:24] creating a DOM element and appending [55:26] that DOM element to [55:28] body and then rendering all React [55:31] component in it because we can leverage [55:36] the existing [55:39] React system already rendered because [55:43] the block editor and the post editor is [55:47] just a big uh react application. [55:51] So what we can do is use register plugin [55:54] and the thing is that the thing is we [55:57] need a way to render a react component. [56:00] If we are in the block editor or in the [56:02] post editor, we can leverage register [56:04] plug-in. If we are not or if we want to [56:07] ensure that this works in any page, we [56:09] cannot h rely on this because for [56:12] example in the in the main admin [56:14] dashboard, this won't work. this won't [56:17] work. [56:21] So if our command is only meant for post [56:24] page 18 experience, we can use the [56:25] register plugin. [56:30] So let's create here um [56:35] copy post content. [56:40] Copy post content. [56:53] So let me see this [56:55] um [57:02] for all [57:07] uh in the admin area [57:15] and this is for all pages in the admin [57:19] area. Um using hooks [57:23] and this is h using [57:28] dispatchers [57:31] using a dispatcher. [57:36] And now we are going to use [57:41] we are going to use four uh pages in the [57:46] block editor [57:51] only in the [57:54] block editor editor [57:59] using um plugin render plugin Register [58:08] plugin. [58:11] Using register plugin and [58:15] copy [58:17] post content to people. [58:29] And what I'm going to do is I'm going to [58:32] import the specific React component and [58:34] I'm going to register it here. [58:37] So copy post content. [58:42] This thing I'm going to do it. [58:46] I'm going to export [58:49] default [58:52] function. [58:56] I'm going to export default default [59:06] default function [59:10] post content and the register plugin [59:15] I'll bring it here. [59:25] So now we have a third way of [59:27] registering commands [59:31] which in this way is [59:38] um we are using the register plugin way. [59:44] Quick question. What's the extended [59:46] proper what's the extended proper use [59:49] case of reducer plug-in? Because if we [59:51] just want to load it in the post editor, [59:55] we can do a screen check in PHP while in [59:57] queue in the JS, right? I'm not inclined [60:00] with the JS at all. If it's not going to [60:02] be used, let me see if I understand [60:04] this. Um, [60:11] if we just want to load it in the post [60:13] editor, [60:18] we can do a screen check in PHP. [60:21] Yeah, I'm not sure how to do that. I I [60:24] it rings a bell, but I'm not sure about [60:26] how this would work and not burden [60:29] client with the JS at all if it's not [60:31] going to be used. [60:36] I guess that there are different ways of [60:38] doing the same. I think that um [60:44] I think that you are right. Um you have [60:48] some example of how to do maybe we can [60:50] try that here. How to do a screen check [60:53] in PHP. [60:57] Um [61:03] I I guess this could be another way and [61:06] another um yeah maybe most more [61:10] effective way or more [61:12] uh performant way of doing that. Not [61:15] loading the JS if we are not in the [61:17] block editor. [61:25] In this way we are just um [61:33] in this way this is also not a bad way [61:36] because register plug-in is only going [61:37] to work. I mean register plug-in is uh [61:40] going to be [61:46] well we are importing the register [61:48] plugin function. Yeah that will be the [61:50] the [61:51] and we yeah and we are importing the the [61:54] JavaScript. Yeah, I know what you mean. [61:56] Yeah, we don't need to load this extra [61:58] JavaScript. That's not going to if [62:01] that's not going to work. [62:05] I believe the register plug-in will be [62:07] useful if there are many plugins that [62:09] are defined in JS and we want to [62:11] selectively add particular commands to a [62:13] specific screens. [62:17] Yeah, I think there's also a specific [62:20] context [62:24] property for commands. [62:31] The context the context of the command [62:40] and it says static and dynamic commands [62:43] can be contextual. This means that in a [62:45] given context, for example, when [62:46] navigating the citator or editing a [62:49] template, some specific commands are [62:52] given more priority and are visible as [62:55] soon as you open the command pallet. [62:57] Also, when typing the command pallet, [62:59] these contextual commands are shown [63:01] above the rest of the commands. Okay, at [63:02] the moment, three contexts have been [63:04] implemented. Site editor, this is the [63:06] context that is set when you're [63:08] navigating the site editor. [63:10] Entity edit is the context that is set [63:13] when you are editing a document template [63:16] template part or [63:18] um or page and block selection edit. [63:22] Yeah, but this h it just prioritizes the [63:26] command. So it doesn't mean that it's [63:29] not going to be executed. Um [63:34] but yeah in a specific screen the [63:37] commands um [63:40] of that context will be [63:43] displayed directly when we uh click [63:46] control K and also um when we look for [63:51] that if there are several results it [63:53] will be the first ones uh to appear [63:58] as the usage of the command pallet [64:00] expands more context will be added. [64:04] Attaching a command or command loader to [64:06] a given context is as simple as adding [64:07] the context property with the right [64:09] context value from the available context [64:10] above to the use command or use command [64:13] loader calls. [64:15] So for example here in our use command [64:22] we can say that this is um [64:30] you're editing a component [64:35] template. [64:37] This is the context that is set when a [64:38] block is selected. Uh okay, let's say we [64:43] want to give this a site editor. [64:46] We can say context [64:53] site editor. [64:56] So this is [65:07] and in the site editor. Okay, if we go [65:11] to the site editor now we have this [65:15] this plugin here. If we go to the site [65:18] editor [65:20] now, if we if we click command K, we can [65:24] see that the the first one that appears [65:26] is the one. And if we um show [65:32] no show, [65:36] we can see that the first one in the [65:40] uh results. But [65:43] if it doesn't match any result, yeah, it [65:45] disappears. But if there are several [65:47] results, it appears the first one. Nice. [65:56] Okay, let's continue with um [66:01] the context pan is cool. Saves a lot of [66:03] travel of else juggling. Yeah, [66:08] there are um I was exploring this [66:11] morning. There are several um issues [66:15] opened in Gutenberg. Let me see if I can [66:17] find some of them. [66:20] Um, [66:23] for example, [66:35] this is one. [66:40] This is the one that I was exploring [66:43] this morning. [66:48] This is another one which I think is in [66:51] the line of what you're saying. [67:04] No, this is another one I was referring [67:07] to. Um [67:16] Yeah, the thing is that as we add more [67:19] custom commands, um there must be some [67:23] ways to [67:25] identify [67:28] like to group them. So this is one [67:30] solution that was proposed like to add [67:34] the like a category or a group or the [67:36] plugin from where this is registered. [67:40] That would be really cool. [67:43] and [67:50] by adding an action [67:53] and the context for each. [67:59] And what else do we have? [68:11] consider more context than [68:21] there was [68:24] yeah this [68:26] issue [68:28] I'm sharing this in the in the chat [68:35] and there was Another one with a lot of [68:38] Let me see if I can find it. [68:44] Ah, this one. [68:46] Command pallet overview. This one. [68:55] Oops. [69:00] Yeah, these are like the different This [69:02] is the one I was I wanted to to share. [69:05] This is like the all the ideas and and [69:08] some of them have been already [69:10] implemented [69:12] but some of the ideas to um for the [69:15] command pallet and some of them they [69:17] have to do with the accessibility [69:20] um yeah for example this one allow [69:23] hooking into command pallet commands and [69:25] command loaders [69:27] and [69:32] and how to group Um [69:37] I would really like something like um [69:41] I wanted to explore that. [69:46] Um, [69:48] so my expiration could be [69:55] um [69:59] having a way to [70:02] well actually my my explanation would be [70:05] if I [70:07] register commands like this that I have [70:10] a way to see a description of the [70:14] command maybe in the form of a tool tip. [70:17] For me, it would be great if [70:20] I [70:23] keep the mouse in a command for maybe [70:28] more than 3 seconds or 5 seconds. I get [70:31] a tool tip here [70:33] explaining [70:36] in detail what the command is uh going [70:38] to do. But in order to do that I need I [70:41] think we need to um this is not [70:44] something that we can do from a plug-in. [70:46] This is something that we need to [70:49] change the main engine of registering [70:52] commands. [70:55] H but this could be this could be a nice [70:58] a nice addition. [71:01] I'd like to explore that. [71:05] Okay, let's continue. um register [71:08] commands only in the block editor. So in [71:11] our exploration we are using the [71:14] register plugin because we know the [71:15] register plug-in is only going to be [71:18] executed in the [71:22] in the post um [71:26] in the post editor. Also here we are [71:29] doing um [71:36] we are doing some um [71:39] some filters [71:43] but yeah first let's [71:45] let's see if this is registered [71:47] properly. [71:50] We can go [71:53] here [71:55] and we can do [71:59] copy post content to the clipboard. And [72:02] now if we come here we have the the [72:06] content nice. [72:11] So how we can do that? So we have um [72:16] used a hook but in this case we don't [72:19] need to emulate a react um because it [72:23] doesn't make in this case it doesn't [72:25] make sense that we copy the content from [72:28] the admin dashboard. This command only [72:31] makes sense here and what we can do is [72:34] add a context like we did with the other [72:37] thing. Maybe we can also do here context [72:40] edit post because in this case it makes [72:42] a lot of sense. So maybe reload [72:49] and we have commands to go to the to the [72:54] code [72:55] open code editor. [72:58] And here we have a command now to copy [73:02] the content to the clipboard. [73:09] What else? Uh [73:11] now that this is is correct post let me [73:14] check the documentation again. [73:20] Let me check the documentation. [73:23] No is entity edit [73:28] context entity edit. [73:32] Now, in theory, if we [73:40] No. [73:57] If I click [74:01] control K or command Kh [74:15] this is uh [74:18] the context that is said when you are [74:20] editing. Okay. So template template part [74:22] or page but there is no entity edit for [74:24] a post. That's interesting. [74:28] That's interesting. [74:31] So let's try this with a page. [74:36] If we go to a page [74:43] and we edit a page like for example this [74:46] one. [74:49] Um, [74:59] so it's probably registered, but it's [75:01] not really [75:04] the context here is not really working. [75:10] And if we go to a template [75:22] And here, so it's not really a page. [75:26] It's only templates. [75:29] It's only a template because here is [75:32] indeed [75:37] being displayed as um [75:41] so the context is working because it's [75:42] being displayed as the default or the [75:44] most important command for this context. [75:49] But if we go to page or post is not [75:51] doing that. [75:57] So yeah, that's good to know. and block [75:59] selection edit. This is the context that [76:01] is set when a block is selected. [76:08] Are there more contexts? Okay, let's [76:10] check that because maybe maybe this is [76:12] not updated. [76:15] If we come here to Gutenberg block [76:17] selection edit [76:20] this readme [76:22] just set command context. [76:28] So yeah, right now there are only this [76:29] one. Site editor, entity edit, [76:36] a canvas edit. [76:42] Um I'm going to ask [76:50] um can I ask copilot about this? [77:01] Um, [77:05] in which um is [77:08] will this be uh triggered in when [77:13] editing a post [77:16] or page? [77:38] Okay, we need to investigate further. [77:41] It's a rabbit hole. So, let's uh let's [77:45] avoid it. [77:48] Okay. So this is the the third case. We [77:52] are [77:53] we are [77:55] registering a [77:58] command only for the block editor which [78:02] can be either the [78:05] post editor or the site editor. [78:18] And we are also leveraging the notice [78:25] store. Okay. To start closing things. [78:31] So here if I do [78:34] copy [78:37] post content copied to the clipboard. [78:45] So it's very it's very simple. We can we [78:48] are leveraging this um [78:51] native uh methods of the the browser [78:54] navigator clipboard [78:56] write text content and the content we [78:59] are getting it for from a selection to a [79:04] specific uh store which is core editor. [79:07] But maybe we can also say here um import [79:12] store as editor store and maybe we can [79:16] do also this here. So when we reload and [79:21] we say [79:23] copy post uh from clipboard [79:28] we have this here. Nice. Nice. [79:37] Okay, this is a third case. [79:47] So this um [79:51] command is registered for all the [79:57] places where register plug-in works. [80:00] That can be site editor, post editor, [80:04] page editor, whatever. But what if we [80:07] want to be more specific and we want to [80:13] maybe [80:16] um [80:19] register the command or or make the [80:22] command available only if we are in the [80:25] the post editor for example. And for [80:28] that we have this example here which we [80:32] are to comment right now. [80:43] This is block usage model. [80:51] Block usage [80:59] And what I'm going to do is [81:02] export the full function. [81:15] We import the React component and we [81:18] register the plug-in [81:23] only in the block editor. This won't [81:26] work in the site editor. So how are we [81:28] doing this? [81:33] So the React component we are rendering [81:37] is this one and the strategy is similar. [81:41] We have a model window which we are [81:44] controlling [81:46] with [82:08] this open true. And we do the same. We [82:11] just um trigger this block usage model [82:14] or not depending on the value of the is [82:17] open. [82:19] And we close it with the set is open [82:22] false. Okay. And block usage model is [82:25] this one that receives the on close. [82:30] We get the [82:33] the blocks [82:36] of the current uh document. [82:41] And we what what we want to do is to [82:45] count the use of blocks in the current [82:49] uh document. So for that we have this [82:52] logic that goes through each block [82:57] and just counts the [83:05] the times each blocks used across the [83:08] document. And then we [83:10] um [83:12] return the model [83:17] and they use [83:29] and the use block usage [83:32] command. [83:53] Show block usage. [83:57] Ah, okay. And this is a command loader [84:00] and they use common loader [84:04] and let me see use command loader. [84:10] Use command loader. [84:20] and use command loader [84:30] and [84:32] this command [84:36] attach a command loader to the command [84:38] pallet used for dynamic uh commands. [84:47] So maybe in this case [84:56] we can do [85:06] I know in this case we're using a a [85:08] model [85:09] and the block usage. [85:13] Okay, so use block usage command. This [85:16] is the the hook [85:18] that register the commands. [85:42] So we register the command. [86:00] Well, this is I don't think this is [86:02] really well structured. [86:04] I need to improve this. [86:07] Okay, let's analyze this. [86:12] We do a selection using the use select [86:16] hook and we pass the select um method [86:20] and we get different information on [86:22] different stores like the post type of [86:24] the post type, the post ID from editor [86:28] store. [86:31] um [86:33] the post type object [86:36] from cor store and we return if we are [86:39] in the post editor [86:46] or not. The viewable. This is a property [86:48] that is interesting [86:51] because yeah, the viewable property in [86:55] the snippet above code determines [86:57] whether the current post type has a [87:00] public facing edit screen in the [87:02] WordPress admin interface. [87:05] Yeah, because there are several post [87:06] types that doesn't have um [87:10] for example global styles I think is a [87:12] is a post type. [87:15] Um [87:18] I think I have a guest somewhere [87:22] to see um [87:28] the different post types. [87:37] Custom blocks registered. [87:39] Get all items. All post types. [87:50] some block registers. [87:52] No, I don't have here. [87:55] Um, [87:57] but yeah, there are different post [87:58] types. [88:05] But for example, post types that are [88:08] viewable [88:14] Exactly. Yeah. [88:19] Yeah. Yeah. No, it's um Yeah. Says it [88:24] shows whether it has an editor screen [88:26] exactly and not whether we are currently [88:28] the in the editor screen exactly. So um [88:38] we can select the current uh post type, [88:41] the post ID [88:44] and [88:46] but the post type can not be something [88:49] that can be viewable. [88:52] Um [88:54] so with this we are in theory we are [88:58] restricting the access to just uh [89:02] editing a post or editing a page. This [89:05] good [89:07] exclude um [89:15] a template or template part [89:18] viewable [89:20] like whatever we are editing it can be [89:22] viewable directly in the front end [89:24] that's that's how I understand it [89:26] which can be only our posts or pages but [89:30] for example if we edit our template or [89:32] our template part that cannot be [89:35] directly viewed. This is used as an [89:37] internal [89:39] um [89:41] internal piece for generating the final [89:44] render of the page. [89:46] Okay. [89:51] Um [89:54] select from cross store if the user can [89:56] update. Okay. If the user can edit posts [90:00] and the we are in either a post or a [90:04] page, [90:06] we register the command [90:15] commands push. [90:21] Okay, this is a bit uh different because [90:24] command loader [90:26] receives an array of commands even when [90:30] we are here only just adding one command [90:35] commands push. [90:37] Um [90:42] and what we are doing here is open model [90:51] Uh yeah, [90:56] this works but I don't really like the [90:58] how this is structured because there are [91:00] some dependencies here depends on this [91:02] and this is set to null. [91:08] Um, [91:11] I need to think of a better way doing [91:14] this. How can we improve this? [91:20] This is the hook that is [91:24] being called here. [91:32] And the callback [91:41] And the call back. [91:48] The callback needs to [91:53] needs to execute something. Um [92:01] but we are here in a we are in a react [92:05] environment. So [92:10] maybe [92:12] we can um [92:21] is there a way to to render a React [92:24] component? [92:26] Yeah, we don't really. So this is a [92:29] hook. [92:33] Okay, let's ask um cloud code about [92:36] this. Let's see if we can if we can [92:39] improve this code. Okay. [92:44] Um [92:50] okay, [92:52] I'm going to be honest with you, CL. Um [92:54] I don't like the way this code is [92:59] structured. [93:03] Because um [93:09] because block [93:13] is a comment. Um [93:16] sets [93:18] the value [93:21] of open model [93:26] which is [93:27] initialized. [93:29] initialized [93:32] outside of the function [93:36] and [93:46] I'm going to try a new toy that is [93:49] called monologue. [93:54] Okay. Monologue [93:56] is the system [94:01] we can use two. Let me see. [94:09] Okay. [94:11] I don't like the way this code is [94:14] structured because for example the block [94:17] usage command function [94:21] sets the open model [94:24] function that is initialized [94:27] outside of the function [94:31] and also is used inside of the callback [94:38] used in the object [94:43] added to the command array. So is there [94:46] any way we can [94:51] make [94:54] this better. [94:59] Okay, let's see if um [95:03] which ideas. [95:13] Yeah. [95:19] Uh, use context using React context. [95:40] Okay. [95:51] Um, use context. [96:08] Uh, okay. [96:12] So, use context [96:19] Block usage model. [96:31] Open model. [96:45] Okay. Block usage context uh provider [96:50] value set is this open true. [97:12] Okay. use. Well, first let's see if this [97:14] works. [97:20] Let's see if this works. [97:36] So here it's fine that it's not um [97:40] available. But if we go to a page, it [97:43] should be there. [98:01] Um, or maybe say only in the post. Let [98:04] me see. [98:18] Show block usage. [98:29] Yeah. No, this is not working. [98:32] Open model is not a function. [98:46] Isn't there a way to go back? [99:03] So if we go we come here [99:10] show blog usage [99:15] and if we go to a page [99:23] we can show block usage [99:31] only in the Post [99:41] only. [99:43] Okay, this is this part. Can user edit [99:46] post [100:04] is post editor. [100:14] Okay, let me see if I console log. [100:25] Console log. [100:55] post type page. [101:13] Post type view is true. [101:44] If I do console log disposiator and can [101:48] use edit post, [102:01] can you That edit post here is [102:03] undefined. [102:13] Uh I can just update. [102:21] So the first one is true but it's [102:23] because of the second one. So in the [102:25] page [102:29] okay it's because of the second one but [102:31] if we come here [102:42] okay [102:49] can youer update [102:53] post. [102:58] Um, [103:08] I don't really understand this. Can you [103:12] say edit post? [103:17] Why this is only triggered in the [103:20] post editor as true? [103:25] So this is clear. This is that we are in [103:28] a post type that has in a post type. [103:39] We are in a post type that has a [103:44] um [103:46] an screen. Yeah. viewable, [103:49] but [103:52] the post ID, [104:01] let me see. Um, [104:12] okay. And why this return [104:18] Okay. Why can user edit post return true [104:23] only when we are editing a post in the [104:27] post editor [104:30] because it seems that we are checking if [104:34] the user can update the [104:37] post [104:39] but that's also the case for a page. I [104:44] mean the user can also edit a page. [104:47] So yeah, can you explain me why can user [104:50] edit post returns true only [104:56] when we are in the post editor? We are [104:59] editing a post. [105:09] I don't know if clo [105:17] okay. This specifically checks if the [105:19] user can update posts the post type not [105:22] pages. Okay. That's why it returns true [105:25] only when editing a post. The issue is [105:27] that can user [105:30] it's hard to check the post post when [105:32] you are editing a page [105:39] when you editing. [105:55] Okay. Yeah. Uh I don't understand very [105:59] well the logic behind this. Uh can user [106:03] Let me see if Let's dive in a little bit [106:07] more. If we go to the [106:11] we go well actually we can come here and [106:14] say locator handbook [106:18] and we can look for can user [106:22] which is incore data. [106:33] returns whether the current user can [106:35] perform the given action on the given [106:37] red resource. Calling this may trigger [106:38] an options request of recip. [107:12] Okay. Okay. I need to think more about [107:15] this. The thing is that with this filter [107:18] we limit only the [107:21] addition in the post editor [107:26] and um only in that case we are [107:29] registering this because this is the [107:32] hook that returns this object. [107:36] of commands and it's loading false. [107:40] So just common loader is [107:45] and with that command register [107:54] we uh block usage model. [108:11] We trigger this [108:15] and um [108:23] we trigger this. Um, [108:28] okay. I need to think more about this [108:30] example to see if uh I want to clarify [108:34] two things. I want to clarify this. [108:37] I'll think more about this and I also [108:40] want to clarify [108:42] how this hook [108:45] is interacting with this model window [108:48] because right now it's not super clear [108:50] to me. Okay, [108:52] perfect. I think we can [108:56] uh finish the session. [109:00] Hope it's been helpful. [109:04] And yeah, I think this is the last [109:06] session of the year because I'm going on [109:08] holidays. [109:10] So [109:14] yeah, let me give you a reminder of [109:19] my YouTube channel. [109:23] because [109:25] I have done a lot of streams this year. [109:30] There you have all the streams that I [109:32] have done. [109:35] And also if you go to [109:39] my streams [109:43] repository [109:45] there you can find all the details [109:50] all the details of the [109:54] streams that I have done during this [109:55] year that you can find the resources [109:57] that we've been using the [110:02] the projects [110:04] the different diagrams and all of that. [110:09] So yeah, we can call it a year. Um hope [110:12] you have a great holiday that you take [110:15] rest and [110:19] and yeah uh see you next year. Let me [110:23] know via Twitter or you can also [110:28] leave your ideas here in discussions. I [110:30] have a conversation open for ideas for [110:33] streams. [110:34] So, leave here your ideas for the [110:37] streams in case you would like me to [110:41] to cover some specific topic. Okay, [110:44] guys. Hope you're doing fine and yeah, [110:46] see you see you all next year. Bye.  [[3. Resources/Readwise/Full Document Contents/Articles/Creating Commands for the Commands Palette|Full Document Contents]] ## Document Notes --- tags: #wordpress #command-palette #gutenberg #developer-tools #react-hooks author: Mario Santos source: YouTube Live Stream reference: [https://www.youtube.com/watch?v=ETqUp0UXH0k] date created: 2024-12-19 10:30 --- # 🏷️ Title: Creating commands for the Commands Palette ## 🧰 Action Inbox - [H1] Implement handbook quick access commands — use WP.data.dispatch for simple navigation #commands - [H2] Create modal-based commands with React hooks — mount React components manually #react-integration - [H3] Add contextual commands for block editor — use register_plugin for editor-specific features #block-editor ## 🧭 Table of Contents - [[#📝 Summary]] - [[#📖 Main Content]] - [[#🗒️ Notes]] - [[#📚 References]] - [[#🗣️ Paraphrase]] - [[#📰 Newsletter]] - [[#✅ Action Items]] - [[#🧪 Hypotheses]] - [[#📊 Methodology]] - [[#❓ Questions]] - [[#🔮 Future Research]] - [[#💡 Implications]] - [[#🧠 Learning Styles Assessment]] - [[#📊 Accessibility Assessment]] - [[#🌍 DEIB Assessment]] - [[#✅ Logical Validity]] - [[#🛡️ DARVO Analysis]] - [[#🎯 Conclusion]] ### 🔗 References - [WordPress Developer Blog](https://developer.wordpress.org/news/) - [Mario's GitHub](https://github.com/WordPress) - [Stream Resources Repository](https://github.com/WordPress/streams) ## 📝 Summary - WordPress 6.9 expanded command palette availability from block editor only to entire admin area - Three main approaches for creating custom commands: WP.data.dispatch, React hooks with manual mounting, and register_plugin for editor contexts - Commands can be contextual (site-editor, entity-edit, block-selection-edit) for better UX prioritization - Challenges exist with React hooks requiring React environment while admin pages may lack this ## 📖 Main Content WordPress 6.9 introduced a significant expansion of the command palette, making it available throughout the entire admin interface rather than just within the block and site editors. This creates new opportunities but also technical challenges for developers creating custom commands. The core challenge stems from WordPress's data layer architecture. Many helper functions for command creation are React hooks that require a React environment to function. However, traditional admin pages outside the editor don't provide this React context, necessitating creative solutions for universal command compatibility. Three distinct approaches have emerged for command creation, each suited to different use cases and technical requirements. The choice depends on where commands need to function and what level of interactivity is required. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/ETqUp0UXH0k?t=0) — [H1] Session introduction and context - Key idea: Live coding session exploring command palette development - Evidence: "WordPress 6.9 the command palette is available everywhere" #### ⏱️ [05:23](https://youtu.be/ETqUp0UXH0k?t=323) — [H2] Command palette expansion in WordPress 6.9 - Key idea: Command palette now works beyond just editors - Evidence: "Before WordPress 6.9 the common palette was only available in the block editor" #### ⏱️ [08:45](https://youtu.be/ETqUp0UXH0k?t=525) — [H3] React hooks challenge outside editor context - Key idea: Hooks require React environment not always available - Evidence: "These hooks can only be executed inside React components" #### ⏱️ [12:30](https://youtu.be/ETqUp0UXH0k?t=750) — [H1] First approach: Direct dispatch method - Key idea: Use WP.data.dispatch for simple command registration - Evidence: "We can use the dispatch method of WordPress data" #### ⏱️ [18:15](https://youtu.be/ETqUp0UXH0k?t=1095) — [H2] Demonstrating handbook navigation commands - Key idea: Register commands to access WordPress handbooks directly - Evidence: "Commands to access directly the handbooks directly from the command palette" #### ⏱️ [25:40](https://youtu.be/ETqUp0UXH0k?t=1540) — [H2] Redux store inspection for commands - Key idea: Command store visible in Redux DevTools - Evidence: "One of the stores we have is called commands" #### ⏱️ [32:10](https://youtu.be/ETqUp0UXH0k?t=1930) — [H1] Second approach: useCommand hook with manual React mounting - Key idea: Create DOM element and render React component for hook usage - Evidence: "We need to find a way of mounting manually a react container" #### ⏱️ [38:50](https://youtu.be/ETqUp0UXH0k?t=2330) — [H2] Latest posts modal command demonstration - Key idea: Modal interface for browsing and navigating to recent posts - Evidence: "We can go to the specific post and we can show latest posts" #### ⏱️ [45:20](https://youtu.be/ETqUp0UXH0k?t=2720) — [H3] Using useSelect hook for data fetching - Key idea: Leverage WordPress data layer for dynamic content - Evidence: "I'm using the useSelect which returns the post and is loading" #### ⏱️ [52:15](https://youtu.be/ETqUp0UXH0k?t=3135) — [H1] Third approach: register_plugin for editor contexts - Key idea: Use existing React environment in block editor - Evidence: "If we are in the block editor we can leverage register plugin" #### ⏱️ [58:30](https://youtu.be/ETqUp0UXH0k?t=3510) — [H2] Contextual commands and prioritization - Key idea: Commands can be contextualized for better UX - Evidence: "Commands can be contextual. This means that in a given context some specific commands are given more priority" #### ⏱️ [64:45](https://youtu.be/ETqUp0UXH0k?t=3885) — [H2] Copy post content command implementation - Key idea: Editor-specific command using clipboard API - Evidence: "navigator clipboard write text content" #### ⏱️ [71:20](https://youtu.be/ETqUp0UXH0k?t=4280) — [H3] Block usage analysis command - Key idea: Dynamic command loader for analyzing block usage - Evidence: "useCommandLoader used for dynamic commands" #### ⏱️ [78:10](https://youtu.be/ETqUp0UXH0k?t=4690) — [H2] Context restrictions and user permissions - Key idea: Commands can be restricted based on editing context - Evidence: "canUser edit post returns true only when editing a post" ## 📚 References - [WordPress Command Palette Documentation](https://developer.wordpress.org/block-editor/reference-guides/data/data-commands/) - [Gutenberg Repository](https://github.com/WordPress/gutenberg) - [WordPress Data Package](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/) ## 🗣️ Paraphrase - WordPress 6.9 brought command palette functionality to all admin pages, not just editors, creating new development opportunities - Three main patterns exist for command creation: simple dispatch calls, React hook mounting, and editor plugin registration - Commands can be made contextual to appear first in relevant editing environments like site editor or block selection ## 📰 Newsletter **WordPress Command Palette Gets Major Expansion** WordPress 6.9 has opened exciting new possibilities for developer productivity with the command palette now available throughout the entire admin interface. This expansion means you can create custom commands that work everywhere from the dashboard to post listings. **Key Development Approaches:** - **Simple Navigation**: Use `WP.data.dispatch()` for basic commands like handbook links - **Interactive Modals**: Mount React components manually for complex interfaces - **Editor Integration**: Leverage `register_plugin()` for block editor specific features The contextual command system is particularly clever - your editor commands automatically get priority when relevant, creating a more intuitive user experience. **Next Steps**: Start with simple navigation commands using the dispatch method, then explore React integration as your needs grow complex. Resources: [Developer Docs](https://developer.wordpress.org/), [Command API Reference](https://developer.wordpress.org/block-editor/reference-guides/data/data-commands/), [Live Coding Archive](https://youtube.com/@mariosantos) ## ✅ Action Items #### WordPress - Core: Investigate additional command contexts beyond site-editor, entity-edit, block-selection-edit - Core: Consider command grouping/categorization for better organization - Core: Explore command descriptions and tooltips for enhanced UX - Documentation: Create comprehensive command palette development guide - Documentation: Document screen checking in PHP for conditional JS loading #### Community - Contributors: Share command palette plugins and use cases - Contributors: Test command palette accessibility across different admin contexts - Maintainers: Evaluate command palette integration opportunities in existing plugins ## 🧪 Hypotheses - Command palette usage will increase developer productivity in WordPress admin workflows - Contextual commands will reduce cognitive load by showing relevant options first - Manual React mounting approach will become standard pattern for complex commands - Screen-based PHP loading checks will improve performance over universal JS loading ### 📊 Methodology - Create test commands using all three approaches and measure implementation complexity - User testing to compare navigation efficiency with and without custom commands - Performance analysis of React mounting vs dispatch methods - Accessibility testing across different admin page contexts ### ❓ Questions - How can we improve the architecture for commands requiring React hooks outside editor contexts? - What additional command contexts would be most valuable for developers? - How should commands be grouped or categorized as the ecosystem grows? ### 🔮 Future Research - Command palette performance optimization techniques - Integration patterns with existing WordPress admin workflows - Accessibility best practices for modal-based commands ### 💡 Implications - Practice: Command palette becomes essential skill for WordPress developers - Policy: May influence WordPress admin interface design patterns - Security: Custom commands need careful permission checking and validation - Education: Training needed on React integration patterns outside traditional editor context ### 🧠 Learning Styles Assessment Reading level estimate: Grade 12 #### 👀 Visual learners - Present: Code examples, command palette screenshots, Redux DevTools inspection - Improve: Architecture diagrams showing different command registration flows #### 🔊 Aural learners - Present: Live coding explanation with verbal narration - Improve: Audio summary of key concepts and decision points #### 🗣️ Verbal learners - Present: Clear explanations of technical terms, API analogies - Improve: More real-world use case stories and examples #### 🧩 Kinesthetic learners - Present: Live coding session, copy-paste examples, hands-on demonstrations - Improve: Step-by-step implementation checklists #### 🧠 Logical learners - Present: Clear approach categorization, decision trees for method selection - Improve: Flowcharts for when to use each approach #### 🧑‍🤝‍🧑 Social learners - Present: Live chat interaction, community resource sharing - Improve: Group coding exercises, command sharing gallery #### 🧘‍♀️ Solitary learners - Present: Self-contained code examples, individual exploration - Improve: Self-assessment quizzes on approach selection #### 🌿 Naturalistic learners - Present: Organic development flow, iterative problem-solving - Improve: Ecosystem thinking about command relationships ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Code structure with proper headings - Improve: Alt text for code screenshots, ARIA labels for live demo #### Keyboard navigation - Present: Command palette designed for keyboard-first interaction - Improve: Ensure all demo commands are keyboard accessible #### Contrast and readability - Present: High contrast code examples - Improve: Check video streaming contrast levels #### Text resizing and reflow - Present: Code examples scale appropriately - Improve: Ensure video player controls remain accessible when zoomed #### Media and captions - Present: Live verbal explanation - Improve: Auto-generated captions, transcript availability #### Forms and interactions - Present: Command palette interactions well-labeled - Improve: Error state handling in custom commands ### 🌍 DEIB Assessment #### Cultural breadth - Present: English-language focused but open to global participation - Improve: Multi-language command examples, internationalization discussion #### Inclusive language - Present: Technical terms explained, jargon defined - Improve: Plain language summaries, avoid assumptions about prior knowledge #### Neurodiversity support - Present: Clear structure, consistent pacing - Improve: Content warnings for rapid code changes, pause points #### Representation - Present: Single presenter but encouraging community participation - Improve: Guest perspectives, diverse use case examples #### Psychological safety - Present: Encouraging questions, admitting uncertainty - Improve: Explicit welcome for all skill levels ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Clear categorization of three command approaches based on technical constraints - Inductive strength: Examples build from simple to complex implementations - Causal reasoning: Links technical limitations to architectural solutions - Analogical strength: Good comparison between editor vs admin contexts #### Fallacies - None identified: Technical explanations are well-grounded in code examples #### Tone of voice - Overall tone: Collaborative and exploratory, encouraging experimentation and learning ### 🛡️ DARVO Analysis - Deny: Not applicable - technical content - Attack: Not applicable - technical content - Reverse victim/offender: Not applicable - technical content - Emotional cues and rhetoric: Positive, encouraging tone promoting learning and exploration ## 🎯 Conclusion WordPress 6.9's expanded command palette creates significant opportunities for improving developer and user workflows throughout the admin interface. The three main approaches - direct dispatch, React hook mounting, and register_plugin integration - each serve specific use cases and technical requirements. For developers, start with simple navigation commands using the dispatch method, then progress to React integration as complexity needs grow. The contextual command system provides elegant UX prioritization that should be leveraged thoughtfully. The broader implications suggest command palette development will become an essential skill for WordPress developers, potentially influencing how we design admin interfaces and user workflows across the entire ecosystem. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad ### [H1] Command palette expansion enables universal admin commands > [!quote] [Creating commands for the Commands Palette](https://www.youtube.com/watch?v=ETqUp0UXH0k) by [[Mario Santos]] via [[YouTube]]. Published 2024-12-19. Accessed 2024-12-19. > "WordPress 6.9 the command palette is available everywhere" Significant expansion from editor-only to admin-wide availability. [view highlight](https://youtu.be/ETqUp0UXH0k?t=323) #wordpress #command-palette ID:rw_cmd_palette_expansion ### [H2] React hooks require environment outside traditional admin > [!quote] Creating commands for the Commands Palette > "These hooks can only be executed inside React components" Core technical challenge for universal command compatibility. [view highlight](https://youtu.be/ETqUp0UXH0k?t=525) #react #wordpress-architecture ID:rw_hooks_challenge --- ### 🔖 Atomic Split Pad (Zettel Candidates) #### [Z1] Three patterns exist for WordPress command registration - Simple dispatch, React mounting, register_plugin approaches each serve different contexts - Pointer to 12:30 timestamp and implementation examples - Links: [[WordPress-Command-Palette]] [[React-Integration-Patterns]] #### [Z2] Contextual commands improve user experience through prioritization - Commands appear first in relevant contexts like site-editor or entity-edit - Pointer to 58:30 timestamp and context demonstration - Links: [[User-Experience-Design]] [[WordPress-Admin-Interface]] --- ### ✏️ Fleeting Queue - [F1] Explore command grouping solutions for growing ecosystem — GitHub issues discussion #fleeting #commands - [F2] Test --- ## Full Transcript [04:01] and we are live. [04:05] Let me send a message [04:08] and then we can start with the session. [04:15] In the meantime, please say hi if you [04:17] are there. [04:44] Okay, [04:49] we are connected and the [05:02] I'm sharing this session [05:05] in a slack [05:07] child. [05:25] Okay. [05:29] Yes. So people [05:31] are aware of this. [05:41] And now I'm ready. [05:44] Okay, welcome [05:47] everybody to another session, [05:52] another stream, [05:55] another stream where um [05:59] I usually just work in public about [06:02] stuff and I share what I have learned [06:04] during the the week and yeah, it's like [06:08] an open space so anyone can connect and [06:12] ask questions. [06:14] and yeah maybe just chip in [06:19] how [06:20] other developer is working about [06:22] something. [06:24] So today I want to explore a bit further [06:30] the command palid and the creation of [06:33] commands. [06:34] I've been [06:37] exploring this a little bit in this past [06:41] uh few days. [06:44] And I'm actually in the middle of [06:46] exploring some stuff. So I want to share [06:48] that with you and maybe work on these [06:49] things together and see what we can [06:54] what we can do or if we can solve [06:56] something or if we can create some uh [06:59] new commands. I also [07:03] published this article a few weeks ago [07:12] because I started this exploration. I [07:14] actually did another stream [07:19] at the yeah a few weeks ago in Spanish [07:23] and I struggle with a few things [07:26] so I decided to write about it. The [07:29] thing is that um now in WordPress 6.9 [07:36] the command pallet is um it's available [07:40] everywhere. Before [07:43] WordPress 6.9 [07:46] the common pallet was only available in [07:49] the block editor in the post editor or [07:53] in the site editor but now it's [07:56] available um everywhere. So that comes [08:01] this brings new challenges. Um [08:05] the main challenge I faced is that when [08:08] you create commands there are some [08:11] helpers to create these commands but a [08:13] lot of these helpers are hook are hooks [08:17] and these hooks can only be executed [08:20] inside React components. [08:22] And the thing is that outside of the [08:25] post editor [08:27] there are no usually uh there's no react [08:30] environment. [08:32] So we if we want to use those hooks and [08:36] those hooks are useful if we want to [08:39] interact with a store or something like [08:41] that. We need to find a way to [08:45] make or [08:47] command to work in [08:52] all the the contexts in all the [08:56] environments. It should work either in a [08:59] page that has a react [09:04] um [09:06] environment and in pages that doesn't [09:08] have that react environment. [09:10] Um so yeah, I did an exploration. I came [09:14] up with a few solution. I would like to [09:15] review them to see if we can improve the [09:18] the approach on each of them. [09:22] and [09:24] okay the chat sorry if I don't answer in [09:28] the chat because the chat is not [09:30] connecting here let me see if I can [09:34] solve this somehow [09:36] and now I can see the chat [09:40] hello [09:46] so yeah if you are there say hi say [09:52] from where you are connecting. [09:57] And yeah, if you have any any questions [09:59] about this um [10:02] this whole thing of creating commands [10:05] for the for the command pallet. [10:11] Okay. So let's start by [10:15] I'm going to show what I have so far of [10:19] the expiration that I'm doing and I'm [10:22] also in the middle of checking a pull [10:24] request that has to do with this [10:26] creation of commands. So maybe we can [10:28] explore that together and then maybe we [10:31] can uh we can go through these different [10:35] examples and [10:38] and just talk about them. [10:41] I think that what I'm going to do is I'm [10:43] going to share. Let me see if I where do [10:48] I have this? I think it's here. [10:54] Yeah, this is the project that I have. [10:58] And this is the article. [11:00] So, yeah, let's start. I think we can [11:03] start here by [11:06] or maybe we can check the the [11:07] documentation a little bit. [11:15] Uh, I have to. Okay, let me see. [11:20] I'm not logged in here. [11:25] Okay, let me [11:29] um [11:35] shouldn't I have Let me see. [11:39] uh because I'm not logged in. Well, that [11:42] can be solved very easily. [11:45] I want to access this uh Twitter because [11:49] I have here some [11:54] resources. Well, actually I have them [11:55] here as well. Yeah, that's what I wanted [11:58] to [12:00] to share with you. [12:04] like these resources. I'm going to share [12:07] them in the [12:10] in the chat. Well, by the way, [12:15] um [12:17] I want to [12:19] mention that I have [12:22] published a new post in the developer [12:25] blog which I think is uh is is really [12:30] interesting because it [12:34] it talks about how to combine like [12:36] different APIs in WordPress to create [12:39] effects or to create any behavior you [12:43] want to to implement. And this is a [12:47] really interesting use case because it [12:49] covers [12:51] both APIs [12:53] that affect the edition experience and [12:57] also the user experience. [13:00] So we are [13:04] we are implementing [13:06] um [13:08] the experience in both sides of the [13:11] equation. [13:13] So the effect is this. [13:17] So we have for example a series of words [13:21] separated by commas and I can select [13:23] that text as a format and this is the [13:26] addition experience. I can just okay I [13:28] want this to be a word switcher effect. [13:31] So each word will be detected will be [13:34] isolated and will be presented in the [13:36] form of this effect. So this is what [13:39] this article is about and this um effect [13:45] is done by leveraging the format API, [13:50] the interactivity [13:53] API, HTML API and also using JavaScript [13:57] modules which we need to register and we [14:00] which we need to build as a module. So [14:03] there are some um [14:06] some things to be taken into account and [14:09] all of that is explained in this [14:11] article. So yeah, I really recommend you [14:14] I'm going to share this in the in the [14:17] chat. Whoops. I'm going to [14:21] share this in the chat. [14:25] And without further ado, we can move on [14:29] with the with the command pallet API. [14:34] So the command pallet ai command pallet [14:37] in case you don't know what I'm talking [14:38] about is uh this when we are in the [14:42] admin and now the in WordPress 6.9 the [14:45] command pallet is available everywhere [14:47] which means that is available here. This [14:50] wasn't possible in WordPress 6.8 eight. [14:54] And now since WordPress 6.9 this is um [15:00] this is enabled and we can move around. [15:04] We can go through we can go to a [15:08] specific posts or specific pages [15:12] or we can [15:14] um go [15:17] directly to a specific uh template. [15:22] And from here maybe we can go to um [15:29] we can go to editor [15:33] appearance editor [15:36] and yeah we can move around and the cool [15:39] thing is that we can also create our own [15:42] um we can create our own commands and [15:46] this is what we are going to explore [15:48] today. [15:50] For example, one way to create a command [15:53] is using this uh use command [15:58] which is a React hook. And this React [16:00] hook needs to be executed inside of our [16:04] React component. And that React [16:05] component needs to be um hydrated [16:09] somehow into the DOM. And we need to [16:11] find a way to to to do that. [16:21] So let's explore this a little bit. Um [16:26] what I want to [16:32] what I want to move here is the studio [16:34] where I have this [16:36] um [16:38] actually [16:40] let's create a new site site um commands [16:46] valid [16:47] exploration [16:53] I'm going to add the site. I'm going to [16:56] make it [16:59] I want to create a um [17:04] like a local domain and we can do this [17:08] here. If I edit site custom domain [17:12] and commands valid expiration, I want to [17:14] enable https. [17:25] And with that [17:27] what I want to do is I want to [17:32] link the project that I have here under [17:34] the folder common p valid exploration. [17:38] So to do that, I'm going to come here. [17:46] Um, [17:48] running. [17:52] I think it's because I created the [17:55] domain. After that, I need to stop it [17:59] and launch it again. [18:03] Start. [18:09] Okay. And now we have the site. [18:14] And if I go to overview to iTerm, [18:22] I'm going to go to uh to the plugins [18:25] folder [18:27] and I'm going to link the [18:31] the project where I have all this [18:33] initial exploration. [18:36] Uh it's called commands uh valid no [18:41] exploration command. [18:44] valid exploration. [18:48] So now that I have this project here, I [18:52] should have it in plugins [18:54] and I should be able to activate it and [18:58] this [19:02] um register this custom commands that I [19:05] have created. So these are commands to [19:07] access directly the the handbooks [19:09] directly from the from the command [19:11] pallet. So for example, if I click here, [19:13] I go directly to the blockator handbook. [19:16] Or if I click here, I go directly to the [19:19] theme handbook. [19:22] And the nice thing is that um I can look [19:26] I can search for the words in the the [19:30] title, [19:32] but also I can add some keywords. For [19:35] example, whenever I search for dogs, [19:38] these results appear. So how have I done [19:41] this? Um [19:47] so this is how this is done. This is I [19:50] think the easiest way to to register um [19:53] a command. [20:06] It seems that is offline. [20:11] I'm not sure if I'm streaming right now [20:13] or not [20:17] because it appears offline OBS. Let me [20:21] quickly check this. If I go to YouTube [20:27] and I go to my channel. [20:37] Yeah, it seems that this is streaming. [20:41] Okay. [20:44] Okay. Yeah. Back again. [20:47] Back again. [20:50] Yeah, this OBS software is is really [20:52] strange. I [20:55] I don't fully understand it to be [20:57] honest. So, every from time to time I [21:00] have like these little surprises that I [21:02] have to I have to deal with. Well, [21:05] anyway, [21:07] um [21:08] how these commands are registered. So, [21:11] we can use the [21:14] dispatch method of WordPress data. Um, [21:21] WordPress data is the data layer of the [21:27] of the [21:30] stores that centralize the the data. [21:37] If we come here, [21:40] expect [21:49] Okay, let me I'm going to close [21:53] all the [22:03] I think is if I come here to inspect and [22:06] I go to redux [22:09] here we can see the stores. So the [22:12] stores are [22:14] available. If we come here to the [22:16] console and we check Dolbyp, [22:21] we can see that there are a lot of [22:24] objects and [22:28] shared under the Dolby VP global object. [22:31] So we can we have access to the API [22:34] fetch uh function but also to the blocks [22:39] object the block editor and all of them [22:42] they have a thing called store [22:49] and this store is the one that we can uh [22:54] pass to [22:56] Dolbyp data [23:01] um [23:03] to dispatch actions or to select data. [23:08] If we come here to Redux, we can see [23:11] here how there are different stores [23:14] available. One of the stores we have is [23:16] called commands. And here we can see we [23:19] should see all the commands that are [23:21] registered. [23:23] And [23:25] we should see here our [23:29] own commands the ones that we have [23:32] registered. [23:34] Let me see if I can find them. [23:39] Um [23:43] what is the name? The name of is command [23:47] API exploration. [23:53] command and here here they are. Command [23:55] API exploration docs block editor and [24:00] whenever this command is called I [24:04] trigger a specific callback which in our [24:07] case is uh just a window open to the [24:10] specific link according to this array of [24:13] objects where I have defined all the uh [24:17] data of the different handbooks. [24:20] So what I do here is I loop over the [24:24] array and for each object I register the [24:27] command. How do I register the command? [24:30] I dispatch an action which is register [24:32] command of the command store. [24:37] So we come here and we do commands. [24:50] Um [24:51] no, if I do if I do DVP data and then [24:57] DVP [24:59] commands um store [25:08] If I do WP data this patch comment [25:14] store, this should [25:17] return [25:19] a set of actions we can trigger to [25:24] alter the data that is in the Redux [25:29] store. [25:31] And one of the actions is register [25:33] command. So we do data dispatch the [25:36] specific store in this case in the [25:38] command store and register command and [25:41] register command. If we check the [25:43] documentation here [25:49] register uh command. [25:54] If we look for register command, [25:59] we have here we have here the commands [26:01] data register. [26:06] Well, this is not really useful. So, [26:08] let's go with the other result. [26:19] Yeah, this is the information we need to [26:20] pass to register a command. name, label, [26:23] icon, call back, context, the context of [26:25] the command and the keywords. [26:32] So this is a way of registering a [26:34] command. [26:38] And um [26:42] this is what I've done here. [26:46] And this is a good way because if we [26:48] don't need any [26:51] thing that is super complex, this is [26:53] good enough. [26:56] But what happens if we need to interact [27:00] with [27:02] um [27:05] other hooks and we want to use the hook [27:10] way of registering a command. For that [27:13] we have the use command hook. [27:17] And [27:21] and if we need that and for example if [27:23] we need a models or um [27:29] other effects that can be triggered uh [27:33] from react. We need to [27:37] find a way of [27:40] um mounting manually a react um [27:47] a react container and so this is [27:51] properly hydrated into the dome. [27:55] This is an example. So let's copy this. [27:58] Let's comment this a little bit. [28:04] For example, [28:06] um we can call this [28:09] latest [28:12] posts. [28:19] Okay. Yes. [28:22] And I'm going to copy this [28:38] Okay. [28:42] And what I can do here is okay this [28:45] latest posts and right now [28:50] I'm going to move this logic to the [28:52] index. [29:02] I'm appending a specific DOM element and [29:05] inside that do element I'm creating a [29:08] root to render a specific [29:10] um [29:13] react component which is the one I'm [29:15] going to import [29:18] from here. [29:22] I also need to [29:26] I'm going to remove this [29:30] and I'm going to export [29:34] default [29:37] function. [29:39] This this is a [29:43] a React component. [29:45] What else? the dump ready. I'm going to [29:48] move it to [29:55] I'm going to move it to and uncreate [29:57] root as well. [30:00] And yeah, we should have [30:04] we should have [30:07] no latest [30:10] post uh command [30:15] post commands. Okay. [30:18] So, how are we doing this? [30:25] This is the [30:28] React component that we are [30:34] we are invoking. We are um triggering [30:38] when the specific command is uh called [30:41] is summoned. [30:45] This react component has uh two states [30:48] is open and set is open. Is open will be [30:51] true or false depending if the specific [30:54] uh model is rendered or not. [31:04] So this um react component [31:10] make use of the use command which is a [31:13] hook available from the WordPress [31:16] commands. And if we look for use [31:18] command, [31:21] we look for use command. [31:26] We can see that [31:30] attach a command to the command pallet [31:32] used for static commands. [31:41] Um [31:43] but we need to [31:48] appear this command [31:51] this commands. Okay. If we look for use [31:54] command, let me look for that in [31:55] Gutenber. [31:59] We look for Gutenber and we look for use [32:02] command [32:06] export hooks. Yeah, we can see that this [32:09] is a hook hook. The hook use command [32:16] and it's a hook. It uses this effect. [32:19] So, we need to to to launch this from um [32:23] from a React component. [32:26] And that's why I'm doing this. [32:29] That's why in order to render this [32:33] React component that internally [32:38] is uh making use of the hook use [32:42] command. [32:44] We are um [32:47] what we are doing is via JavaScript we [32:50] are creating a DOM element [32:54] and [32:56] we are hydrating that uh DOM element [32:59] with [33:01] my custom [33:04] re component which is the one that is [33:07] making use of the hook [33:10] here [33:12] and Here [33:15] I can call all the react components and [33:18] this react component uh latest post [33:21] model is uh the one [33:26] that [33:29] uses other hooks like you select for [33:33] example the idea let's um let's try we [33:37] can go if we reload code. [33:46] We can do um [33:50] show latest posts. [33:54] And here we can see a specific uh model [33:57] window [33:59] where we can go to the specific post [34:09] and we can show uh [34:13] show latest posts [34:18] and we can go and edit the post. for [34:20] example. [34:26] So this is an strategy that I think it [34:29] can work [34:34] because this is a way to ensure that all [34:37] command registered via hooks is um [34:41] properly registered. [34:48] no matter where this is executed. [34:56] And what I'm doing here is okay, I'm [34:58] using the use select which returns the [35:03] post and is loading. [35:09] This is the query I'm doing. I'm [35:16] selecting [35:19] from the core store which I have [35:23] imported here. I'm using the get entity [35:26] records and there is a good post in the [35:30] developer blog about the get entity [35:32] records. We go to [35:39] well we have use entity records and get [35:42] entity records. So I'm going to share [35:44] this [35:47] in the chat [35:53] and we are getting the post and while [35:56] this is loading the cool thing is that [35:58] I'm showing a spinner and if it's not [36:00] loading I'm h iterating over the [36:05] different items uh retrieved which are [36:08] the different the latest posts because I [36:11] am uh um using this query [36:16] post type post in the query and [36:20] and I can close the the model. [36:26] So this is [36:32] any tips just started coding as a [36:33] beginner. What language do you [36:35] recommend? Wow, that's um it's an [36:38] interesting question. Do you are you [36:41] interested in in programming in in [36:43] WordPress or just in in general? [36:51] Okay. So we have here a model [36:56] um component which we can import from [37:00] spinner and then the external link. [37:04] This is the [37:10] Okay. In general, [37:12] um, okay, so UB sounds is asking about a [37:16] specific uh language. [37:19] If you are starting, I would recommend [37:21] to start with a programming language um, [37:25] such as JavaScript or Python. I think [37:28] those are the [37:30] the easiest ones to learn and the ones [37:34] you can do the most. uh from my [37:36] experience both Python and JavaScript [37:39] are pretty popular. There are a lot of [37:42] um projects done in in in [37:46] Python and JavaScript and and there are [37:50] a lot of resources on the web. So yeah, [37:53] that would be my recommendation and from [37:55] there you can uh move and explore other [38:00] languages uh such as uh yeah PHP or or [38:05] any other also depending on what type of [38:07] uh products you want to to create for [38:11] the web for example. Hey Elliot, how you [38:14] doing? Hi. [38:19] We're talking about programming [38:20] languages. It's a [38:23] very open open big topic. [38:30] What career paths do those offer? Um [38:34] well these programming languages [38:38] I think there is a lot of uh work for [38:41] for these programming languages. And [38:49] so for example, if you learn PHP um for [38:54] WordPress related uh projects, I think [38:57] there is a lot of uh [39:01] a lot of jobs in that in that uh [39:04] ecosystem. Um and also if you learn PHP [39:09] and JavaScript which are like the most [39:11] uh [39:15] Yeah. [39:17] Yeah. I agree. [39:19] Actually is saying like I think every [39:21] programming language offers path in [39:23] every domain. Yes. Some are more [39:24] dominant than others. Yeah. [39:28] Yeah. From my perspective, I think that [39:30] the JavaScript and Python are pretty [39:32] popular. So that's like um um [39:40] that's a good direction to start with. [39:42] something. But yeah, from from there um [39:47] it depends on what you're interested in [39:50] like if you interested in developing [39:53] games for example or web pages or or any [39:57] other. [39:59] Okay. So let's uh go back to our command [40:03] and [40:05] just to summarize we have um [40:10] we have reviewed two ways of creating [40:12] commands. The first one is the easiest [40:15] one. Um yeah Elliot is saying choosing a [40:19] single programming language is hard. I [40:21] found that the best way to learn is to [40:23] just build things and experiment with [40:24] different ways of doing them. Yeah. [40:27] Yeah. I agree. I agree. [40:31] Do any of you have any um [40:36] favorite programming language? Something [40:38] you feel comfortable with or something [40:40] that you would recommend? I mean um if [40:43] someone is asking you this question, [40:46] which programming language [40:49] should I learn? Do you have like a a [40:51] recommendation? [40:54] For me it would be um [40:58] it would be JavaScript actually [41:02] that would be my my recommendation [41:06] like to start with something because [41:08] it's a language you can use for both the [41:09] front end and the and the back end and [41:12] it's pretty flexible. [41:18] Taxil says, "I like JS and C++ even [41:22] though I don't code in it." Yeah, [41:31] there was this video the other day. I [41:33] saw Yeah, says JS, HTML, CSS, and JST. [41:38] Yeah, I think that combo is pretty [41:40] especially for the web [41:44] like understanding deeply JavaScript, [41:47] HTML and CSS. It's very powerful. It's [41:50] very powerful because with JS you can [41:53] manage the behavior in the front end but [41:57] also a lot of logic in the back end and [42:00] understanding good markup and and CSS. [42:04] Uh [42:08] so Jubie says from what I observed is [42:11] the most hirable or what do you think [42:18] like a JavaScript Yeah, I would say for [42:22] me I think JavaScript, Python, PHP are [42:27] like good bets, are like good options. [42:30] This is a matter of exploring them, see [42:33] what you like most about them and then [42:36] and continue [42:38] doing them. The good thing is that [42:40] nowadays with AI, you can really I I [42:43] really like this current time we're [42:46] living in because you can really [42:49] you can really explore any language [42:51] without having any idea and just let AI [42:54] to to guide you through that. So you can [42:56] say okay uh let's create something and [43:00] guide me through every step of it and [43:02] you can ask questions and it's like a a [43:04] good way to to learn [43:07] to learn things. Um, [43:10] sometimes I think it's like a the [43:14] feeling I have when I use Google Maps. [43:18] AI is free tutori. Yeah, I agree. I [43:21] agree. For example, when we use Google [43:24] Maps, we go into a place we haven't been [43:27] before and we just move around like if [43:29] we live there because we can um [43:34] we can go in a new town and we can just [43:36] set an appointment at a specific time [43:38] and we can just be like very tight tight [43:43] time like um trusting the time the [43:46] Google Maps is uh saying it's going to [43:49] take and we can move around uh with uh [43:53] going to addresses we [43:57] haven't been there before. So yeah, it's [44:00] like moving around places we are not [44:03] familiar with and we we haven't been [44:06] before. And for me AI [44:09] um I feel it uh in a similar way. I can [44:13] start uh working with um a programming [44:16] language I don't know with a framework I [44:19] don't know and I can just ask questions [44:21] and I can learn as I I do think what do [44:24] we all do before will maps [44:28] I don't know I don't know [44:30] because I I use it even if I know the [44:33] the the [44:36] way [44:43] because sometimes yeah I [44:48] um What other uh platform do you stream? [44:53] I'm streaming in [44:56] Twitch and [45:01] Okay, you are from Twitch. I stream at [45:05] the same time into Twitch and [45:09] YouTube. [45:10] So if we [45:13] if you go to YouTube, I'm sharing here [45:17] the my channel. [45:25] So this is my channel and if you're [45:29] interested in [45:31] WordPress development, I have a lot of [45:35] a lot of videos there from the streams [45:39] that I [45:41] that I do from time to time. I'm also [45:44] pretty active in my blog. [45:47] So I'm sharing that resource as well [45:49] here. [45:52] Um, [45:53] what else? [45:58] I'm also pretty active in GitHub and I [46:04] have in GitHub uh [46:07] a map of all the things I've been [46:11] working on. So, yeah, that's another uh [46:14] good uh reference for what I've been [46:17] doing. [46:19] Okay, let's go back to the commands. [46:23] Two ways we have seen so far. Um, [46:28] cool. [46:30] Um, [46:32] we have [46:35] checked ways to register commands that [46:39] work in all pages that work in both the [46:42] admin dashboard and in the citator and [46:44] in the pulsator. [46:46] First way is this one [46:51] this patch. [46:53] Actually we can do a very [46:59] a very quick [47:01] test [47:05] if we [47:08] look if we go to my GitHub page. This is [47:14] um this is something that I uh generate [47:18] automatically every day. So this is [47:20] really cool. The project is here. This [47:23] is my GitHub because I have like [47:26] different organizations in GitHub and [47:30] this is the one that I use for WordPress [47:32] development. And in this specific [47:35] organization in the landing page of this [47:37] organization, I have this uh list of [47:40] resources that I [47:43] that I like or that I'm working on. And [47:46] for example, what I have here is a link [47:48] to some guests. And [47:53] what I want to show you here is that I [47:56] have [47:58] I have a Giz here [48:02] which is a way to create a new command. [48:05] I'm going to share this here. [48:09] Okay. So the cool thing about this [48:11] command is that we can copy. [48:14] We can go to any [48:17] WordPress installation. [48:22] So if I [48:25] type command K, I launch this command [48:28] palid and if I type which is my name, [48:33] there's no command. But [48:37] if I copy and paste this, I can register [48:40] a command using the same approach we [48:44] have used here. The difference here is [48:46] that we are using a build process. So we [48:49] are importing the different libraries [48:53] and generating a build version. And this [48:55] is the one that we are loading. But here [48:58] we are using directly the [49:04] the packages that are [49:07] um published in WordPress. So in [49:09] WordPress the the data package is [49:13] available as a property of the um WP [49:18] global object. The same with the [49:21] commands and [49:24] a lot of other packages. So what we can [49:26] do is directly [49:29] call the dispatch method of the data [49:32] package. We need to pass a specific [49:35] store. This can be like the block store, [49:37] the editor store. In this case, we're [49:39] interested in the comments store. And um [49:42] this dispatch [49:44] method over a store, it returns a set of [49:48] actions that we can execute. Um [49:54] if we do this we can see that we get a [49:57] lot of uh well a lot of uh a number of [50:00] actions like register command and [50:04] this register command we can use it to [50:07] register a command. And if we uh do [50:11] here, we can see how now we have this uh [50:14] command, this custom command that what [50:17] it does is redirect to to my web page. [50:21] But this is a a pretty um [50:25] good way to [50:29] demonstrate how to register commands. [50:32] Okay, so we have this method. Then we [50:34] have this other method, latest posts. [50:37] I'm thinking about the strategy used [50:40] here. I'm not sure. I think it's fine. I [50:42] don't think there [50:45] I'm thinking about the architecture. [50:48] So what we are doing is we are creating [50:50] um a DOM element. [50:54] So let's what we are doing is we are h [50:58] when the DOM is ready we are creating a [51:02] specific deep we are assigning that deep [51:07] an ID we are appending down that to the [51:11] body and then we are uh rendering or [51:16] react component in that uh DOM element [51:19] that we have created on the fly [51:23] and The react component we are rendering [51:25] is called latest post command which is [51:28] this one and this command uh is a react [51:32] component. So inside the react component [51:34] we can use all the [51:37] the different hooks like for example use [51:39] state use command and this [51:45] state variable we use it to [51:52] to display or not this model window. [51:58] can come here and say. [52:02] So when we click [52:06] recently did posts it displays [52:11] um [52:13] it displays the model window based on [52:15] the value of this is open. But when we [52:19] click here, [52:22] we use set this open to false. The on [52:25] close of that model [52:29] uh this on close [52:33] is the one that we pass to the model. [52:36] And when we close and here we can make [52:39] use of other post other hooks like for [52:43] example um you select to get the list of [52:46] posts which is um dynamically [52:52] retrieved and from there we can [52:56] um we have access to both the data and [52:59] both the [53:02] the is loading. Um [53:06] if we come here we can reload. If we go [53:10] to the network we can see this would be [53:13] a fetch I think. [53:17] We see latest [53:19] posts. [53:27] Look how this is triggering a lot of um [53:33] lot of calls to the rest API. But in our [53:36] case, if we do show latest posts, [53:40] we can see how is triggering this rest [53:44] API request via the [53:48] this code. [53:50] This code is triggering the get records [53:54] is [53:56] fetching the data via a rest API [54:00] request. [54:01] This is the data that is retrieved [54:06] and we are displaying this. So yeah, I [54:09] think is uh [54:12] is fine [54:14] because the use command [54:22] this doesn't [54:26] let me see um con command [54:32] and [54:34] console lock command. Let's see. [54:36] I'm not sure if this returns something, [54:38] but just uh [54:45] no undefined. No, it doesn't return [54:47] anything. [54:49] But we can use it to uh to register a [54:53] command. Okay, this is one option, the [54:57] use command. [55:09] Now, if we only want to register [55:12] commands in the in the block editor, [55:17] we can avoid this thing of um [55:24] creating a DOM element and appending [55:26] that DOM element to [55:28] body and then rendering all React [55:31] component in it because we can leverage [55:36] the existing [55:39] React system already rendered because [55:43] the block editor and the post editor is [55:47] just a big uh react application. [55:51] So what we can do is use register plugin [55:54] and the thing is that the thing is we [55:57] need a way to render a react component. [56:00] If we are in the block editor or in the [56:02] post editor, we can leverage register [56:04] plug-in. If we are not or if we want to [56:07] ensure that this works in any page, we [56:09] cannot h rely on this because for [56:12] example in the in the main admin [56:14] dashboard, this won't work. this won't [56:17] work. [56:21] So if our command is only meant for post [56:24] page 18 experience, we can use the [56:25] register plugin. [56:30] So let's create here um [56:35] copy post content. [56:40] Copy post content. [56:53] So let me see this [56:55] um [57:02] for all [57:07] uh in the admin area [57:15] and this is for all pages in the admin [57:19] area. Um using hooks [57:23] and this is h using [57:28] dispatchers [57:31] using a dispatcher. [57:36] And now we are going to use [57:41] we are going to use four uh pages in the [57:46] block editor [57:51] only in the [57:54] block editor editor [57:59] using um plugin render plugin Register [58:08] plugin. [58:11] Using register plugin and [58:15] copy [58:17] post content to people. [58:29] And what I'm going to do is I'm going to [58:32] import the specific React component and [58:34] I'm going to register it here. [58:37] So copy post content. [58:42] This thing I'm going to do it. [58:46] I'm going to export [58:49] default [58:52] function. [58:56] I'm going to export default default [59:06] default function [59:10] post content and the register plugin [59:15] I'll bring it here. [59:25] So now we have a third way of [59:27] registering commands [59:31] which in this way is [59:38] um we are using the register plugin way. [59:44] Quick question. What's the extended [59:46] proper what's the extended proper use [59:49] case of reducer plug-in? Because if we [59:51] just want to load it in the post editor, [59:55] we can do a screen check in PHP while in [59:57] queue in the JS, right? I'm not inclined [60:00] with the JS at all. If it's not going to [60:02] be used, let me see if I understand [60:04] this. Um, [60:11] if we just want to load it in the post [60:13] editor, [60:18] we can do a screen check in PHP. [60:21] Yeah, I'm not sure how to do that. I I [60:24] it rings a bell, but I'm not sure about [60:26] how this would work and not burden [60:29] client with the JS at all if it's not [60:31] going to be used. [60:36] I guess that there are different ways of [60:38] doing the same. I think that um [60:44] I think that you are right. Um you have [60:48] some example of how to do maybe we can [60:50] try that here. How to do a screen check [60:53] in PHP. [60:57] Um [61:03] I I guess this could be another way and [61:06] another um yeah maybe most more [61:10] effective way or more [61:12] uh performant way of doing that. Not [61:15] loading the JS if we are not in the [61:17] block editor. [61:25] In this way we are just um [61:33] in this way this is also not a bad way [61:36] because register plug-in is only going [61:37] to work. I mean register plug-in is uh [61:40] going to be [61:46] well we are importing the register [61:48] plugin function. Yeah that will be the [61:50] the [61:51] and we yeah and we are importing the the [61:54] JavaScript. Yeah, I know what you mean. [61:56] Yeah, we don't need to load this extra [61:58] JavaScript. That's not going to if [62:01] that's not going to work. [62:05] I believe the register plug-in will be [62:07] useful if there are many plugins that [62:09] are defined in JS and we want to [62:11] selectively add particular commands to a [62:13] specific screens. [62:17] Yeah, I think there's also a specific [62:20] context [62:24] property for commands. [62:31] The context the context of the command [62:40] and it says static and dynamic commands [62:43] can be contextual. This means that in a [62:45] given context, for example, when [62:46] navigating the citator or editing a [62:49] template, some specific commands are [62:52] given more priority and are visible as [62:55] soon as you open the command pallet. [62:57] Also, when typing the command pallet, [62:59] these contextual commands are shown [63:01] above the rest of the commands. Okay, at [63:02] the moment, three contexts have been [63:04] implemented. Site editor, this is the [63:06] context that is set when you're [63:08] navigating the site editor. [63:10] Entity edit is the context that is set [63:13] when you are editing a document template [63:16] template part or [63:18] um or page and block selection edit. [63:22] Yeah, but this h it just prioritizes the [63:26] command. So it doesn't mean that it's [63:29] not going to be executed. Um [63:34] but yeah in a specific screen the [63:37] commands um [63:40] of that context will be [63:43] displayed directly when we uh click [63:46] control K and also um when we look for [63:51] that if there are several results it [63:53] will be the first ones uh to appear [63:58] as the usage of the command pallet [64:00] expands more context will be added. [64:04] Attaching a command or command loader to [64:06] a given context is as simple as adding [64:07] the context property with the right [64:09] context value from the available context [64:10] above to the use command or use command [64:13] loader calls. [64:15] So for example here in our use command [64:22] we can say that this is um [64:30] you're editing a component [64:35] template. [64:37] This is the context that is set when a [64:38] block is selected. Uh okay, let's say we [64:43] want to give this a site editor. [64:46] We can say context [64:53] site editor. [64:56] So this is [65:07] and in the site editor. Okay, if we go [65:11] to the site editor now we have this [65:15] this plugin here. If we go to the site [65:18] editor [65:20] now, if we if we click command K, we can [65:24] see that the the first one that appears [65:26] is the one. And if we um show [65:32] no show, [65:36] we can see that the first one in the [65:40] uh results. But [65:43] if it doesn't match any result, yeah, it [65:45] disappears. But if there are several [65:47] results, it appears the first one. Nice. [65:56] Okay, let's continue with um [66:01] the context pan is cool. Saves a lot of [66:03] travel of else juggling. Yeah, [66:08] there are um I was exploring this [66:11] morning. There are several um issues [66:15] opened in Gutenberg. Let me see if I can [66:17] find some of them. [66:20] Um, [66:23] for example, [66:35] this is one. [66:40] This is the one that I was exploring [66:43] this morning. [66:48] This is another one which I think is in [66:51] the line of what you're saying. [67:04] No, this is another one I was referring [67:07] to. Um [67:16] Yeah, the thing is that as we add more [67:19] custom commands, um there must be some [67:23] ways to [67:25] identify [67:28] like to group them. So this is one [67:30] solution that was proposed like to add [67:34] the like a category or a group or the [67:36] plugin from where this is registered. [67:40] That would be really cool. [67:43] and [67:50] by adding an action [67:53] and the context for each. [67:59] And what else do we have? [68:11] consider more context than [68:21] there was [68:24] yeah this [68:26] issue [68:28] I'm sharing this in the in the chat [68:35] and there was Another one with a lot of [68:38] Let me see if I can find it. [68:44] Ah, this one. [68:46] Command pallet overview. This one. [68:55] Oops. [69:00] Yeah, these are like the different This [69:02] is the one I was I wanted to to share. [69:05] This is like the all the ideas and and [69:08] some of them have been already [69:10] implemented [69:12] but some of the ideas to um for the [69:15] command pallet and some of them they [69:17] have to do with the accessibility [69:20] um yeah for example this one allow [69:23] hooking into command pallet commands and [69:25] command loaders [69:27] and [69:32] and how to group Um [69:37] I would really like something like um [69:41] I wanted to explore that. [69:46] Um, [69:48] so my expiration could be [69:55] um [69:59] having a way to [70:02] well actually my my explanation would be [70:05] if I [70:07] register commands like this that I have [70:10] a way to see a description of the [70:14] command maybe in the form of a tool tip. [70:17] For me, it would be great if [70:20] I [70:23] keep the mouse in a command for maybe [70:28] more than 3 seconds or 5 seconds. I get [70:31] a tool tip here [70:33] explaining [70:36] in detail what the command is uh going [70:38] to do. But in order to do that I need I [70:41] think we need to um this is not [70:44] something that we can do from a plug-in. [70:46] This is something that we need to [70:49] change the main engine of registering [70:52] commands. [70:55] H but this could be this could be a nice [70:58] a nice addition. [71:01] I'd like to explore that. [71:05] Okay, let's continue. um register [71:08] commands only in the block editor. So in [71:11] our exploration we are using the [71:14] register plugin because we know the [71:15] register plug-in is only going to be [71:18] executed in the [71:22] in the post um [71:26] in the post editor. Also here we are [71:29] doing um [71:36] we are doing some um [71:39] some filters [71:43] but yeah first let's [71:45] let's see if this is registered [71:47] properly. [71:50] We can go [71:53] here [71:55] and we can do [71:59] copy post content to the clipboard. And [72:02] now if we come here we have the the [72:06] content nice. [72:11] So how we can do that? So we have um [72:16] used a hook but in this case we don't [72:19] need to emulate a react um because it [72:23] doesn't make in this case it doesn't [72:25] make sense that we copy the content from [72:28] the admin dashboard. This command only [72:31] makes sense here and what we can do is [72:34] add a context like we did with the other [72:37] thing. Maybe we can also do here context [72:40] edit post because in this case it makes [72:42] a lot of sense. So maybe reload [72:49] and we have commands to go to the to the [72:54] code [72:55] open code editor. [72:58] And here we have a command now to copy [73:02] the content to the clipboard. [73:09] What else? Uh [73:11] now that this is is correct post let me [73:14] check the documentation again. [73:20] Let me check the documentation. [73:23] No is entity edit [73:28] context entity edit. [73:32] Now, in theory, if we [73:40] No. [73:57] If I click [74:01] control K or command Kh [74:15] this is uh [74:18] the context that is said when you are [74:20] editing. Okay. So template template part [74:22] or page but there is no entity edit for [74:24] a post. That's interesting. [74:28] That's interesting. [74:31] So let's try this with a page. [74:36] If we go to a page [74:43] and we edit a page like for example this [74:46] one. [74:49] Um, [74:59] so it's probably registered, but it's [75:01] not really [75:04] the context here is not really working. [75:10] And if we go to a template [75:22] And here, so it's not really a page. [75:26] It's only templates. [75:29] It's only a template because here is [75:32] indeed [75:37] being displayed as um [75:41] so the context is working because it's [75:42] being displayed as the default or the [75:44] most important command for this context. [75:49] But if we go to page or post is not [75:51] doing that. [75:57] So yeah, that's good to know. and block [75:59] selection edit. This is the context that [76:01] is set when a block is selected. [76:08] Are there more contexts? Okay, let's [76:10] check that because maybe maybe this is [76:12] not updated. [76:15] If we come here to Gutenberg block [76:17] selection edit [76:20] this readme [76:22] just set command context. [76:28] So yeah, right now there are only this [76:29] one. Site editor, entity edit, [76:36] a canvas edit. [76:42] Um I'm going to ask [76:50] um can I ask copilot about this? [77:01] Um, [77:05] in which um is [77:08] will this be uh triggered in when [77:13] editing a post [77:16] or page? [77:38] Okay, we need to investigate further. [77:41] It's a rabbit hole. So, let's uh let's [77:45] avoid it. [77:48] Okay. So this is the the third case. We [77:52] are [77:53] we are [77:55] registering a [77:58] command only for the block editor which [78:02] can be either the [78:05] post editor or the site editor. [78:18] And we are also leveraging the notice [78:25] store. Okay. To start closing things. [78:31] So here if I do [78:34] copy [78:37] post content copied to the clipboard. [78:45] So it's very it's very simple. We can we [78:48] are leveraging this um [78:51] native uh methods of the the browser [78:54] navigator clipboard [78:56] write text content and the content we [78:59] are getting it for from a selection to a [79:04] specific uh store which is core editor. [79:07] But maybe we can also say here um import [79:12] store as editor store and maybe we can [79:16] do also this here. So when we reload and [79:21] we say [79:23] copy post uh from clipboard [79:28] we have this here. Nice. Nice. [79:37] Okay, this is a third case. [79:47] So this um [79:51] command is registered for all the [79:57] places where register plug-in works. [80:00] That can be site editor, post editor, [80:04] page editor, whatever. But what if we [80:07] want to be more specific and we want to [80:13] maybe [80:16] um [80:19] register the command or or make the [80:22] command available only if we are in the [80:25] the post editor for example. And for [80:28] that we have this example here which we [80:32] are to comment right now. [80:43] This is block usage model. [80:51] Block usage [80:59] And what I'm going to do is [81:02] export the full function. [81:15] We import the React component and we [81:18] register the plug-in [81:23] only in the block editor. This won't [81:26] work in the site editor. So how are we [81:28] doing this? [81:33] So the React component we are rendering [81:37] is this one and the strategy is similar. [81:41] We have a model window which we are [81:44] controlling [81:46] with [82:08] this open true. And we do the same. We [82:11] just um trigger this block usage model [82:14] or not depending on the value of the is [82:17] open. [82:19] And we close it with the set is open [82:22] false. Okay. And block usage model is [82:25] this one that receives the on close. [82:30] We get the [82:33] the blocks [82:36] of the current uh document. [82:41] And we what what we want to do is to [82:45] count the use of blocks in the current [82:49] uh document. So for that we have this [82:52] logic that goes through each block [82:57] and just counts the [83:05] the times each blocks used across the [83:08] document. And then we [83:10] um [83:12] return the model [83:17] and they use [83:29] and the use block usage [83:32] command. [83:53] Show block usage. [83:57] Ah, okay. And this is a command loader [84:00] and they use common loader [84:04] and let me see use command loader. [84:10] Use command loader. [84:20] and use command loader [84:30] and [84:32] this command [84:36] attach a command loader to the command [84:38] pallet used for dynamic uh commands. [84:47] So maybe in this case [84:56] we can do [85:06] I know in this case we're using a a [85:08] model [85:09] and the block usage. [85:13] Okay, so use block usage command. This [85:16] is the the hook [85:18] that register the commands. [85:42] So we register the command. [86:00] Well, this is I don't think this is [86:02] really well structured. [86:04] I need to improve this. [86:07] Okay, let's analyze this. [86:12] We do a selection using the use select [86:16] hook and we pass the select um method [86:20] and we get different information on [86:22] different stores like the post type of [86:24] the post type, the post ID from editor [86:28] store. [86:31] um [86:33] the post type object [86:36] from cor store and we return if we are [86:39] in the post editor [86:46] or not. The viewable. This is a property [86:48] that is interesting [86:51] because yeah, the viewable property in [86:55] the snippet above code determines [86:57] whether the current post type has a [87:00] public facing edit screen in the [87:02] WordPress admin interface. [87:05] Yeah, because there are several post [87:06] types that doesn't have um [87:10] for example global styles I think is a [87:12] is a post type. [87:15] Um [87:18] I think I have a guest somewhere [87:22] to see um [87:28] the different post types. [87:37] Custom blocks registered. [87:39] Get all items. All post types. [87:50] some block registers. [87:52] No, I don't have here. [87:55] Um, [87:57] but yeah, there are different post [87:58] types. [88:05] But for example, post types that are [88:08] viewable [88:14] Exactly. Yeah. [88:19] Yeah. Yeah. No, it's um Yeah. Says it [88:24] shows whether it has an editor screen [88:26] exactly and not whether we are currently [88:28] the in the editor screen exactly. So um [88:38] we can select the current uh post type, [88:41] the post ID [88:44] and [88:46] but the post type can not be something [88:49] that can be viewable. [88:52] Um [88:54] so with this we are in theory we are [88:58] restricting the access to just uh [89:02] editing a post or editing a page. This [89:05] good [89:07] exclude um [89:15] a template or template part [89:18] viewable [89:20] like whatever we are editing it can be [89:22] viewable directly in the front end [89:24] that's that's how I understand it [89:26] which can be only our posts or pages but [89:30] for example if we edit our template or [89:32] our template part that cannot be [89:35] directly viewed. This is used as an [89:37] internal [89:39] um [89:41] internal piece for generating the final [89:44] render of the page. [89:46] Okay. [89:51] Um [89:54] select from cross store if the user can [89:56] update. Okay. If the user can edit posts [90:00] and the we are in either a post or a [90:04] page, [90:06] we register the command [90:15] commands push. [90:21] Okay, this is a bit uh different because [90:24] command loader [90:26] receives an array of commands even when [90:30] we are here only just adding one command [90:35] commands push. [90:37] Um [90:42] and what we are doing here is open model [90:51] Uh yeah, [90:56] this works but I don't really like the [90:58] how this is structured because there are [91:00] some dependencies here depends on this [91:02] and this is set to null. [91:08] Um, [91:11] I need to think of a better way doing [91:14] this. How can we improve this? [91:20] This is the hook that is [91:24] being called here. [91:32] And the callback [91:41] And the call back. [91:48] The callback needs to [91:53] needs to execute something. Um [92:01] but we are here in a we are in a react [92:05] environment. So [92:10] maybe [92:12] we can um [92:21] is there a way to to render a React [92:24] component? [92:26] Yeah, we don't really. So this is a [92:29] hook. [92:33] Okay, let's ask um cloud code about [92:36] this. Let's see if we can if we can [92:39] improve this code. Okay. [92:44] Um [92:50] okay, [92:52] I'm going to be honest with you, CL. Um [92:54] I don't like the way this code is [92:59] structured. [93:03] Because um [93:09] because block [93:13] is a comment. Um [93:16] sets [93:18] the value [93:21] of open model [93:26] which is [93:27] initialized. [93:29] initialized [93:32] outside of the function [93:36] and [93:46] I'm going to try a new toy that is [93:49] called monologue. [93:54] Okay. Monologue [93:56] is the system [94:01] we can use two. Let me see. [94:09] Okay. [94:11] I don't like the way this code is [94:14] structured because for example the block [94:17] usage command function [94:21] sets the open model [94:24] function that is initialized [94:27] outside of the function [94:31] and also is used inside of the callback [94:38] used in the object [94:43] added to the command array. So is there [94:46] any way we can [94:51] make [94:54] this better. [94:59] Okay, let's see if um [95:03] which ideas. [95:13] Yeah. [95:19] Uh, use context using React context. [95:40] Okay. [95:51] Um, use context. [96:08] Uh, okay. [96:12] So, use context [96:19] Block usage model. [96:31] Open model. [96:45] Okay. Block usage context uh provider [96:50] value set is this open true. [97:12] Okay. use. Well, first let's see if this [97:14] works. [97:20] Let's see if this works. [97:36] So here it's fine that it's not um [97:40] available. But if we go to a page, it [97:43] should be there. [98:01] Um, or maybe say only in the post. Let [98:04] me see. [98:18] Show block usage. [98:29] Yeah. No, this is not working. [98:32] Open model is not a function. [98:46] Isn't there a way to go back? [99:03] So if we go we come here [99:10] show blog usage [99:15] and if we go to a page [99:23] we can show block usage [99:31] only in the Post [99:41] only. [99:43] Okay, this is this part. Can user edit [99:46] post [100:04] is post editor. [100:14] Okay, let me see if I console log. [100:25] Console log. [100:55] post type page. [101:13] Post type view is true. [101:44] If I do console log disposiator and can [101:48] use edit post, [102:01] can you That edit post here is [102:03] undefined. [102:13] Uh I can just update. [102:21] So the first one is true but it's [102:23] because of the second one. So in the [102:25] page [102:29] okay it's because of the second one but [102:31] if we come here [102:42] okay [102:49] can youer update [102:53] post. [102:58] Um, [103:08] I don't really understand this. Can you [103:12] say edit post? [103:17] Why this is only triggered in the [103:20] post editor as true? [103:25] So this is clear. This is that we are in [103:28] a post type that has in a post type. [103:39] We are in a post type that has a [103:44] um [103:46] an screen. Yeah. viewable, [103:49] but [103:52] the post ID, [104:01] let me see. Um, [104:12] okay. And why this return [104:18] Okay. Why can user edit post return true [104:23] only when we are editing a post in the [104:27] post editor [104:30] because it seems that we are checking if [104:34] the user can update the [104:37] post [104:39] but that's also the case for a page. I [104:44] mean the user can also edit a page. [104:47] So yeah, can you explain me why can user [104:50] edit post returns true only [104:56] when we are in the post editor? We are [104:59] editing a post. [105:09] I don't know if clo [105:17] okay. This specifically checks if the [105:19] user can update posts the post type not [105:22] pages. Okay. That's why it returns true [105:25] only when editing a post. The issue is [105:27] that can user [105:30] it's hard to check the post post when [105:32] you are editing a page [105:39] when you editing. [105:55] Okay. Yeah. Uh I don't understand very [105:59] well the logic behind this. Uh can user [106:03] Let me see if Let's dive in a little bit [106:07] more. If we go to the [106:11] we go well actually we can come here and [106:14] say locator handbook [106:18] and we can look for can user [106:22] which is incore data. [106:33] returns whether the current user can [106:35] perform the given action on the given [106:37] red resource. Calling this may trigger [106:38] an options request of recip. [107:12] Okay. Okay. I need to think more about [107:15] this. The thing is that with this filter [107:18] we limit only the [107:21] addition in the post editor [107:26] and um only in that case we are [107:29] registering this because this is the [107:32] hook that returns this object. [107:36] of commands and it's loading false. [107:40] So just common loader is [107:45] and with that command register [107:54] we uh block usage model. [108:11] We trigger this [108:15] and um [108:23] we trigger this. Um, [108:28] okay. I need to think more about this [108:30] example to see if uh I want to clarify [108:34] two things. I want to clarify this. [108:37] I'll think more about this and I also [108:40] want to clarify [108:42] how this hook [108:45] is interacting with this model window [108:48] because right now it's not super clear [108:50] to me. Okay, [108:52] perfect. I think we can [108:56] uh finish the session. [109:00] Hope it's been helpful. [109:04] And yeah, I think this is the last [109:06] session of the year because I'm going on [109:08] holidays. [109:10] So [109:14] yeah, let me give you a reminder of [109:19] my YouTube channel. [109:23] because [109:25] I have done a lot of streams this year. [109:30] There you have all the streams that I [109:32] have done. [109:35] And also if you go to [109:39] my streams [109:43] repository [109:45] there you can find all the details [109:50] all the details of the [109:54] streams that I have done during this [109:55] year that you can find the resources [109:57] that we've been using the [110:02] the projects [110:04] the different diagrams and all of that. [110:09] So yeah, we can call it a year. Um hope [110:12] you have a great holiday that you take [110:15] rest and [110:19] and yeah uh see you next year. Let me [110:23] know via Twitter or you can also [110:28] leave your ideas here in discussions. I [110:30] have a conversation open for ideas for [110:33] streams. [110:34] So, leave here your ideas for the [110:37] streams in case you would like me to [110:41] to cover some specific topic. Okay, [110:44] guys. Hope you're doing fine and yeah, [110:46] see you see you all next year. Bye. ## Highlights - commands. I've been exploring this a little bit in this past uh few days. And I'm actually in the middle of exploring some stuff. So I want to share that with you and maybe work on these things together and see what we can what we can do or if we can solve something or if we can create some uh new commands. I also ([View Highlight](https://read.readwise.io/read/01kcyk0bzbswy06mdk1f98xk1k)) - Tags: 👻 ai highlighted - have like these little surprises that I have to I have to deal with. Well, anyway, um how these commands are registered. So, we can use the dispatch method of WordPress data. Um, WordPress data is the data layer of the of the ([View Highlight](https://read.readwise.io/read/01kcyk0c12mscx17dgdreat898)) - Tags: 👻 ai highlighted - So this is a way of registering a command. And um this is what I've done here. And this is a good way because if we don't need any thing that is super complex, this is good enough. But what happens if we need to interact ([View Highlight](https://read.readwise.io/read/01kcyk0c24hytkjm9p45y45t63)) - Tags: 👻 ai highlighted - with um other hooks and we want to use the hook way of registering a command. For that we have the use command hook. And and if we need that and for example if we need a models or um other effects that can be triggered uh ([View Highlight](https://read.readwise.io/read/01kcyk0c3a0pcdjwwstwsfrnzc)) - Tags: 👻 ai highlighted - And yeah, we should have we should have no latest post uh command post commands. Okay. So, how are we doing this? This is the React component that we are ([View Highlight](https://read.readwise.io/read/01kcyk0c4e6hsy9r5xx5egrbk1)) - Tags: 👻 ai highlighted - actions like register command and this register command we can use it to register a command. And if we uh do here, we can see how now we have this uh command, this custom command that what it does is redirect to to my web page. But this is a a pretty um good way to demonstrate how to register commands. ([View Highlight](https://read.readwise.io/read/01kcyk0c8sxydw2mf8n0wcy8t3)) - Tags: 👻 ai highlighted - If we are in the block editor or in the post editor, we can leverage register plug-in. If we are not or if we want to ensure that this works in any page, we cannot h rely on this because for example in the in the main admin dashboard, this won't work. this won't work. So if our command is only meant for post page 18 experience, we can use the register plugin. So let's create here um ([View Highlight](https://read.readwise.io/read/01kcyk0cbjyfm5t3kd5kxms7ak)) - Tags: 👻 ai highlighted - a tool tip here explaining in detail what the command is uh going to do. But in order to do that I need I think we need to um this is not something that we can do from a plug-in. This is something that we need to change the main engine of registering commands. H but this could be this could be a nice a nice addition. ([View Highlight](https://read.readwise.io/read/01kcyk0cjh1cgp0npwk0mf9w0j)) - Tags: 👻 ai highlighted - I'd like to explore that. Okay, let's continue. um register commands only in the block editor. So in our exploration we are using the register plugin because we know the register plug-in is only going to be executed in the in the post um in the post editor. Also here we are doing um ([View Highlight](https://read.readwise.io/read/01kcyk0cpb1mn5heay2fjywcbx)) - Tags: 👻 ai highlighted - That can be site editor, post editor, page editor, whatever. But what if we want to be more specific and we want to maybe um register the command or or make the command available only if we are in the the post editor for example. And for that we have this example here which we ([View Highlight](https://read.readwise.io/read/01kcyk0cstb47n27r37a4n81cn)) - Tags: 👻 ai highlighted