Check out a free preview of the full JavaScript for WordPress course:
The "Saving Posts" Lesson is part of the full, JavaScript for WordPress course featured in this preview video. Here's what you'd learn in this lesson:

Zac demonstrates how to save posts using a decoupled WordPress set up.

Get Unlimited Access Now

Transcript from the "Saving Posts" Lesson

[00:00:00]
>> Zac: So now we have authentication basically up and running. I'm going to run through the saving with you together, so that we've really hit a solid point of covering everything that really wanted to cover today. And then you can go into editing and deleting on your own if you want to, and explore that, okay?

[00:00:20] So we're gonna power through a little bit more and work on this savings set up. We will exit out of this demo that we just did and move into 6.4, so let me just get over there in my command line.
>> Zac: I'm gonna run npm install.
>> Zac: And the one thing we wanna check for in this case, is that we have this TinyMCE folder inside of our distribution.

[00:00:53] If we look inside of our index.html, because we're going to be working with the TinyMCE editor. We have a hard coded link to it. So you could use ES6 or modules and imports and run them that way. I found it was easiest to just leave it separate then pull it in.

[00:01:11] And like I said, you could easily swap this out for other editors, TinyMCE is not by means the only one out there or the latest weight one. So you can do some exploration, but because it does have some complexities. I figured it was a good example to get comfortable with and it's pretty powerful.

[00:01:28] So let's take a look at our ReadMe while everything is downloading. So we actually already did the safe form, it looks like my instructions were a little awful. I'll make sure this gets updated as soon as we're done here. All right, cuz we already have all that.
>> Male: That, I think we need to keep still.

[00:01:49]
>> Zac: We do need to keep some, we do need that, because we have new stuff there. Okay, so that is correct, we do need to have that. My npm is installed, I'll run npm start just to get it up and running. And so let's come back into authentication and see what we have waiting for us.

[00:02:09] So under my source authentication, notice that the first thing at top of the screen is going to be save, so if we look in our file structure we now have this file called, Save.js and notice that everything now is running as default classes. So we could just pull that in.

[00:02:32]
>> Zac: All this is already set up. Now, when we log in, we wanna do a few more things. We also wanna take our new post form, and if we come into our configuration file, again, it's gonna keep getting bigger the further we go. We now have A loginForm, a logoutForm, but we also have a newPostForm that just has a class of addPostForm, and that's actually gonna be what houses our TinyMCE editor and everything.

[00:02:58] So by default it's hidden, so we wanna remove that hidden class once they're logged in. The other thing we have and this is one of the reasons I want to show you TinyMCE. Is because it has a bunch of configurations. So you could set styling, so if you want the background and padding to be a certain way, what plugins are set up, so you can control what buttons are there?

[00:03:21] Whether you have a menu bar. I'm sorry, and this is the buttons. So paragraph, header, element bold link. And you can put blocks between them. So this is a nice feature that you could customize it all in this way. And I stored it here cuz again we don't want this being buried somewhere deep in our app and then possibly duplicated and needing to revise these settings.

[00:03:44] So just throwing them in a config is a good place for that. And we can change this to config.tinymceSettings. So once we're logged in, not only will we take care of the login logout form, but we'll also take care of displaying our post form and our TinyMCE editor initializing that.

[00:04:02] When you log out, you wanna go ahead and get rid or hide the new post form, but we don't need to do anything with TinyMCE cuz it's already set up. And even if they tried to go into the dom and change the class and then make that form available and hit save, because there's no cookie authentication there, it won't work anyways.

[00:04:22] So our app is not entirely insecure just because we have stuff hidden as opposed to remove from the page. But ultimately, when you're building in this kind of way, you probably do want to be removing doms and not just hiding and showing things. We're kind of making it easy on ourself at this point.

[00:04:39] So all of that is good. The only other thing we have in here is there is,
>> Zac: Where are we calling this?
>> Zac: When you log.
>> Zac: Okay, when you logout of the site, we want to, although this should probably be on login.
>> Zac: Okay, so what we're saying here.

[00:05:13] We'll keep going. If we have an error, we'll come back to it. But we're setting up our Save button. So our Save button. When it's clicked, it should run save.post. And that will take all of our form data and save it. And that Save button is. I don't know if this is gonna work out, let's see.

