 Okay, we are recording. Welcome, everybody. This is your first time joining an online workshop. Welcome. This is your hundredth time. Welcome. While you are joining, if you would like to go along with you today, there is a plugin that you can download and install. It's basically the plugin that we worked on in the last week's session. I'll just paste this in the chat now. And it's where we will start from today. If you were coding along in last week's session, then you could probably just use last week's code. There might be a few differences here and there, but it should mostly be the same as what's in this plugin. Okay, while you are joining, I'll do my usual introductions. He's also considering us knowing the chapter you're joining us from. As always, my name is Jonathan. I'm from Cape Town, South Africa. It is in the middle of summer in Cape Town. It is January and February of the two hottest months. So it is sweltering the hottest of the moment. We're looking at 35 to 40 degrees Celsius. It's about 95 to 100, I think, Fahrenheit every day. So yeah, it's in the middle of summer. It's crazy hot. It's a little bit of energy. I suppose I call myself an ex developer, but I guess I still am a developer because I still write code, I still create things. But I don't push them to production sites anymore. I create them for these sessions. So I'm now what I call the current instructor. I'm a developer educator. But I work at Automatic. I'm sponsored to work with the training team. And we create these online workshops and tutorials and various things for the known WordPress platform. Okay, today, today we're going to be interacting with the WordPress REST API, the WP REST API. If you joined last week's session, we got an introduction to the REST API. We created some get requests. We started building a bit of a plugin to use the REST API through the Backbone.js client that's available to WordPress. And today we're going to start interacting with the WordPress REST API. We're going to create some posts and delete some posts. And we're going to learn to use the REST API. As always, a few announcements. Welcome everybody. Leo was going to be my co-host today. If you've met Leo before, he's co-hosted a few times. Unfortunately, he had a bit of a family emergency at the last minute, so he is unable to join us. So Leo, if you catch this video afterwards, I have everything as well. As always, we are presenting in focus mode. But you are welcome to enable your video. If you'd like to see a base, you don't have to if you don't want to. But focus mode is just there to prevent any instances of zoom bombing. You are always, as always, welcome to ask questions. And you're welcome to post those questions in the chat or I need to ask questions. And if you have a question about something we're doing on screen, you're welcome to ask it while we're doing it. If it's not specific to what we're doing on screen, I do a lot of pauses for sort of tantech questions or maybe something else you're thinking about or asking me about a future session or anything like that. Just to mention, if anybody is connecting via a Linux desktop and they can't see my screen, apologies, that is a known issue that we've discovered recently in Zoom. I have a meeting with one of my colleagues. It was supposed to happen today, but it was rescheduled to next week, unfortunately, to test this out and see if we can figure out the workaround. But I will do my best to sort of talk you through the code that we're looking at sharing the links and hopefully with the plugin download and what we're talking about, if you're willing to see it for a longer time. Sergio says, I'm on Linux and looking fine. Thank you, Sergio, for that. That's useful to know. It seems to be under certain environments only. I'm wondering if it's got to do with Wayland, which is the windowing system that I think a bunch of switches recently. So I still need to figure that out. So I'm going to switch between the two and do my test. Sergio, if you don't mind when you get a chance, maybe DMing me or something, you'll set up what OS you're using and what windowing system you're using that might help me narrow things down. You're welcome to send me a private message here in the chat or on Twitter. Okay, yeah, if you are coding along, make sure your local install is ready. You just need a WordPress environment and a plugin and a code editor. I have a plugin link earlier in the chat. I'm going to paste it again just for anybody who's joining the late. There's a possibility I might start going fast today because I'm a little bit tired, so I'm going too fast because you've got to be swimming down. And as always, I will be posting this to WordPress TV after the stream calls today tomorrow. And you can find more WordPress content on there at WordPress.org. This is where I said most of my day of updating and creating content. Alright, so our learning outcomes for today. We're going to be looking at the WordPress API endpoint reference documentation, specifically reviewing the post schema. We're going to talk about what that is and how it works and what you can use it for. If you've interacted with any kind of API before the schema documentation will look very familiar to you. And then we'll just start writing some code. There's a lot of theory today. It's mostly practical. There's lots of theory. Today's lots of practical. And we're going to update the plugin to allow us to create a post and we're going to update the plugin to allow us to delete a post. We're also going to delete all that HX code because we don't need it anymore. And if you want to, if you want to have a fun, well, I think it's fun conversation around the HX versus not HX fellow contributor to WordPress. This project opened up a full request to my, to my example code repo asking me to remove jQuery. Because vanilla JS can handle a fetch request. We're doing that in our code. I agree that we, we shouldn't use jQuery if we, if we can, we can avoid it because most of what jQuery was built for can be done using the vanilla JS. So I do agree with Eric, Eric, Eric or Eric, I think his best name is Eric. Eric's recommendations to remove jQuery. Now having been said, sometimes jQuery is funny because it's prototyping something or it's an existing project that's already using jQuery. So I don't, I don't say you should never use jQuery, but I do agree with Eric's suggestion of removing it from this project, which we were going to do anyway. So that was a fun, a fun bit of the week. Okay. And then if we have time, I'm going to quickly show you a tool that you could use when you're testing APIs. It's called Postman, something you may have used it already. It's very handy for working with REST API endpoints, testing them, seeing what responses, what requests they can receive, what responses they can get. We're not going to dive, if we have time to look at Postman today, we're not going to dive too much into it because I plan on diving further into how we can use Postman next week. And it also requires you to have Postman stored on your machine. So, so I would say if you're going to be joining next week's session on the REST API, install Postman if you can up front. But we'll talk a bit about more about that next week. And then specifically our objectives today, we're going to, objectives one, really have one set of objectives, so we're going to be waiting. We're going to specifically be setting up a new example plugin. We're going to learn to read and understand the REST API schema, which I spoke about, update the plugin to create posts, update the plugin to delete posts and then look at some JavaScript refactoring that we can do, which is not specific to the REST API, but it's possibly another way of looking at doing things. Again, if we have time for that. So those are our goals today. Those are my tech boxes that I need to make sure I'll cover what we call the sweatshirt shop this time. Okay. Any questions on all of that? Any problems, any issues? I'm going to grab a sip of the last sip of my energy drink and then we can go. All right, so let's just quickly review the plugin that we haven't stored. So I haven't really installed the plugin on my local WordPress site, hope you can see this if you can't please let me know. So there it is WP Learn REST API version 002. This adds the WP Learn admin page to the site. It is a simple screen with the load post by admin Ajax button, which doesn't actually request. And let me pop open the developer console so you can see that request happening. Let's refresh this page. Let's get this up. Some reason why console is working today. So there it's doing the Ajax request, returning the posts. And then we also created the load post by REST option, which does the same thing that uses a REST API. The slight difference there you'll notice if you clear the posts here. Loading the post by admin Ajax using whatever default functionality we use since broken, probably because of some banging my code somewhere. So this is refreshing it again. It only returns five posts because we're using getPost, which is the post, whereas doing it by the REST API defaults to 10, which is a setting by the REST API. So just an interesting difference between the two solutions. Thanks, Sergio. I'll do some research on that and see what that's using. Okay. And then there's a clear post button, which just resets the text area to back to nothing. And that's all the functionality that this plugin does currently. Let's review the code. So let's pop over onto the code. So in the PHP side, we have the admin menu being created. Very simple and straightforward WordPress stuff there. Then we have the admin menu page callback, which loads the HTML that displays that page. And then there is the admin in queue strips function, or at least the hook into that action, which includes the REST API JavaScript file and sets up the load Ajax object. So that we can pass the Ajax real relative front end. And then there is the Ajax handler, which handles the Ajax request, gets the post and returns the post as Jason. Then in the JavaScript side, we have our entire jQuery set up over here to handle the Ajax request. It basically gets the load posts button by the ID. Make sure that the load post button exists on the page. So this is basically if it's anywhere else, this will, this will fail and trigger the rest of this code. And then it registers the on click handler, which is the function that posts to the Ajax URL. It posts the first learn fetch posts actions that that action applies, returns the posts, captures the post into this array and then loops through the post using the form function. And it pens the post title to the text area in person. So that's the Ajax way. Then the clear post button is basically just doing the same thing, getting the button and checking if the button exists. In other words, can recreate that button by ID. There might be a better way to do this, but this is the way that I know to do it. But that's not important for the REST API. And then as the click event listener returns a function that will fire this function. The function gets the element to the learn posts text area by the ID and just sets the value to the string. And then finally the loading of the posts using the REST API. Again, all the checks, the event handler. So that's basically binding to the click event of the button. And that uses the WordPress BackboneJS API client and creates a new posts collection. And then it fetches the data from the database and basically returns it. And sets up a done function. So when that fetch has happened, it's an asynchronous request. So when it's finished, then the done function will fire and will pass the results of the posts into this post variable. And then again, just gets the text area does another loop, same as we did in Ajax and then adds the title. The one thing that we didn't do last week, which I'd like to cover very quickly now is in the fetch, we're passing in an object of data. And then the data object property is the value is another object. And here we're specifying the underscore fields, which you'll remember is one of the global parameters where you can filter the fields that you're querying. And we're specifically just querying the title here. So if you had a look at this post object in the console, let's actually do that now quickly. So if I console lock posts there, and I switch back to my browser and going to refresh, and I'm going to switch into the console. You'll see that there's the post, the posts array, and it's just returning the title. So that was what we spoke about filter in your data. So just as can you share your screen please. So my screen is being shared that was that was kind of what I was saying about Linux and screen sharing the problem. Are you not seeing my screen are you just seeing my face. Okay, so that is unfortunately the situation on Linux clients we are we are discovering problems with with zoom screen sharing I'm not sure what it is and need to test it. So, if you would like to to try this with me, if you have the plugin in store. I'm lying 50 of the jobs for probably just console lot posts variable refresh the page and load the first virus I apologize for this. Hopefully you'll be able to follow along if you get stuck send me a message in the chat and I'll gladly stop and just make sure you're in the same places. Okay, I'd love to know what that problem is it's begging me now and I will find out one way or another. Okay, any questions on all of that code we just wrote on last week if you didn't join last week session don't worry it's not like it's necessary. We're going to start working with it today but any questions on all that code if you're looking at it now in either my screen on your side, any questions on how it works doesn't make sense to you. Feel free to ask them now. Otherwise, I'll just give us a 30 second break and then we can we can start writing some more. I put a question in the chat, but maybe you're not seeing it. I'm also not sure if you can hear. I can hear you. Was your question the one about the WP API collection. That's correct. Thank you. Thank you. Thank you. Yes, so I did. I did cover this in last week's session but we can we can gladly go over it again very quickly today. So in last week's session we spoke about under user the rest of that can you see my screen. I can yes. Okay, excellent. So if you go to the I'm going to paste the link in the chat anyway so the folks who want to go along with us. If you go to the API reference documentation under the using the rest API section. There's a section on the backbone JS client. And that is a backbone. JS, which is a JavaScript framework client library that is written for WordPress that is available to WordPress. The only thing that you need to do to make sure that your code can use it is either use this functionality to enqueue that script. Or if you're using your own JavaScript to set it up as a dependency. So here I read up here. So if you have a look at the plugin code that you've installed, they have installed it. And you go to the PHP file and you scroll up to the WP load rest in your script function. You'll see there I am specifying WP API as a dependency. So what that means is my JavaScript code will only run once that dependency is loaded. That dependency is loaded by default with WordPress every time WordPress fires. And it's available as far as I know in both front end and back end. I'm just working in the back end right now. I'm going to move over to doing things in the front end and later stage. But as far as I know, it is possible to use it on the front end as well. So when we get to, I'm going to later on, we're going to pull something for the front end one of the future sessions. And we'll see how we can do that. But it should be available if you've set it up in like the Nazi suppression. Yeah, it does. And it explains a lot or it clears up a lot of issues that I've had with back issues around error messages around backbone, which I didn't know where they were coming from in the front end. But I do have a follow up question then. Is there a reason why I would include WP dash API as opposed to just calling the rest endpoint by URL? Good question. So what you what you get by including WP API is you get sort of built in the built in models and collections that that background client makes available to you. So as an example, let me let me go down to this code over here. So for me to fetch a list of posts using the URL endpoints. If I was going to use let's say something like a window fetch, which is available in browsers or whatever, I would need to make the request and then specify the URL and then I would need to do a little bit more work. Whereas here I can literally if I just wanted all posts. I can actually take up this filtering over here and just create a new collection and then just special posts and enough to tell enough to tell us what the post endpoint is. You'll also see later on today, when we're creating a post, there's additional functionality that comes along with that as well. So this is just in my opinion where the advantage comes in. So it basically it makes it simpler to interact with the WordPress rest API days objects. You don't have to a while ago I actually worked on plug in where we were interacting with the rest API and I just use the fetch function. And I just called with the URL and I did things that way so there's nothing wrong with doing it that way. This is just a little bit easier for somebody who's used to it. I hope that answers that question. Yeah, totally. I'm looking forward to seeing how it benefits faster coding soon. Cool. Okay, we'll get to that in a second. Shelly says, can you use that backbone.js to load a custom poster? That's actually a good question, Shelly. To the base of my knowledge you can, but I think it requires a little bit of work because obviously it's got, if we have a look at the documentation, it's got specific models and collections available to the default post types in WordPress. But I think it is possible. I actually don't know for sure because I haven't done it yet. We're going to do it in a future session. I'm planning a future session around creating a custom post type, setting it up in background accessing it and all those kind of things. So I don't know for sure that the answer is yes, but I do think the answer is yes. And I would suggest we're probably going to do it. My plan is next week to work on authentication and how that works and using the Postman API to kind of test endpoints. And maybe that's where we're going to maybe look at building something on the front end and we might need to use more authentication. And then in a future session I'm planning on doing custom post types and how we interact with those. And then in the future session I'm planning on doing metadata and custom fields and how we work with that. So it's all coming in future requests. So I'll have the definitive answer for you when I do that research. Sergio says it's more performant too since you aren't making all these HTTP requests. Yes, probably. Again, I don't know the definitive answer to that, but probably it is more performing because you're using things that are already there. So it essentially boils down to the same HTTP request because it's a quest to the rest API. But because it's kind of built in it's probably more performant to use a backbone as not actually had somebody on Twitter recently asked me that they were what they would like to see is they would like to see me using backbone.js and then using like the same maybe the same structured same layout but using pure react. So that might be something we can do in the future session as well. Yeah, yeah, same request that might be something we can look at we can maybe look at building with backbone with fetch and then doing some kind of benchmarking and seeing what happens. So yeah, those are interesting things we can dive into unfortunately I wish I knew everything about WordPress. I'm also learning as we go through this but yeah that could be interesting that might be something I could do on a live stream. We'll do we'll do you know use window fetch will use background.js and then do some benchmarking see which one is possible. Okay, cool. It's interesting questions folks thank you. I'm trying to make me take notes I can make notes later and we can think about this one thing I will say, let me suggest this to you. If you have these kinds of questions, and you would like me to revisit them. If you go to notes not my name sorry my face again. If we go if you go to, I'm going to share this like in the chat. If you're going to get her WordPress learn. This is the get up repository for the learn WordPress website and for the training team. We use this to manage all of our content. We use this for the learn WordPress website is all managed here so this is like our core if you will. And if you click on issues, and then filter by assigning myself because I'm logged in it shows me at the top of this but find myself on the list. Then you will see that I have issues for all my online workshops that I'm either planning or have ran the previous week. And so here for example is interacting with the WPS API. As you've asked today, if you would like me to do them in future sessions, feel free to comment on the issue. Either after the session maybe you think of something else or you want me to remember the question. As a comment leave it there for me and then I can come back to it later, because I love knowing what people want to know and then presenting those topics so so please feel free to do that. I think I'm going to go forward and include the get up issue in my in my slides. Now I have to remember. Okay. Right, let's get going. So, documentation. Now, one of the things that I love about the rest API is, it's one of the things in WordPress that was developed fairly recently over the last couple of years. It was developed in a site around 2014, 2015, 2016. And it was developed by developer works for company called Human Made. He's now the CTO of Human Made. And he made sure that the documentation that came with the merging of the rest API was very well written. So you can learn all about the rest API just by reading the documentation. And one of the great things about the documentation is there is an endpoint reference. And this endpoint reference and remember we spoke about last week the endpoint is the different methods that you can send to a root so root being a URL. So it was wp-json slash p2 slash post or something like that. Let's actually go back to that. That section where was it here we go. The get request to the wp-json endpoint. Sorry, the root is the URI which can be mapped to methods and the mapping of a different method is known as an endpoint. So the endpoint reference is all the different options you have for the different routes. So for example, if we click on the posts route or the post resource if you will, it has the schema for that. And the schema is basically the fields that exist within a post record. Now these fields pretty much map up to the actual fields in the post table in the database. So we have the date, we have date gmt, we have the GUID, we have the ID field. If you've worked with the post table, many of these fields will be familiar to you. One thing that you will notice is that some fields aren't direct links, direct matches. Specifically, I'm going to use the title field. So those of you who might have worked with the post table before, you'll know that the field in the database is post underscore title. In the REST API, it's just title. So that means when you're working with your REST API endpoints and you, for example, and this is where I got stuck in my session last week, and you're wanting to filter by a specific field and your brain is saying, hang on, I want to filter by post underscore title. That doesn't work, you need to filter by title. So it's a good idea to understand a red endpoints schema for your, for the type of data that you're working with. The other great thing about this documentation is if you scroll down, there are examples of what you can do to list posts, to create a post, the arguments that you can pass. So it's quite full feature. So for example, to create a post, you can specify the date, the date you have to, you can specify the slug, the status, the password, all of these kinds of things. So it's a good idea to read through the documentation to have it working for you. You'll notice that they give examples of just a plain old get request. So you can get post by ID or a curl example if you use to use a curl on the, on the command line. And then you can also use this to test out your requests in postman or one of those things. So I just wanted to make sure that everybody's aware of this and knows where to find it. Then you can do updating of posts, you can do deleting of posts, everything is here. And you can just, and you can just read and learn and figure out how these things work. Okay. So that is the theory for today. Today, we're going to be working specifically on creating posts and deleting posts. We're not going to dive into all of the fields. I'm just going to show you very simply really post title and post content. And then I'm going to show you what that does in the model and how this things together and what it sends or what it retrieves, and then we'll do it to these. But before we do that, we're going to do my favorite thing. So if you are coding along with me I'd like you to join me in one of the, I believe most satisfying parts of software development and that's deleting the code you don't need anymore. So we don't need the Ajax loading of posts anymore, because we're, we're moving away from the old. So I'm going to take this inside section of code here, and I'm going to delete it. Okay, we don't need anymore because we're loading, we're loading posts via via the rest API. So that's in the JavaScript file where you then need everything to do with a jQuery line if you're coding along you can't see my screen it's everything from line one time to lines 27. We can just go ahead and delete that. In the PHP file, we do still need the admin menu. We do still need the render admin page, because we're going to be working with that. In the loading of the main JavaScript file, because we're using WPA in the background client, we again don't need the script localization and setting up the admin URL. So we can delete all of that code so if you can't see my screen that's line 53 to 62. So we can delete all of that. And again the Ajax callback at the bottom we can delete all of that as well. So now we've got my screen of code which I think I know I like that I'm sure lots of you like as well. And the cool thing now is we don't have to touch the PHP side again and this we're adding fields to the form because we're going to do most of the work in JavaScript side. But we're going to start working with before so let's have a look at what that looks like on the front end quickly. I refresh that page. We still got the admin Ajax button so we can delete that as well. So if you go into the render form submissions admin page. The button is the very first one at the top of the WP learn Ajax button. We can delete that. And if we refresh that. We've got all that good to catch so we can load post by a risk that's good and care first exit. Okay. So now we want to create a simple form that will allow us to create some boss. So in the coding window. What I like to do is I just like to wrap things into so they're just nicely laid out. Obviously this depends on the design and everything else. So what I'm going to do is I'm going to pop the first section the admin post text area section. Sorry, not that section but the section alert. I'm going to create another day. I'm just thinking now this is probably not going to work out what to just give me a second there and it creates another dip. And close it. And then in here I'm going to have a two tag. And I'm going to call that post. And then I'm going to use some text fields. I don't need. I need to create a form field, because I'm not using the submission process. I'm going to use the form field anyway just because I like to have it sort of clear in my mind what I'm working with. So I'm going to have that there is the form. And then what I'm going to do is I'm going to have another dip. And yes I am looking on screen to remind myself how I want this to work. And then I want to have a label. And I want to have a input type. For the label I'm going to have post title. For the inputs I want it to be spelled today. I'm going to give it an ID. And I'm not going to worry about that. I'm going to give it an ID. I'm going to give it a post title. So we keep it nice and simple. Then I'm simply going to copy this code. And we're going to say post content. And this I'm going to make a text area. So we're going to take up the text area. And you can give it a different ID. And that can be done with post content. If you are coding along, don't worry. I will give you a chance to catch up if you need to. Let's just see what this looks like quickly. It's probably not going to look very pretty. It definitely doesn't look very pretty. So we can fix that a little bit. I'm going to leave this on screen if you're coding along with me. What I'm going to do to the text area is I'm going to add some columns. So that it's a bit wider. You'll see in the original post text I remain at 125 columns. So I'm going to make this 100 here. And then I'm going to make it 10 rows. So that will make the text area a little bit larger. So let's see what that looks like. It looks a little bit better. But it's still kind of wonky. So in normal situations I would spend some time styling this or just make it look prettier. I'm going to cheat a little bit. And I'm going to add an inline style to the div that contains this creation post. And I'm going to make it with 50%. So what that's going to do is it's going to force the div to be 50% of the page. And it just kind of forces the post content to kind of realign the leaf. So let me show you what that does in actual HTML. You just spec this. So there's the div there. No, not that one. This one. And you'll see that I'm using my finger to point. But you can see where it's blue and orange. That's because I'm forcing the div to only be 50% of width but the text area is wider. It's just below. A little bit of a cheat. It's because I'm doing it for a demo today. So that's not how I'd recommend doing it. For our purposes, it's perfect because we just want something simple that we can post data to. Okay. I'm going to leave this on screen if anybody wants to copy this code or needs to just catch up and see where you are. If you are coding along and you're good to go, give me a thumbs up in the chat. And then we will start creating. Oh, our extreme limits. I need a button to trigger with this. We need a button. So let's create another dose. And close it. And then let's put in a button. Let's see this way. Type this button. And if you've got an ID or WP, learn, submit post. And then let's just give it a value of act. So just that's nice. Yeah, which you can find. Let's see what that looks like on the front end. There we go. It doesn't do anything right now, but it's there. Okay. So I'll leave that on screen if you need to follow along, grab a sip of water and then we can continue. If anybody needs to stop and hold that for a second, let me know. But otherwise we should be good to go. All right. What I'm going to also do if anybody needs to copy this code, I'm just going to pop it in the chat quickly. Should post. There we go. So if you need it, it's there. So it's a very simple form. It's just going to give us a title, a content and an app. Now we need to start creating a post. So we're going to use the post title and the post content. And I'm going to show you how sort of quick and easy it is to create this post. And why I think using background is a good idea for this is on. So we can use the same kind of functionality to check the button exists and all those kind of things. So I'm just going to cheat. I'd register by copying this code. I'm just going to say, yeah, create a post. Let's slow down a little bit. So it's more on screen. So it's this time. It's not going to be low post button. It's going to be the ad post button. So it's this one over here. It's a submit post. So I'm going to replace that with that there. So we're getting back by ID. So it will be a submit post button ad post button. So ad post button, which means we can check again. Is it not defined? If it's not now, then we know that things are happy. And then we can grab these clothes and brackets as well. There we go. So in here, we're going to be able to do something. Okay. So we're creating a variable based on the element by ID. If that element doesn't exist on the page, it will either be undefined or null. So that's what this check is doing. And it's saying, if it is not undefined or it's not null, then we can then we can start doing something with it. Thank you for pointing that out. Yes, there's the event list list. So let's update that as well. So we need to add the event list into the correct button. That's the click event. And then it will trigger this function. Currently we're not passing anything to it. Then we can manage our code there. Okay. I'm going to copy this out again and pop it in the chat if anybody needs to see it. If I'm going too fast, please let me know. If you need me to slow down, please let me know. But now we can start creating our question. Okay. So the first thing we'll need to do is we'll need to get the fields. And the simple way to do that is again to use the document, get element by ID. So it will be a const title. And we'll say document, get element by ID and love. And what I'll do here is I'll just create one for the content as well. So we're ready to go. And then we just need to grab those IDs from our form. So it'll be WP learn post title and WP learn post content. So here we go. So this title and post content. And we need to get the value of these things. And what's cool about JavaScript is I can just say the value there. If I didn't say value, we could turn the entire element. I don't need the entire limit. I just need the value. So title there will be the type of value of the file and content will be the content. If you want it to be more explicit, you could say title value. But in this instance, title will be sufficient. Now we want to create our post. And to create our post, we can use a linear pop-on over to the documentation. And I'm going to grab a link out of my resources slide, which is the very last one. No, I don't have it in my resources. That's annoying. I do have it in my notes. So I'm going to grab it from my notes, share it in the chat, and then share it in the resources slide as well. So it's going to be read. And I'll update the slide. So if you don't have it, in case you are watching this afterwards, then we'll go back to you. So this is the documentation on using the background client. And there is an example of how to use the model to create posts, for example. So we can effectively just take this entire line here. So I'm going to copy out this whole line. If you're on that page, it's the first sort of section of code here. And we're going to use that in fact to copy the whole line there. And I'm going to not pitch this one. I'm going to pop it in here. I'm going to change the bar to const, because const is a more modern way of creating variables. And it's literally just the new WPABI models post. And then I can pass in my title and I can pass in my content. OK. Sorry about that, Sergio. I hope you're able to watch it afterwards. I'll connect with you afterwards to find out what you're using. And maybe you can help us with the test. I do apologize. Sergio just probably missed me and said he wasn't able to follow my line. OK. So I'm going to just pop this object onto a new line so we can see what this looks like. OK. Thanks, Ashley. And this is where I like using the background JS file, because now I can just basically go title and pass in the value of the title. And I can go content and pass in the content. And what that's going to do, I want to show you this in the front so you can see what this does. So let's log this to the console. Is it's going to create the post object ready to be inserted into the database. And because it has the schema, because the background JS client knows what the schema for the posts are and what the default value should be, it's going to pre-populate all that information for us. So let me quickly show you what that looks like. Just checking my notes here to make sure that everything is good. Yes, everything is good. So let me show you what that does. No, not that one. OK. So let's pop it over to the console. I'm going to make this a little bit bigger so you can see the code. And let's refresh. And then let's create it up. So we'll just give it a new title, whatever the case may be, and some content. And we're going to click on the Add button. Now, this is not going to add it yet. We're just creating the model. But I want to show you what this does. So what I like about this is in the attributes object, it has the content in the title. And it's now going to, OK, this is interesting. When I was working with the other day I was doing something else. And it's not doing what I'm expecting it to do, which is real. I don't know why that is. Possibly I did the wrong thing. So it looks like I made an incorrect comment thing. So it hasn't done what I thought it would do. But when I was working with it yesterday, it almost to me looked like it was setting up default values, like setting up the default states, or setting up a predefined default ID. Maybe I did something wrong, but I can't remember. So I'm going to have to take that step back and say, it doesn't do those things. So anyway, we'll just have to reset. So here is our post object ready to be inserted. It has the content. It has the title. And we can now insert this post. And to do that, we can just use the post save function or method. So if we go back to the code, we can say post, sorry, post, no set. And that will create the post. But it would be nice to do something with that post afterwards, maybe to inspect the data and make sure it's been saved, what data has been saved. So you can change the done function after that. And that will return the newly created post. And then in that function, you can alert, send a message to the user whatever the case may be. So what I'm going to do is I'm going to log the post out. And then I'm going to, sorry, let's see if I possibly, I have done something like that. So let me go back one step. So it's done. Functions. It's a function. You see the call to support that function. And that receives the post. And then we can go back from the functioning. So there we go. So it's done. So save the post. And once the save is done, we set up the call back function. It receives the newly created post objects. And then we can say something like, let's alert post saved. And then let's just console a lot of that post. There we go. And there we go. And then we will need to close this. So that will be there. I'm going to go back and put this in. Okay. So that takes that out of the way. Let's get that. And this is what I like about using that. It is essentially one line of code. You could make this even easier by you could pass the value from here straight into the object where you could set up object here and just pass the object in the field. And then essentially post save. And you're good to go. So let's look at what that does. So let's refresh over here. So let's load the post. There are all our posts. Let's create a new post, a new post with some content. And if we add that, the post is saved. Let's check. Yes, the post has been saved. It has an author. It has categories. Common status is open. So these are all the defaults. There's things. Do you ID ID, all these kinds of things. It has our title, which we specified. I can't see the title right now. Maybe down here, there we have a title, a new post. It has the content with some content that we specified. And the post has been set. We, if we click on over to the post list, we will see there is a new post with the content. Now what's interesting is it saves it as a classic block because we haven't posted lock marker, which I find quite interesting. So this all works with the classic editor as well. So if you're using the classic editor, there's no reason you don't have to use the rest API. But you can also pass in block mark. So for example, so let's say another new post. What I'm going to do is I'm just going to create a new block line. Yeah, so it's got some content. You don't have to follow this along if you'd like to, but your block mark up will have, you switch to the code and it's all have some paragraph tags. So if you want to pass those in, I'll stick them in the in the chat if you want to play with that. But if you, if you pass that in raw, because obviously this text area is just raw data. And there you go. And you create this post, add, post has been saved. And let's refresh our list of posts. Yes. There's another new post. There it is. And if we exit the code, it's a, there is the block content. So you can create classic content. You can create block content. You can do whatever you need to do. And that is how quick and easy it is to create a post using the background JS client and using, using plain old JavaScript. So I'm going to leave this on the screen. If you want to follow this along, if you are following this along on your side, if there are any questions around creating posts right now, ideally not questions around custom post types. That's right. Custom posts, custom fields, should I say, we're getting to that, but not today. If you have any questions around what we've done right there, let me know in the chat or via Mike while I take another break and then we'll look at the lead to. I'm getting an error, but I know that I missed the part about what we're supposed to get rid of for the, the Ajax code. Okay. We view that part again. Sure. So let me, what, before we, before we look at that, sorry, Michael, is that you asked the question or is that someone obviously someone's hand up and Michael, did you ask the question? That's me. Yep. Okay, perfect. Excellent. Sorry. I didn't see the hand. So I wanted to ask. So let me show you in, if you know what I'm going to do this, I'm going to just copy this and then just do controls. It looks like you got rid of the whole jQuery. Sure. I'll show you that in a second. So let me just go back a few steps. If we don't, if we don't come right then we'll do a little bit of liability back in. So don't stress. I actually did this with someone last week. So if you scroll, if you scroll to the very top of the, of the window, this entire jQuery section, so everything from the line one, all the way to before the clear the text area opening quote, so comments needs to be removed. And then in the PHP side, you need to remove the, let me show you in, and get up quickly. Yeah. This one. PHP side it was in the, in the rest in Q scripts function, which is a 943. It's this section about localizing the script that gets removed and the whole Ajax callback at the bottom. Is there anything, is there anything that you missed out on that? Yeah, I sure did. Okay. Is it working? Is it working now? We'll wait for you to check. Not the one for a learn fetch post Ajax request. Yeah, we don't need that. That can go as well. And then this localized script called, but make sure you leave this, this closing one there. That just this bit over here is to go. Right. You're still getting errors. Well, it's not, now I'm not, I'm not loading. Using the, loading from the, the rest button. Actually my Ajax button is still there. What's going on? Okay. Sorry. Yes. The Ajax button that is, if you go into the form area, it's this low post Ajax at the button. Just take that out. That shouldn't cause you any errors though. If it is there. So, so remove that as well. Okay. And what are you seeing? Is it just not loading? Yeah. The posts aren't, the posts aren't loading now. Okay. Okay. Do you, are you able to open your developer tools and see if you're getting any errors in the console? Yeah, I sure. Yeah, I've got it. I've got it open. Okay. What errors are you seeing? Well, I've got, I've got deaf tools failed to load source map, which is a react. Okay. That sounds like it might be something else in your environment that's causing an issue. It might be a conflict or something, something. Are you working on a key local WordPress install? Or do you have other plugins in store? I am. It's clean. Okay. Okay. So let me do it this way. Do you want to just, we might, we might struggle with this a little bit, but are you able to copy your entire PHP code that you have currently and paste that in the chat? Yeah. Yeah. You can do that. And then I'll load it up on my side and I'll see if I can see anything. Okay. Everyone are just. If you're happy to send it to everyone, that's fine. Or you can just send it directly to me. I don't mind either way. And I know I've seen everyone. Okay. Cool. Right. Let me just load this up on my side and see if this gives us in years. This is how I hope someone. This is a great way to do it. Okay. Let me see what that does. Okay. Okay. There we go. That's not working. Which is fine. Okay. So let's have a look. So. So. So. Okay. So that's not triggering something. So let's have a look. So can you. Can you also paste your full JavaScript? Thank you. No problem. No, no. This is this. This for me is why I do these things. So we can figure out together. What's, what's going on. Okay. Right. Let's just do this. Okay. So that's not triggering something. So let's have a look at it. So can you. Can you also paste your full JavaScript? Okay. Thank you. Not gonna lie. I love these. I love these live debugging sessions. Yeah. Thank you. No problem. No, no. This is this. Okay. So now I've got. You've got. So let's do it. Fresh. Let's have a look and see. Okay. So it looks like the buttons aren't being triggered. So let me have a look. I can see. Ideas. Ideas. Okay. Let's take out the HS. Okay. We're doing this. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Can I trace my self-的时候. Okay. I can trace. We're going to work about the. Okay. I know a list that were just. So what I'd like you to do, I'm just going to reset my site. You. You've. You've deleted something that you shouldn't delete it which is not going. So, let me show you what I'm talking about. So you need to keep, you can just do this. You need to keep. file is not being loaded. So at the bottom of your PHP file, underneath your form callback, add this code, which will actually load the JavaScript file. And then that should start things working. In queue. Okay. Okay. Yeah. So the in queue needs to be there just that HX partner taken out. But we still need the in queue to tell it to load the JavaScript file and use that. Yeah. Okay. Okay. Are we good? And check that. And let's see here. Fresh little post boom hello world title content. And boom. Dang it, bad request. All right. Okay. Okay. And queues that. So is it giving you an error now? Yeah, I got a 400 error. No problem. No problem. No problem. So let's take it. Let's take another step. Let's go back here. I'm going to everybody. I'm going to just make my text a little bit smaller because it makes it easier for me to read what's going on. So what I need now is this. This church. I'm going to work with your code, Michael. Okay. So you'll learn. Just check. Yeah, you do have a closing. So I'm going to copy it out. So let's update this on my side. There. And there. And grab your JavaScript. Yeah. Go. Okay. That's probably me. So don't worry about that. That's probably me being dot. Just copy the PHP. So one downside about Zoom's comments is it doesn't really, it's not really conducive to work in this with code. Okay. And then let's take the in queuing. Let's go. Okay. There we go. Sorry. Load by risk. That works. Okay. Okay. So that's getting a 400. So let's have a look at your code. Let's check something. Your, can I just confirm your in queue strips function? Is it, is it different? Can I confirm that in the register script called, you've got the third parameter, you've got array and then WPAPI. So this line. Yes. Okay. Okay. Good. Wait. Can you go back to that one for a second? Because I've got localize the script. Okay. So you just, you just need this. All right. So, all right. All right. So let's get rid of localize. Yeah. So get rid of localize. Just the localize strip function. That's the last line. Close it out. Okay. Oh, post. Still getting the, still getting a bad request. Okay. I'm going to try something. And then what I might need to do is is exactly what I was just doing. So here we go. Here we go. Here we go. Here we go. So in the ad post area, remember, we need the value from the field. So the value gets added to that line. And I've got a feeling that for feeling that we fix it. Yes. That was the, that was the problem. So at the end of your, you're getting your title and getting your content, you need to make sure to specify value and value. Okay. Those are in it. Working up. My code is identical as far as I can tell. Have you refreshed? Yeah. I'm actually, I'm getting a, getting a parse error. Okay. Then there's, then there's, so can you copy your whole create post section and base it in the chat for me? I sure can. Thanks. I'm going to grab it up now and pop it in there and let us see. Okay, that's fine. Okay. It's not that. And can you, can you copy, paste your PHP file for me or your PHP code? Something's maybe gone wrong somewhere. Oh, sorry. That, that was my PHP file. No, that was your JavaScript that you just, that's your create post JavaScript that you just sent to me. Oh my God. Have you got some JavaScript in your PHP? I put my create post in the, in the PHP file. It's got to be in the recipe, recipe out of JS. Yeah. It's, it's in, it's in JS. And I did not add value to the value. It's like a snowball sometimes. Absolutely. I just get back to, I can't get this, I'm getting a syntax error and I didn't even, I didn't even touch those lines. What kind of, what kind of error was I telling you? It's a clear post, a clear post button, a syntax error, unexpected identifier, clear post button. Okay. So that would be up here somewhere. Why don't you grab your whole JS file and place it in the chest and tell me everything in the JS file. Okay. Here we go. Okay. So let me grab all of this. And then will you do your PHP file as well for me? Okay. So I'm working with the same code as you. This is your, this is your JavaScript file. So you've got some JavaScript in your PHP again. This at the bottom here needs to not be the clear text area button JavaScript. If that's in your PHP file, that's going to give you issues. That you said that the clear text area, but Okay. Let me show you. Let me pass, let me pass the PHP second just in a second. So if we I'm going to paste your code in my PHP file. Okay. And the clear text area button and the clear post button at the bottom that's JavaScript. So if you don't want that, just delete that. Oh, man. Okay. It's okay. So now it should be, let me test that on my side. Now we should be, we should be cracking. There we go. There's all the posts and there's our posts created. So now you should be on the same page because I'll use exactly your code. We just got PHP on the one side and JavaScript in there. I'll say my alert worked. Boom. Okay. Awesome. Okay. Here we go. Great. Okay. It's all good. It's all good. All right. So now that we can create posts, now let's see what it would look like to to delete a post. So again, we're going to use a form. And what I'm going to do is I'm going to have a delete post. So I'm just going to in Visual Code Studio. I'm just going to format this a little bit. So there we are, back to that. So that's back to that. That's great. And then let's pop this back on. So that gives us that and that. So we can take care of the jQuery stuff. I'm very quickly going to get my code from my notes and make sure that we are on the speed. So please give me one second. This is a mental note. If you ever are going to create a code content or any kind of live workshop, always keep your code examples handy so that you can very quickly get back to them. If you ever need to write them back, some things. So we're just going to reset all of that. So we're back to where we need to be. There we go. Okay. Good. So the one thing that I wanted to mention before we go on to delete it is that you'll notice that all of these posts we're creating are set to draft mode. So that's a default setting that WordPress creates if you don't specify a specific status. So you can fix that by simply adding the status field to your object that you're passing to the post model and then setting it to publish. And that is one of the settings we'll publish if you have a look at the documentation for posts. If you have a look at the schema and you scroll down to status, it says there, a new status for the object. And it's one of published, future, draft, pending, or private. And those are all the statuses we are used to in when working with WordPress. So once that is done, if you go back to your admin page and you now create another, once I'm typing my protein, another, sorry, another post where then I'm going to grab the block content for this one just for the sake of processing some block content. No, that's not what I want. I want that. And it says some more new content just to make it more interesting. And if I now add that, it's going to add the post. And then once I have hit OK, and I hit load posts, there my another post is sitting in my list of posts because the request is only going to request published posts. If I wanted to request draft posts, I would need to set that up in the filters or whatever the case would be. So any of those fields that exist in the schema, you can be posting values to and it will then set them up. So you'll notice that you can set up the type of post. So that's where it's custom post up or not, whether it's a post page or a custom post up. You can set up a password for password protection. All of the fields that you can set up in a default post, you can pass it to the object by the REST API when creating the post. Okay, let's move on. And the next thing we would like to do is we would like to, sorry, I'm struggling with the zoom controls that in my way all the time, so I'm moving around. The next thing we would like to do is we would like to delete a post. So I'm just going to grab my form because I like the way it's laid out. And I'm going to pop a copy of it right at the bottom here. And I'm going to say delete post. And then I want to maybe pass in the post ID because I want to delete via ID. So this will be WP learn post ID, for example, we'll still leave it as text. That's great. We don't need the content. So that's fine. We can delete that. We need a button. And let's call this WP learn delete post so that we can connect to the right button in the JavaScript code. And we'll just say delete here. Now, with adding this, I'm going to add this code into the chat. So if you need to add it, you can do it on your side. This needs to be added to your render admin page function in the PHP file. We want to be able to get the IDs in the load post so that we can see what the IDs are so that we can then delete them. And if we go into the API JS file and stroll up to the load post button area, we're loading the posts, we can see that in this data object, we're just returning the title. So now we want to return the ID as well. And the cool thing about the way the REST API works is in that field property which we're passing to the request, you can use a common limited list of fields that you would like to see. So if I just add ID and a comma to that list, it's now going to return the ID and the title. And then in this text area value, I want to append the ID to the string. So I can say post ID, and then I can concatenate that with a comma or whatever the case may be a dash, whatever I want or hyphen, and then add that to the string that is being forked. So in the load post area, I'm adding the title to the field subject. In the loop, I'm adding the post ID. And if we have a look at what that looks like, let's refresh this. Now when we load the posts, the ID shows up so we can see the ID we're working with. So now we can delete that ID. So let me just pause that for a second and make sure that everybody's up to scratch. So this is what the HTML looks like to add to the form to delete the post. I added that to the chat. And then in the REST API, find the area where you're loading posts. So it's the load post button area. Go into the all posts fetch. In the data, we're going to do ID comma there so that it returns the ID. And then in the for each loop, so let me just copy this out so that folks can see how that looks like if they need to update it on their side. In the for each loop, this is what it's going to look like. We're basically just appending the ID to the string so that it shows in the text area. Any questions on all that? Do I need to pause before we continue? Everybody happy with that so far? Okay. So I'm going to move on from here. We now have the ID that we're expecting. So we're probably going to type in something like 136 and hit delete and delete ID. So let's see what that would look like in terms of deleting. And if we go over to the backbone JavaScript client's documentation where we have the model examples, I'm going to place that approach on the jump around there. There are model examples, there are collection examples. And under the model examples, you can see, think it's in this one here, somewhere around here, I'll find it in a second if it's not. But there it is. We can destroy a model. So we can set up the model based on the ID field, and then we can just call destroy. And that will then call the delete method to the post root to then delete that first. So again, we pop back over to our JavaScript file. And again, we're going to be doing the same kinds of things. We're going to set up the buttons and all of this. I'm just going to basically copy all of this code for the submit post. And I'm going to replicate it for the delete post. And to do that, I'm going to remove most of this code here. We'll leave the title for now because we're going to fix that in a second. The button we called WP Learn Delete Post. So that's the ID we're going to use. So that will be WP Learn Delete Post there. And we're going to make this the delete post button. Just perfect. And then again, we need to replace submit button, submit button, submit button to the event listener. Then we're going to get the title. And in this case, it will be sorry, the title ID. And in that case, the ID we've set up is the WP Learn Post ID. So there we will get the ID. So there we go. So this is what that code looks like. This is for our deletion button. Everything goes into the delete. And now we can go ahead and delete it. And we create the model in the same way that we created it earlier. So we can say const, sorry, first, equals new WP API models, post, perfectly fine. And then we can class in the same kind of object. And this time we can just go ID and pass in the ID name. And that will then create a model of the post based on the ID. So let me show you what that looks like. There. And we're not going to actually physically delete it yet, but I'm just going to show you what that does. So if we switch back to the admin page and we refresh it, let's load the posts. And let's take ID 136, for example. And let's paste that in the field and say delete it. And there it is. There's ID 136. And there are all the attributes that we're using to then trigger the post. So it just has that ID in. And then we can use that to destroy the post. So we can say, just like we've done, say, we can say post.destroy. So that will destroy the post. And then we want to do something once it's finished destroying, we're going to show something to the user. So again, we can use the same done function. I do think it returns a post, but we don't need to use it. But we'll pop it in there anyway. Here we go. So that's all that. And we'll close this one out. And then again, we can just say the same. It's a console like post. And we can say post.destroy. So that's all of that. Looks like we're going to paste the small thing in the chat. We're going to grab it. There we go. And let's do some checking. So let's refresh, load our posts. Okay, there's 136 again. We're not going to create it this time. We're just going to delete it and see what happens if we delete. So yeah, post has been saved because I didn't change the text. But anyway, let's see what was in the post objects. So there we go. There's the original one that was created. There's the return. And let's actually see whether that post has been deleted. So there's ID 136 and other posts. Let's have a look at our posts. We have a new and new post. 136 is missing. If we use the load post virus, sorry, the tier post versus load post virus, 136 is indeed missing. So that's another reason why I prefer the Backbone.js point. It's just that quick. We create the model with ID. We hit destroy and we're good to go. And it does a lot of the work under the hood for us. And we don't have to worry too much about what's going on. Okay, any questions on what we've done there? It's very, very simple stuff, very similar to the creation. I know I say something, but I'm not going too deep into what's available there. Any questions about all of this or anything that you are not sure of? Okay. So that is basically everything I wanted to cover with you all today. If you want to see this code in its sort of final version, there is some additional refactoring that I did do on this project. We're not going to have time for it today, but I want to show it to you before we wrap up. Sorry, that's the wrong place. In the JavaScript file, what I've actually done is I've created a function for clear fields, which basically clears all the text areas. I've created a function for loading the posts, which clears the fields and then triggers the loading of the posts. I've created another function for submitting the post, which gets the field values and creates the post, and then a separate function for deleting the post. And then instead of adding all of that code nested in the event handlers, I'm just basically in the submit post button event handler, I'm just calling submit post and the delete post button handler I'm calling delete post. And that to me is a little bit cleaner, a little bit tidier. If I need to make changes to the fields being posted when I create or save, I can do that in the submit post function or in the delete post function. I was thinking about this the other day, this whole thing that I'm doing here, where I'm creating the element and checking if it's valid, there's a lot of duplication there. I can probably clean that up, but I'm not going to do that this time around. So if you'd like to have sort of a look at sort of the next step of refactoring, you can have a look at it on the spot over there. I like to take, I like to take functionality that will be commonly used and put it into its sort of standalone functions. It just makes things easier and reusable. Not that this project might be reusable later on, but we might want to use some of these functions later. So that's kind of what we can do there. Then I just want to show you postman very quickly. So let me see if I can load that up. So postman is this tool that is a free tool that you can download and install on your local environment. There is a link to postman in the resources slide of this session. I'm going to post that in the chat if you'd like to check that out. I'm not going to have time to go in depth into how it works today, but one of the things that I love about postman is you can create a workspace. And your workspace, you can then create multiple requests in that workspace. And you can save that workspace and then you can use it, reuse it whatever you want to. And the other day I reopened postman and I really had a WordPress test workspace connected to my local WordPress test account where the posts get requests set up, ready to create a request to the endpoint. And then if I hit send, it will make the request to that endpoint and then show me the return data. And so postman is a great way to test your API endpoints. We're going to use postman next week. We're going to test the submission. We're going to test this and see what it does, see how it works, what we expect and don't expect. I'm going to show you how to set it up with your authentication because we might need authentication for the front end. So if you want to join me next week's session and you want to get postman installed so long, please do go ahead. But that's a great tool to use. I do highly recommend it. There's a free version and there's a paid version which is more for teams where you can share your workspace as your teammates. So if you work in a team of developers, I highly recommend checking that out and giving it a try. Okay, that is my bit for today. Thank you for joining me. I hope that you learned something interesting about how to interact with the REST API today. If you do have any other questions after this session, you're welcome to find me on Twitter or what's left in Twitter. You're also welcome to email me. My email address is on my website. So it's just www.chartlandfossenger.com and go to my adopt page about me. And right at the bottom there is after all the nonsense about me. There is a link to email me. You're welcome to email me at that email with any questions, comments, or any future suggestions for posts. I see it looks like someone's actually made a comment on this issue already. Yes, thank you. So someone said about custom endpoints and we'll definitely look at that. And I hope that this is something useful and interesting. We're going to spend a few more weeks on the REST API. I'm also creating tutorials from these sessions. So keep an eye out for those on www.learnoverrequest.org. My website in the chat and we do that quickly. It's just basically my name. I'll link the above page so it's easy to find my email address. There we go. This is my name.com. Thank you all for joining me. Enjoy the rest of your Thursday, enjoy the rest of your week, and I'll see you all next week.