Creating Commands for the Commands Palette ![rw-book-cover](https://img.youtube.com/vi/ETqUp0UXH0k/maxresdefault.jpg) and we are live. Let me send a message and then we can start with the session. In the meantime, please say hi if you are there. Okay, we are connected and the I'm sharing this session in a slack child. Okay. Yes. So people are aware of this. And now I'm ready. Okay, welcome everybody to another session, another stream, another stream where um I usually just work in public about stuff and I share what I have learned during the the week and yeah, it's like an open space so anyone can connect and ask questions. and yeah maybe just chip in how other developer is working about something. So today I want to explore a bit further the command palid and the creation of 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 published this article a few weeks ago because I started this exploration. I actually did another stream at the yeah a few weeks ago in Spanish and I struggle with a few things so I decided to write about it. The thing is that um now in WordPress 6.9 the command pallet is um it's available everywhere. Before WordPress 6.9 the common pallet was only available in the block editor in the post editor or in the site editor but now it's available um everywhere. So that comes this brings new challenges. Um the main challenge I faced is that when you create commands there are some helpers to create these commands but a lot of these helpers are hook are hooks and these hooks can only be executed inside React components. And the thing is that outside of the post editor there are no usually uh there's no react environment. So we if we want to use those hooks and those hooks are useful if we want to interact with a store or something like that. We need to find a way to make or command to work in all the the contexts in all the environments. It should work either in a page that has a react um environment and in pages that doesn't have that react environment. Um so yeah, I did an exploration. I came up with a few solution. I would like to review them to see if we can improve the the approach on each of them. and okay the chat sorry if I don't answer in the chat because the chat is not connecting here let me see if I can solve this somehow and now I can see the chat hello so yeah if you are there say hi say from where you are connecting. And yeah, if you have any any questions about this um this whole thing of creating commands for the for the command pallet. Okay. So let's start by I'm going to show what I have so far of the expiration that I'm doing and I'm also in the middle of checking a pull request that has to do with this creation of commands. So maybe we can explore that together and then maybe we can uh we can go through these different examples and and just talk about them. I think that what I'm going to do is I'm going to share. Let me see if I where do I have this? I think it's here. Yeah, this is the project that I have. And this is the article. So, yeah, let's start. I think we can start here by or maybe we can check the the documentation a little bit. Uh, I have to. Okay, let me see. I'm not logged in here. Okay, let me um shouldn't I have Let me see. uh because I'm not logged in. Well, that can be solved very easily. I want to access this uh Twitter because I have here some resources. Well, actually I have them here as well. Yeah, that's what I wanted to to share with you. like these resources. I'm going to share them in the in the chat. Well, by the way, um I want to mention that I have published a new post in the developer blog which I think is uh is is really interesting because it it talks about how to combine like different APIs in WordPress to create effects or to create any behavior you want to to implement. And this is a really interesting use case because it covers both APIs that affect the edition experience and also the user experience. So we are we are implementing um the experience in both sides of the equation. So the effect is this. So we have for example a series of words separated by commas and I can select that text as a format and this is the addition experience. I can just okay I want this to be a word switcher effect. So each word will be detected will be isolated and will be presented in the form of this effect. So this is what this article is about and this um effect is done by leveraging the format API, the interactivity API, HTML API and also using JavaScript modules which we need to register and we which we need to build as a module. So there are some um some things to be taken into account and all of that is explained in this article. So yeah, I really recommend you I'm going to share this in the in the chat. Whoops. I'm going to share this in the chat. And without further ado, we can move on with the with the command pallet API. So the command pallet ai command pallet in case you don't know what I'm talking about is uh this when we are in the admin and now the in WordPress 6.9 the command pallet is available everywhere which means that is available here. This wasn't possible in WordPress 6.8 eight. And now since WordPress 6.9 this is um this is enabled and we can move around. We can go through we can go to a specific posts or specific pages or we can um go directly to a specific uh template. And from here maybe we can go to um we can go to editor appearance editor and yeah we can move around and the cool thing is that we can also create our own um we can create our own commands and this is what we are going to explore today. For example, one way to create a command is using this uh use command which is a React hook. And this React hook needs to be executed inside of our React component. And that React component needs to be um hydrated somehow into the DOM. And we need to find a way to to to do that. So let's explore this a little bit. Um what I want to what I want to move here is the studio where I have this um actually let's create a new site site um commands valid exploration I'm going to add the site. I'm going to make it I want to create a um like a local domain and we can do this here. If I edit site custom domain and commands valid expiration, I want to enable https. And with that what I want to do is I want to link the project that I have here under the folder common p valid exploration. So to do that, I'm going to come here. Um, running. I think it's because I created the domain. After that, I need to stop it and launch it again. Start. Okay. And now we have the site. And if I go to overview to iTerm, I'm going to go to uh to the plugins folder and I'm going to link the the project where I have all this initial exploration. Uh it's called commands uh valid no exploration command. valid exploration. So now that I have this project here, I should have it in plugins and I should be able to activate it and this um register this custom commands that I have created. So these are commands to access directly the the handbooks directly from the from the command pallet. So for example, if I click here, I go directly to the blockator handbook. Or if I click here, I go directly to the theme handbook. And the nice thing is that um I can look I can search for the words in the the title, but also I can add some keywords. For example, whenever I search for dogs, these results appear. So how have I done this? Um so this is how this is done. This is I think the easiest way to to register um a command. It seems that is offline. I'm not sure if I'm streaming right now or not because it appears offline OBS. Let me quickly check this. If I go to YouTube and I go to my channel. Yeah, it seems that this is streaming. Okay. Okay. Yeah. Back again. Back again. Yeah, this OBS software is is really strange. I I don't fully understand it to be honest. So, every from time to time I 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 stores that centralize the the data. If we come here, expect Okay, let me I'm going to close all the I think is if I come here to inspect and I go to redux here we can see the stores. So the stores are available. If we come here to the console and we check Dolbyp, we can see that there are a lot of objects and shared under the Dolby VP global object. So we can we have access to the API fetch uh function but also to the blocks object the block editor and all of them they have a thing called store and this store is the one that we can uh pass to Dolbyp data um to dispatch actions or to select data. If we come here to Redux, we can see here how there are different stores available. One of the stores we have is called commands. And here we can see we should see all the commands that are registered. And we should see here our own commands the ones that we have registered. Let me see if I can find them. Um what is the name? The name of is command API exploration. command and here here they are. Command API exploration docs block editor and whenever this command is called I trigger a specific callback which in our case is uh just a window open to the specific link according to this array of objects where I have defined all the uh data of the different handbooks. So what I do here is I loop over the array and for each object I register the command. How do I register the command? I dispatch an action which is register command of the command store. So we come here and we do commands. Um no, if I do if I do DVP data and then DVP commands um store If I do WP data this patch comment store, this should return a set of actions we can trigger to alter the data that is in the Redux store. And one of the actions is register command. So we do data dispatch the specific store in this case in the command store and register command and register command. If we check the documentation here register uh command. If we look for register command, we have here we have here the commands data register. Well, this is not really useful. So, let's go with the other result. Yeah, this is the information we need to pass to register a command. name, label, icon, call back, context, the context of the command and the keywords. 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 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 from react. We need to find a way of um mounting manually a react um a react container and so this is properly hydrated into the dome. This is an example. So let's copy this. Let's comment this a little bit. For example, um we can call this latest posts. Okay. Yes. And I'm going to copy this Okay. And what I can do here is okay this latest posts and right now I'm going to move this logic to the index. I'm appending a specific DOM element and inside that do element I'm creating a root to render a specific um react component which is the one I'm going to import from here. I also need to I'm going to remove this and I'm going to export default function. This this is a a React component. What else? the dump ready. I'm going to move it to I'm going to move it to and uncreate root as well. 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 we are invoking. We are um triggering when the specific command is uh called is summoned. This react component has uh two states is open and set is open. Is open will be true or false depending if the specific uh model is rendered or not. So this um react component make use of the use command which is a hook available from the WordPress commands. And if we look for use command, we look for use command. We can see that attach a command to the command pallet used for static commands. Um but we need to appear this command this commands. Okay. If we look for use command, let me look for that in Gutenber. We look for Gutenber and we look for use command export hooks. Yeah, we can see that this is a hook hook. The hook use command and it's a hook. It uses this effect. So, we need to to to launch this from um from a React component. And that's why I'm doing this. That's why in order to render this React component that internally is uh making use of the hook use command. We are um what we are doing is via JavaScript we are creating a DOM element and we are hydrating that uh DOM element with my custom re component which is the one that is making use of the hook here and Here I can call all the react components and this react component uh latest post model is uh the one that uses other hooks like you select for example the idea let's um let's try we can go if we reload code. We can do um show latest posts. And here we can see a specific uh model window where we can go to the specific post and we can show uh show latest posts and we can go and edit the post. for example. So this is an strategy that I think it can work because this is a way to ensure that all command registered via hooks is um properly registered. no matter where this is executed. And what I'm doing here is okay, I'm using the use select which returns the post and is loading. This is the query I'm doing. I'm selecting from the core store which I have imported here. I'm using the get entity records and there is a good post in the developer blog about the get entity records. We go to well we have use entity records and get entity records. So I'm going to share this in the chat and we are getting the post and while this is loading the cool thing is that I'm showing a spinner and if it's not loading I'm h iterating over the different items uh retrieved which are the different the latest posts because I am uh um using this query post type post in the query and and I can close the the model. So this is any tips just started coding as a beginner. What language do you recommend? Wow, that's um it's an interesting question. Do you are you interested in in programming in in WordPress or just in in general? Okay. So we have here a model um component which we can import from spinner and then the external link. This is the Okay. In general, um, okay, so UB sounds is asking about a specific uh language. If you are starting, I would recommend to start with a programming language um, such as JavaScript or Python. I think those are the the easiest ones to learn and the ones you can do the most. uh from my experience both Python and JavaScript are pretty popular. There are a lot of um projects done in in in Python and JavaScript and and there are a lot of resources on the web. So yeah, that would be my recommendation and from there you can uh move and explore other languages uh such as uh yeah PHP or or any other also depending on what type of uh products you want to to create for the web for example. Hey Elliot, how you doing? Hi. We're talking about programming languages. It's a very open open big topic. What career paths do those offer? Um well these programming languages I think there is a lot of uh work for for these programming languages. And so for example, if you learn PHP um for WordPress related uh projects, I think there is a lot of uh a lot of jobs in that in that uh ecosystem. Um and also if you learn PHP and JavaScript which are like the most uh Yeah. Yeah. I agree. Actually is saying like I think every programming language offers path in every domain. Yes. Some are more dominant than others. Yeah. Yeah. From my perspective, I think that the JavaScript and Python are pretty popular. So that's like um um that's a good direction to start with. something. But yeah, from from there um it depends on what you're interested in like if you interested in developing games for example or web pages or or any other. Okay. So let's uh go back to our command and just to summarize we have um we have reviewed two ways of creating commands. The first one is the easiest one. Um yeah Elliot is saying choosing a single programming language is hard. I found that the best way to learn is to just build things and experiment with different ways of doing them. Yeah. Yeah. I agree. I agree. Do any of you have any um favorite programming language? Something you feel comfortable with or something that you would recommend? I mean um if someone is asking you this question, which programming language should I learn? Do you have like a a recommendation? For me it would be um it would be JavaScript actually that would be my my recommendation like to start with something because it's a language you can use for both the front end and the and the back end and it's pretty flexible. Taxil says, "I like JS and C++ even though I don't code in it." Yeah, there was this video the other day. I saw Yeah, says JS, HTML, CSS, and JST. Yeah, I think that combo is pretty especially for the web like understanding deeply JavaScript, HTML and CSS. It's very powerful. It's very powerful because with JS you can manage the behavior in the front end but also a lot of logic in the back end and understanding good markup and and CSS. Uh so Jubie says from what I observed is the most hirable or what do you think like a JavaScript Yeah, I would say for me I think JavaScript, Python, PHP are like good bets, are like good options. This is a matter of exploring them, see what you like most about them and then and continue doing them. The good thing is that nowadays with AI, you can really I I really like this current time we're living in because you can really you can really explore any language without having any idea and just let AI to to guide you through that. So you can say okay uh let's create something and guide me through every step of it and you can ask questions and it's like a a good way to to learn to learn things. Um, sometimes I think it's like a the feeling I have when I use Google Maps. AI is free tutori. Yeah, I agree. I agree. For example, when we use Google Maps, we go into a place we haven't been before and we just move around like if we live there because we can um we can go in a new town and we can just set an appointment at a specific time and we can just be like very tight tight time like um trusting the time the Google Maps is uh saying it's going to take and we can move around uh with uh going to addresses we haven't been there before. So yeah, it's like moving around places we are not familiar with and we we haven't been before. And for me AI um I feel it uh in a similar way. I can start uh working with um a programming language I don't know with a framework I don't know and I can just ask questions and I can learn as I I do think what do we all do before will maps I don't know I don't know because I I use it even if I know the the the way because sometimes yeah I um What other uh platform do you stream? I'm streaming in Twitch and Okay, you are from Twitch. I stream at the same time into Twitch and YouTube. So if we if you go to YouTube, I'm sharing here the my channel. So this is my channel and if you're interested in WordPress development, I have a lot of a lot of videos there from the streams that I that I do from time to time. I'm also pretty active in my blog. So I'm sharing that resource as well here. Um, what else? I'm also pretty active in GitHub and I have in GitHub uh a map of all the things I've been working on. So, yeah, that's another uh good uh reference for what I've been doing. Okay, let's go back to the commands. Two ways we have seen so far. Um, cool. Um, we have checked ways to register commands that work in all pages that work in both the admin dashboard and in the citator and in the pulsator. First way is this one this patch. Actually we can do a very a very quick test if we look if we go to my GitHub page. This is um this is something that I uh generate automatically every day. So this is really cool. The project is here. This is my GitHub because I have like different organizations in GitHub and this is the one that I use for WordPress development. And in this specific organization in the landing page of this organization, I have this uh list of resources that I that I like or that I'm working on. And for example, what I have here is a link to some guests. And what I want to show you here is that I have I have a Giz here which is a way to create a new command. I'm going to share this here. Okay. So the cool thing about this command is that we can copy. We can go to any WordPress installation. So if I type command K, I launch this command palid and if I type which is my name, there's no command. But if I copy and paste this, I can register a command using the same approach we have used here. The difference here is that we are using a build process. So we are importing the different libraries and generating a build version. And this is the one that we are loading. But here we are using directly the the packages that are um published in WordPress. So in WordPress the the data package is available as a property of the um WP global object. The same with the commands and a lot of other packages. So what we can do is directly call the dispatch method of the data package. We need to pass a specific store. This can be like the block store, the editor store. In this case, we're interested in the comments store. And um this dispatch method over a store, it returns a set of actions that we can execute. Um if we do this we can see that we get a lot of uh well a lot of uh a number of 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. Okay, so we have this method. Then we have this other method, latest posts. I'm thinking about the strategy used here. I'm not sure. I think it's fine. I don't think there I'm thinking about the architecture. So what we are doing is we are creating um a DOM element. So let's what we are doing is we are h when the DOM is ready we are creating a specific deep we are assigning that deep an ID we are appending down that to the body and then we are uh rendering or react component in that uh DOM element that we have created on the fly and The react component we are rendering is called latest post command which is this one and this command uh is a react component. So inside the react component we can use all the the different hooks like for example use state use command and this state variable we use it to to display or not this model window. can come here and say. So when we click recently did posts it displays um it displays the model window based on the value of this is open. But when we click here, we use set this open to false. The on close of that model uh this on close is the one that we pass to the model. And when we close and here we can make use of other post other hooks like for example um you select to get the list of posts which is um dynamically retrieved and from there we can um we have access to both the data and both the the is loading. Um if we come here we can reload. If we go to the network we can see this would be a fetch I think. We see latest posts. Look how this is triggering a lot of um lot of calls to the rest API. But in our case, if we do show latest posts, we can see how is triggering this rest API request via the this code. This code is triggering the get records is fetching the data via a rest API request. This is the data that is retrieved and we are displaying this. So yeah, I think is uh is fine because the use command this doesn't let me see um con command and console lock command. Let's see. I'm not sure if this returns something, but just uh no undefined. No, it doesn't return anything. But we can use it to uh to register a command. Okay, this is one option, the use command. Now, if we only want to register commands in the in the block editor, we can avoid this thing of um creating a DOM element and appending that DOM element to body and then rendering all React component in it because we can leverage the existing React system already rendered because the block editor and the post editor is just a big uh react application. So what we can do is use register plugin and the thing is that the thing is we need a way to render a react component. 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 copy post content. Copy post content. So let me see this um for all uh in the admin area and this is for all pages in the admin area. Um using hooks and this is h using dispatchers using a dispatcher. And now we are going to use we are going to use four uh pages in the block editor only in the block editor editor using um plugin render plugin Register plugin. Using register plugin and copy post content to people. And what I'm going to do is I'm going to import the specific React component and I'm going to register it here. So copy post content. This thing I'm going to do it. I'm going to export default function. I'm going to export default default default function post content and the register plugin I'll bring it here. So now we have a third way of registering commands which in this way is um we are using the register plugin way. Quick question. What's the extended proper what's the extended proper use case of reducer plug-in? Because if we just want to load it in the post editor, we can do a screen check in PHP while in queue in the JS, right? I'm not inclined with the JS at all. If it's not going to be used, let me see if I understand this. Um, if we just want to load it in the post editor, we can do a screen check in PHP. Yeah, I'm not sure how to do that. I I it rings a bell, but I'm not sure about how this would work and not burden client with the JS at all if it's not going to be used. I guess that there are different ways of doing the same. I think that um I think that you are right. Um you have some example of how to do maybe we can try that here. How to do a screen check in PHP. Um I I guess this could be another way and another um yeah maybe most more effective way or more uh performant way of doing that. Not loading the JS if we are not in the block editor. In this way we are just um in this way this is also not a bad way because register plug-in is only going to work. I mean register plug-in is uh going to be well we are importing the register plugin function. Yeah that will be the the and we yeah and we are importing the the JavaScript. Yeah, I know what you mean. Yeah, we don't need to load this extra JavaScript. That's not going to if that's not going to work. I believe the register plug-in will be useful if there are many plugins that are defined in JS and we want to selectively add particular commands to a specific screens. Yeah, I think there's also a specific context property for commands. The context the context of the command and it says static and dynamic commands can be contextual. This means that in a given context, for example, when navigating the citator or editing a template, some specific commands are given more priority and are visible as soon as you open the command pallet. Also, when typing the command pallet, these contextual commands are shown above the rest of the commands. Okay, at the moment, three contexts have been implemented. Site editor, this is the context that is set when you're navigating the site editor. Entity edit is the context that is set when you are editing a document template template part or um or page and block selection edit. Yeah, but this h it just prioritizes the command. So it doesn't mean that it's not going to be executed. Um but yeah in a specific screen the commands um of that context will be displayed directly when we uh click control K and also um when we look for that if there are several results it will be the first ones uh to appear as the usage of the command pallet expands more context will be added. Attaching a command or command loader to a given context is as simple as adding the context property with the right context value from the available context above to the use command or use command loader calls. So for example here in our use command we can say that this is um you're editing a component template. This is the context that is set when a block is selected. Uh okay, let's say we want to give this a site editor. We can say context site editor. So this is and in the site editor. Okay, if we go to the site editor now we have this this plugin here. If we go to the site editor now, if we if we click command K, we can see that the the first one that appears is the one. And if we um show no show, we can see that the first one in the uh results. But if it doesn't match any result, yeah, it disappears. But if there are several results, it appears the first one. Nice. Okay, let's continue with um the context pan is cool. Saves a lot of travel of else juggling. Yeah, there are um I was exploring this morning. There are several um issues opened in Gutenberg. Let me see if I can find some of them. Um, for example, this is one. This is the one that I was exploring this morning. This is another one which I think is in the line of what you're saying. No, this is another one I was referring to. Um Yeah, the thing is that as we add more custom commands, um there must be some ways to identify like to group them. So this is one solution that was proposed like to add the like a category or a group or the plugin from where this is registered. That would be really cool. and by adding an action and the context for each. And what else do we have? consider more context than there was yeah this issue I'm sharing this in the in the chat and there was Another one with a lot of Let me see if I can find it. Ah, this one. Command pallet overview. This one. Oops. Yeah, these are like the different This is the one I was I wanted to to share. This is like the all the ideas and and some of them have been already implemented but some of the ideas to um for the command pallet and some of them they have to do with the accessibility um yeah for example this one allow hooking into command pallet commands and command loaders and and how to group Um I would really like something like um I wanted to explore that. Um, so my expiration could be um having a way to well actually my my explanation would be if I register commands like this that I have a way to see a description of the command maybe in the form of a tool tip. For me, it would be great if I keep the mouse in a command for maybe more than 3 seconds or 5 seconds. I get 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. 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 we are doing some um some filters but yeah first let's let's see if this is registered properly. We can go here and we can do copy post content to the clipboard. And now if we come here we have the the content nice. So how we can do that? So we have um used a hook but in this case we don't need to emulate a react um because it doesn't make in this case it doesn't make sense that we copy the content from the admin dashboard. This command only makes sense here and what we can do is add a context like we did with the other thing. Maybe we can also do here context edit post because in this case it makes a lot of sense. So maybe reload and we have commands to go to the to the code open code editor. And here we have a command now to copy the content to the clipboard. What else? Uh now that this is is correct post let me check the documentation again. Let me check the documentation. No is entity edit context entity edit. Now, in theory, if we No. If I click control K or command Kh this is uh the context that is said when you are editing. Okay. So template template part or page but there is no entity edit for a post. That's interesting. That's interesting. So let's try this with a page. If we go to a page and we edit a page like for example this one. Um, so it's probably registered, but it's not really the context here is not really working. And if we go to a template And here, so it's not really a page. It's only templates. It's only a template because here is indeed being displayed as um so the context is working because it's being displayed as the default or the most important command for this context. But if we go to page or post is not doing that. So yeah, that's good to know. and block selection edit. This is the context that is set when a block is selected. Are there more contexts? Okay, let's check that because maybe maybe this is not updated. If we come here to Gutenberg block selection edit this readme just set command context. So yeah, right now there are only this one. Site editor, entity edit, a canvas edit. Um I'm going to ask um can I ask copilot about this? Um, in which um is will this be uh triggered in when editing a post or page? Okay, we need to investigate further. It's a rabbit hole. So, let's uh let's avoid it. Okay. So this is the the third case. We are we are registering a command only for the block editor which can be either the post editor or the site editor. And we are also leveraging the notice store. Okay. To start closing things. So here if I do copy post content copied to the clipboard. So it's very it's very simple. We can we are leveraging this um native uh methods of the the browser navigator clipboard write text content and the content we are getting it for from a selection to a specific uh store which is core editor. But maybe we can also say here um import store as editor store and maybe we can do also this here. So when we reload and we say copy post uh from clipboard we have this here. Nice. Nice. Okay, this is a third case. So this um command is registered for all the places where register plug-in works. 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 are to comment right now. This is block usage model. Block usage And what I'm going to do is export the full function. We import the React component and we register the plug-in only in the block editor. This won't work in the site editor. So how are we doing this? So the React component we are rendering is this one and the strategy is similar. We have a model window which we are controlling with this open true. And we do the same. We just um trigger this block usage model or not depending on the value of the is open. And we close it with the set is open false. Okay. And block usage model is this one that receives the on close. We get the the blocks of the current uh document. And we what what we want to do is to count the use of blocks in the current uh document. So for that we have this logic that goes through each block and just counts the the times each blocks used across the document. And then we um return the model and they use and the use block usage command. Show block usage. Ah, okay. And this is a command loader and they use common loader and let me see use command loader. Use command loader. and use command loader and this command attach a command loader to the command pallet used for dynamic uh commands. So maybe in this case we can do I know in this case we're using a a model and the block usage. Okay, so use block usage command. This is the the hook that register the commands. So we register the command. Well, this is I don't think this is really well structured. I need to improve this. Okay, let's analyze this. We do a selection using the use select hook and we pass the select um method and we get different information on different stores like the post type of the post type, the post ID from editor store. um the post type object from cor store and we return if we are in the post editor or not. The viewable. This is a property that is interesting because yeah, the viewable property in the snippet above code determines whether the current post type has a public facing edit screen in the WordPress admin interface. Yeah, because there are several post types that doesn't have um for example global styles I think is a is a post type. Um I think I have a guest somewhere to see um the different post types. Custom blocks registered. Get all items. All post types. some block registers. No, I don't have here. Um, but yeah, there are different post types. But for example, post types that are viewable Exactly. Yeah. Yeah. Yeah. No, it's um Yeah. Says it shows whether it has an editor screen exactly and not whether we are currently the in the editor screen exactly. So um we can select the current uh post type, the post ID and but the post type can not be something that can be viewable. Um so with this we are in theory we are restricting the access to just uh editing a post or editing a page. This good exclude um a template or template part viewable like whatever we are editing it can be viewable directly in the front end that's that's how I understand it which can be only our posts or pages but for example if we edit our template or our template part that cannot be directly viewed. This is used as an internal um internal piece for generating the final render of the page. Okay. Um select from cross store if the user can update. Okay. If the user can edit posts and the we are in either a post or a page, we register the command commands push. Okay, this is a bit uh different because command loader receives an array of commands even when we are here only just adding one command commands push. Um and what we are doing here is open model Uh yeah, this works but I don't really like the how this is structured because there are some dependencies here depends on this and this is set to null. Um, I need to think of a better way doing this. How can we improve this? This is the hook that is being called here. And the callback And the call back. The callback needs to needs to execute something. Um but we are here in a we are in a react environment. So maybe we can um is there a way to to render a React component? Yeah, we don't really. So this is a hook. Okay, let's ask um cloud code about this. Let's see if we can if we can improve this code. Okay. Um okay, I'm going to be honest with you, CL. Um I don't like the way this code is structured. Because um because block is a comment. Um sets the value of open model which is initialized. initialized outside of the function and I'm going to try a new toy that is called monologue. Okay. Monologue is the system we can use two. Let me see. Okay. I don't like the way this code is structured because for example the block usage command function sets the open model function that is initialized outside of the function and also is used inside of the callback used in the object added to the command array. So is there any way we can make this better. Okay, let's see if um which ideas. Yeah. Uh, use context using React context. Okay. Um, use context. Uh, okay. So, use context Block usage model. Open model. Okay. Block usage context uh provider value set is this open true. Okay. use. Well, first let's see if this works. Let's see if this works. So here it's fine that it's not um available. But if we go to a page, it should be there. Um, or maybe say only in the post. Let me see. Show block usage. Yeah. No, this is not working. Open model is not a function. Isn't there a way to go back? So if we go we come here show blog usage and if we go to a page we can show block usage only in the Post only. Okay, this is this part. Can user edit post is post editor. Okay, let me see if I console log. Console log. post type page. Post type view is true. If I do console log disposiator and can use edit post, can you That edit post here is undefined. Uh I can just update. So the first one is true but it's because of the second one. So in the page okay it's because of the second one but if we come here okay can youer update post. Um, I don't really understand this. Can you say edit post? Why this is only triggered in the post editor as true? So this is clear. This is that we are in a post type that has in a post type. We are in a post type that has a um an screen. Yeah. viewable, but the post ID, let me see. Um, okay. And why this return Okay. Why can user edit post return true only when we are editing a post in the post editor because it seems that we are checking if the user can update the post but that's also the case for a page. I mean the user can also edit a page. So yeah, can you explain me why can user edit post returns true only when we are in the post editor? We are editing a post. I don't know if clo okay. This specifically checks if the user can update posts the post type not pages. Okay. That's why it returns true only when editing a post. The issue is that can user it's hard to check the post post when you are editing a page when you editing. Okay. Yeah. Uh I don't understand very well the logic behind this. Uh can user Let me see if Let's dive in a little bit more. If we go to the we go well actually we can come here and say locator handbook and we can look for can user which is incore data. returns whether the current user can perform the given action on the given red resource. Calling this may trigger an options request of recip. Okay. Okay. I need to think more about this. The thing is that with this filter we limit only the addition in the post editor and um only in that case we are registering this because this is the hook that returns this object. of commands and it's loading false. So just common loader is and with that command register we uh block usage model. We trigger this and um we trigger this. Um, okay. I need to think more about this example to see if uh I want to clarify two things. I want to clarify this. I'll think more about this and I also want to clarify how this hook is interacting with this model window because right now it's not super clear to me. Okay, perfect. I think we can uh finish the session. Hope it's been helpful. And yeah, I think this is the last session of the year because I'm going on holidays. So yeah, let me give you a reminder of my YouTube channel. because I have done a lot of streams this year. There you have all the streams that I have done. And also if you go to my streams repository there you can find all the details all the details of the streams that I have done during this year that you can find the resources that we've been using the the projects the different diagrams and all of that. So yeah, we can call it a year. Um hope you have a great holiday that you take rest and and yeah uh see you next year. Let me know via Twitter or you can also leave your ideas here in discussions. I have a conversation open for ideas for streams. So, leave here your ideas for the streams in case you would like me to to cover some specific topic. Okay, guys. Hope you're doing fine and yeah, see you see you all next year. Bye., Creating Commands for the Commands Palette, YouTube, 01kcychd6cwbbyhd6v8zej2wy4.