I am building a theme into which I have integrated data recovered by an external API.

I chose to create a plugin in which I put all my data processing, it allows me to generate a shortcode with which the user can interact, for example, to change how many items are displayed on the home page.

On that side, everything works, but my problem is with the Gutenberg editor ; when I add my shortcode to the page, and I want to save it, the following error message appears :

Updating failed: The response is not a valid JSON response.

However, the changes are saved correctly.

This message is worrying for users because :

• At the moment of leaving, the web browser displays a JavaScript alert which says that the modifications will be lost (but this is false)

• And each time we come back on the page edit, it ask us to recover the old versions of the page

About PHP functions of my plugin, there are some whose purpose is to return HTML and display it. I first thought the problem was coming from here, because we are on the admin side, no need to execute anything, so I tried to put my function calls in a condition that verifies that we are not on an admin page :

if(!is_admin()) {
        myFunctionDisplayHTML();
    }

But I still get this error message. Do you have any idea how to fix this problem ? Thank you in advance for your help !

My WordPress version is 5.6.2, PHP version 7.4.1 and my website runs in local environment.

I am building a theme into which I have integrated data recovered by an external API.

I chose to create a plugin in which I put all my data processing, it allows me to generate a shortcode with which the user can interact, for example, to change how many items are displayed on the home page.

On that side, everything works, but my problem is with the Gutenberg editor ; when I add my shortcode to the page, and I want to save it, the following error message appears :

Updating failed: The response is not a valid JSON response.

However, the changes are saved correctly.

This message is worrying for users because :

• At the moment of leaving, the web browser displays a JavaScript alert which says that the modifications will be lost (but this is false)

• And each time we come back on the page edit, it ask us to recover the old versions of the page

About PHP functions of my plugin, there are some whose purpose is to return HTML and display it. I first thought the problem was coming from here, because we are on the admin side, no need to execute anything, so I tried to put my function calls in a condition that verifies that we are not on an admin page :

if(!is_admin()) {
        myFunctionDisplayHTML();
    }

But I still get this error message. Do you have any idea how to fix this problem ? Thank you in advance for your help !

My WordPress version is 5.6.2, PHP version 7.4.1 and my website runs in local environment.

• plugin-development
• theme-development
• shortcode
• errors
• block-editor

• I'd start by opening the Network tab of the inspector in your browser and filtering to XHR requests to see if you can isolate the request that is returning invalid JSON. If you can find that, we might be able to help you more. – phatskat Commented Mar 4, 2021 at 18:27
• Thanks for your help! I did that. The error message appears when this request is processed. Here are screenshots of request headers, request content and here the response json file. I've sent all queries responses to a Json validator, everything seems valid... – Loraga Commented Mar 5, 2021 at 8:50
• Update : the JSON response is clearer with Chrome network tools than Firefox, sorry ! The full JSON response can be found here, my shortcode print a lot of HTML in JSON response and I don't understand why... Do you have any idea ? – Loraga Commented Mar 5, 2021 at 9:20

1 Answer 1

Problem solved, I replaced all function calls that return HTML with :

ob_start();
myFunctionDisplayHTML();  
return ob_get_clean();

And the JSON response is valid.

Thanks @phatskat, you got me on the right way :-) Solution find here