Creating A WordPress Post Using The REST API

The created NextJs application allows for the creation of a new blog post using the WordPress REST API by sending a HTTP POST request to /wp/v2/posts using the schema defined on the WordPress developer website(WordPress, n.d.).

A custom built page was created that contains a form for creating blog posts. This page can only be accessed if the user has a currently authenticated session. 

The Create functional component reads the state of the login session by accessing the AuthContext using the useContext hook. More can be read about the implementation of the persistence of an authenticated session by accessing this blog entry.

Creating The Posts Content

Users can provide a blog with a title, an excerpt and can create HTML content for the post within the Post Content textarea shown in the following image.

Each form input on this page uses the useForm form validation hook that was created for performing real time, reactive form validation against regular expressions. More can be read about this hook via this link.

By clicking these buttons on the left of the screen the text found within the code extract shown below is added into the textarea. The strings are assigned to enumerator values as shown below.

An example of some content added can be seen below.

File Upload

Each post can upload a featured image using an HTML input element with the type set to field. This is done by sending an HTTP POST request to the /wp/v2/media route. By creating posts using the REST API the following response was provided : 

This response was used to create custom types for static type checking, as can be seen in the following image.

The following screenshot shows how the media upload process works. The application listens for a change on an input element and upon a change in the elements value will store the image file selected in a React state variable. By storing this value in a React state variable the user interface can be updated to show the name of the file to the user. 

Once the user submits the form the file is appended to an instance of the FormData object. The content type is not set as the FormData object will automatically set this based on the type of content contained within itself. The FormData.append( ) method requires a key and a value that is either of type String or Blob. The File type is an instance of Blob(Mozilla, 2021), meaning the file can be sent using this approach. 

// File instanceof Blob => true

Once the response is retrieved, which is in the shape of the previously defined Media type the type is then passed to the function that uploads the blog to the API endpoint for creation of posts. The creation of posts via the REST API is covered in the following section.

Post Creation

The last stage of the post creation process involves taking the contents of the blog post the user has written into the textarea along with the blogs excerpt, title and featured image. These are then sent to the /wp/v2/posts route as an HTTP POST request containing stringified JSON data. The following code extract shows how the form data is retrieved from the form, cleaned of any potential script tags using a regular expression and is sent to the API.

Example Requests

This subsection of the post shows the network logs that are a result of the creation of a new post. Before the post creation happens, a file upload occurs to upload an image file to the WordPress server as the posts featured image. Both of these requests are shown below: 

Conclusion

Creating WordPress posts using the REST API is a simple process once the schema is mapped out to TypeScript types/interfaces. By using the fetchJSON function that was described in a previous post the handling of responses is consistently easy as the expected return type can be declared. The ability to use static type checking throughout the entire process is one reason I would recommend using TypeScript over vanilla JavaScript. Additionally, the static type checking prevented me from attempting to upload a FileList object instead of an individual file as an input elements value is by default a file list and not a single File. By using TypeScript I was able to quickly identify this issue and change my code accordingly to ensure proper usage of the FormBody api.

References

Mozilla (2021). File - Web APIs | MDN. [online] developer.mozilla.org. Available at: https://developer.mozilla.org/en-US/docs/Web/API/File [Accessed 14 Apr. 2021].

WordPress (n.d.). Posts | REST API Handbook. [online] WordPress Developer Resources. Available at: https://developer.wordpress.org/rest-api/reference/posts/#create-a-post [Accessed 16 Apr. 2021].

Comments

Post a Comment

Popular posts from this blog

WordPress Modifying A Child Theme & Using The OpenWeatherMap API

Image
The modification of a WordPress child theme can be accomplished in multiple stages. For my child theme modification users can search the name of a city and are provided some current weather data from openweathermap. To accomplish this I used TypeScript to make my requests and perform DOM manipulation. Child Theme Creation & OpenWeatherMap API To create a child them, navigate to the directory where WordPress themes are stored. Create a new directory that uses a similar name to the parent them you wish to extend, however append the text "-child" to the end. This text does not do anything, however this is considered best practice (WordPress, n.d.). This directory requires several files in order to be operational. Firstly, a CSS file that contains a description of the theme is required. This should be named style.css and contain text similar to the following extract. The child theme will now be available for activation thro...
Read more

Consuming The WordPress Posts Via The REST API

Image
WordPress provides a REST API that has good online documentation that includes information such as type definitions and route information(WordPress, n.d.). Fetching & Server Side Rendering As the data is stored on an external storage system, the server hosting the WordPress application, the page can not be directly served with the data if it is rendered on the client. By rendering the page on the client using Reacts default rendering technique the user will have to wait for the data to be fetched, parsed and then rendered.  A small subset of the post information is rendered for this page as the entire post is not required. To reduce the amount of fields returned from the REST API the ?_fields?= query is used, as shown below. To avoid this issue the data for the blog index page, the page that renders the posts and their excerpts, is rendered on the server. The data fetching is handled by the server meaning that when the client receives the page all of the data fetching has alrea...
Read more