Search code examples
wordpresswordpress-rest-apiwordpress-gutenbergwordpress-theme-astra

Updating WordPress Page Content with REST API Messes Up Styling in Astra Starter Templates

I'm running a WordPress site with the Astra Starter templates plugin installed and I'm having trouble updating a page using the REST API.

I'm trying to update the text inside an <h1> tag from "Hello World" to "Hello People". I retrieve the page's current content with a GET request to wp-json/wp/v2/pages/<id> and then make a POST request with the updated HTML to wp-json/wp/v2/pages/<id>, changing nothing other than the text. The argument content is set to the updated HTML content.

The problem is, when I view the updated page, the layout and styling are broken. Upon inspecting the HTML source, I noticed that WordPress seems to be adding some random tags or removing elements from the original HTML content.

My website uses Astra starter templates which utilize spectra blocks, and the HTML code consequently does not follow the Gutenberg HTML comment style. When making a GET request to wp-json/wp/v2/blocks, I receive an empty list in return.

Can anyone explain why WordPress is modifying my HTML content during the POST request and how I can successfully update the page content whilst preserving the original formatting and layout? Any suggestions or insights would be greatly appreciated.

The left editor shows the HTML content after updating the page by POST request, and getting the content by GET request to endpoint, retrieving response['content']['rendered']. The right editor shows the HTML content I sent via POST request to the endpoint. Screenshot 1

Screenshot 2

Here's the whole HTML content. The left one is before updating the page content, and the right one is the after. As evident in the screenshot, Wordpress seems to removed the link tag.

Screenshot 3

Solution

  • "getting the content by GET request to endpoint, retrieving response['content']['rendered']"

    You have not provided details of your source code, so I was not able to exactly reproduce your problem on my end, BUT from your screenshots of the rendered content I know what could be the issue!

    Extra auto generated p tags by wordpress!

    Yea, this is a known feature for wordpress developers and a bug for non-wordpress developers!

    Wordpress, for good reason, would auto generate p tags around the content and the excerpt by default!

    Depending on the theme/plugin(s) you use on your wordpress, this could vary! Again because we don't know your wordpress setup and we don't have the exact details of your stack.

    You could disable this feature (i.e auto generated p tags) by removing its filter hooks! Like this:

    remove_filter("the_content", "wpautop");
remove_filter("the_excerpt", "wpautop");

    Use the snippet above in the functions.php file of your active child/theme!

    You could read more about wpautop, if you need/want to!

    POC

    Default wordpress with auto generated p tags on:

    enter image description here

    Response from rest api contains auto generated p tags

    enter image description here

    After removing the wpautop filter hook:

    enter image description here