Create and Explore a Single WordPress Post Through Gutenberg and the REST API
We will create a new post with a comment. This is done in a tool call Gutenberg that WordPress has pre-installed for you with every fresh site. There are quite a few options available to you on how you want to structure your posts but I will show you a few.
Then, we'll look at how that post is rendered on WordPress's frontend and work out how we'd gather that same data on the REST API. You'll see in the end how you will need to make several API calls to fetch all the data you need through the API. This is because the initial call to /posts/#ID gives you all the posts' contents but also gives you the ID to the author and comments on the post that you will need to fetch to display correctly.
Instructor: [0:00] At the moment, I have two posts on my headless WordPress. If I query wp-json/posts, you can see I have one, two, post objects returned in the array. Let's create a new post. Adding a new post for the first time, I get a tour of my block editor, creating a new post.
[0:19] WordPress comes with this editor called Gutenberg, which has a ton of different ways to format text. You can see I can do buttons. I can do columns. I can do groups. There's lots of interesting things you can choose to use when creating content.
[0:36] I might do a code block. I might add in some text. I might want to write a list. I could write a quote. Save the post and head back to our dashboard. Now, we have three posts. We have this post that we've just created. creating a new post. On the frontend, that looks like this, creating a new post by me, when I created it. I currently have no comments. It's uncategorized.
[1:04] I can see some code, my list, my quote. I've got a linked edit, because I am an editor. I can leave a reply, or comments. Let's leave a comment, say, I left a comment. Let's start exploring that same information in our API client.
[1:24] You can see, I've got my three posts in here, now. This is the, creating a new post. I'm going to have my ID, my date, creation. I have my identifier, when it was last modified, its slug, its status, its type, lots and lots of information.
[1:42] I have this rendered blob of HTML, which is exactly what the browser gets to render. You can see it's got Git//. It's got new line characters. It's got the CSS classes in here, everything's in here. Here's an excerpt, and I can see the author is number one.
[1:59] I can see there's no featured media. Open comments status. One category, and there's lots of different things. I want to look at this post in particular. To do that, I'm going to do /8, because I can see my ID is 8. Yeah, it's the same post. I can see that this was by Kevin.
[2:19] If I scroll down you'll see the author here is actually only being identified on the post as one. If I scroll down further, you can see the author, to get the author, here's how to query the API for the author. Let's do that. All of those have been scaped, so let's tidy that up. The name is Kevin, so that's where we're getting this Kevin from.
[2:44] Let's go back to the post then. Next thing is, I see that there's one comment. If I scroll down, it's listed Replies. We can see here's the route. It's /comments? post = 8. It's an array of comments which has one item in it, that's why there's one comment in it.
[3:03] We can see that this is an amazing post. There it is, rendered this is an amazing post. We should it's by Kevin. In the comment, we are given the author name, and details about the author.
[3:14] To build this page with data from the API, we need to do more than one query. We do a single query to get the post, another query to get the author, another query to get the comment. We need to do several queries to be able to build up a single post.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!