[00:05:33] The save button, okay? So when we click save, it should gather up all this content and load it, I'm sorry and save it. So now I think we have to go into our save.js file and look at what's happening there.
>> Zac: So we'll open up our save.js. Start at the top, we'll need to get axios because we want to make sure that we could run a call, and we need to get our cookies because our token is stored in the cookie.

[00:06:13] So we need to pull it out of the cookie in order to save anything. So we come down. We make our post up. And the way we're getting this, we're gonna make our post by grabbing this value and this value. This is the exact same thing we did last time around when saving the post.

[00:06:30] So not too different, the TinyMCE editor.
>> Zac: And now we'll come down here, we actually save the post, so we'll change that to post. The URL is going to be just going to posts and the data is going to be this post object that we just set up right here.

[00:06:50] So this is what we're passing. And the nice thing about passing this in, it will just save it. And now we need to set up our headers. Remember when we requested the token for authentication, we had to format our headers differently. We had to say, hey this is URL or this is form encoded data.

[00:07:10] When we're passing in JSON, of course we want to tell it, hey, we're about to give you JSON, because if we give it some unexpected file type, it won't work. And then this is specific to the JW tokens. It's going to take authorization header with bearer and then the token.

[00:07:30] So remember this is the token that we got from our cookie. COOKIE_ID needs to be changed or that won't work. So right here we're saying, get the name of our cookie, grab the value of the token, and then pass that token in here. So folks, this is the heart of JWT authentication when you're pushing in WordPress.

[00:07:57] So you need to have the content type set to application/json, and you need to have authorization, bearer, a space, and then the token. So very specific syntax. And if you ever need to save data outside of WordPress on your own, just copy the same format and it should work for you.

[00:08:17] And then we're basically going to load a message that says, save, clear the form, and then reload, refresh the posts on the page. So let's check our ReadMe and make sure that that's all we got. Yeah, looks good. Come back to our site. Let's test it.
>> Zac: Fingers crossed, and we have an error.

[00:08:42] I mean, JavaScript shouldn't always work on the first try, right? Let's see what we've got here. Server responded with a bad request. So that means that
>> Zac: Something about that request was not right, let's plug it in.
>> Zac: Well, wpj is on.
>> Zac: Okay, if we go there, that's right.

[00:09:21] So the 400 error is telling us that something we sent over is not completely correct and that's what's giving us the error. And we could see potentially something is happening on line 75, which is just throwing us, is that in save, yeah.
>> Male: This is the status on the post.

[00:09:40] I don't know if that's important or not.
>> Zac: That might be totally important, let's see.
>> Zac: There we go, that was it. So brilliant on that. What that was saying is not that it couldn't reach it, or not that it didn't exist. If you don't know http response codes, they are definitely worth looking up, because that will give you a lot of insight into exactly what is, this is the jam right here, I love this site.

[00:10:30]
>> Zac: All right, so if something is created, it will give us a 201 back, if it's okay, it's 200, a bad request, 403 is forbidden, 401 is unauthorized. So if we had had something that wasn't authorized for us or if it wasn't found, if we got a 404 that would mean the URL was probably wrong.

[00:10:49] If we've got unauthorized, that means something with our cookie might have been wrong. If we got a 400, that's telling us, hey, you made a bad request. Which as you pointed out, was exactly correct. Our request was formatted incorrectly and WordPress is like, I don't know what the heck all caps status is.

[00:11:06] That's not published. That's not. That's not. Edit pending, would be some possible options. And I think if you leave this off completely, it defaults to draft, so it won't publish it. So that's why we're hard coding and saying publish it, otherwise in WordPress it has a draft mode and you wouldn't see it on the site.

[00:11:28] So we have saving done on our site and let's just take a look around again at what we have. We click Logout. And the user stuff appears, that stuff is behind the scenes. And again I just want to show you that if we were to come in to our elements.

[00:11:46]
>> Zac: And notice that this form is still on the page. [SOUND] Too big. And if we remove hidden, that's gonna pop it up again. So what we do wanna check is that this won't work, I hope. Let's get our console ready. And so we click save, again, we're not logged in, right?

[00:12:11] So we shouldn't have a cookie available to us, there's no cookie here. And so when we click save, notice that now we're getting a 403 error, which if we look back at that site we were just at.
>> Zac: Notice that now it's forbidden. So before it was telling us, hey, you did something wrong.

[00:12:36] You made a bad request. Now it's telling us you are forbidden from accessing this because you don't have the correct credentials, which is that token that we needed.