Resolving WordPress “The response is not a valid JSON response” error

Recently I ran into the following dreaded error when trying to save a Block Editor’ed post:

the response is not a valid JSON response

I had just started testing the Gutenberg block editor on the site, and one of the often-mentioned troubleshooting steps was to disable plugins (All WordPress troubleshooting seems to eventually boil down to disabling some plugin…) or disabling the block editor entirely and using the classic editor.

Disabling the block editor did resolve the problem, and in fact was what I’d done since WP 5 came out since the error existed way back then, but I was determined to finally implement the block editor on this site.

I highly suspected the GT3 PageBuilder that was part of the theme might be the issue, so I disabled the GT3 PageBuilder plugin, and lo and behold, the block editor was able to save the post the next time. Problem solved, but then I lose the PageBuilder content on my site, which I wanted to migrate slowly over to blocks.

Around the same time, I was working with the WordPress REST API for a side project, running queries like

http://site:8888/wp-json/wp/v2/posts

Which would return a response containing properly-formatted JSON array of all posts on the site:

[{"id":3048,"date":"2020-07-07T09:50:54","date_gmt":"2020-07-07T17:50:54","guid":{"rendered":"http:\/\/site:8888\/?p=3048"},"modified":"2020-07-07T11:43:32","modified_gmt":"2020-07-07T19:43:32","slug":"block-editor-draft","status":"publish","type":"post","link":"http:\/\/site:8888\/block-editor-draft\/","title":{"rendered":"Block Editor Draft"},"content":{"rendered":"\n<p>Another block editor post 3456<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>Test<\/p>\n\n\n\n<p>Test<\/p>\n\n\n\n<p>Test<\/p>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile is-vertically-aligned-top\"><figure class=\"wp-block-media-text__media\"><img src=\"http:\/\/siw ....rest of JSON content....

Some Luck

Through some luck, I had the GT3 PageBuilder reactivated when I ran the REST API query again, and this time, the REST response contained additional, mysterious script content (highlighted in red) in the beginning, followed by the regular JSON:

        <script type="text/javascript">
            var custom_css = "";

            jQuery("#custom_css_cont").prepend(custom_css);
        </script>
    
        <script type="text/javascript">
            var custom_css = "";

            jQuery("#custom_css_cont").prepend(custom_css);
        </script>
    
        <script type="text/javascript">
            var custom_css = "";

            jQuery("#custom_css_cont").prepend(custom_css);
        </script>
    
        <script type="text/javascript">
            var custom_css = "";

            jQuery("#custom_css_cont").prepend(custom_css);
        </script>
    [{"id":3048,"date":"2020-07-07T09:50:54","date_gmt":"2020-07-07T17:50:54","guid":{"rendered":"http:\/\/site:8888\/?p=3048"},"modified":"2020-07-07T11:43:32","modified_gmt":"2020-07-07T19:43:32","slug":"block-editor-draft","status":"publish","type":"post","link":"http:\/\/site:8888\/block-editor-draft\/","title":{"rendered":"Block Editor Draft"},"content":{"rendered":"\n<p>Another block editor post 3456<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-
....rest of JSON content....

It struck me at that point that the <script> tags were being emitted by the GT3 PageBuilder plugin, and was the cause of the JSON being corrupted.

Problem Found!

I ran a quick search for the “custom_css_cont” text within my project files and found the issue: there was a content filter added to create the page builder content, but the filter was eventually responsible for echoing the script content into the REST API output ahead of the JSON:

function gt3_custom_paddings_in_all_modules($custom_css)
{
echo '
<script type="text/javascript">
var custom_css = "' . $custom_css . '";

jQuery("#custom_css_cont").prepend(custom_css);
</script>
';
}

To fix this, I simply commented out the echo statement. Whether this has any material impact to my content isn’t clear yet, but I don’t use any custom CSS in the PageBuilder blocks and I haven’t noticed any other problems, so I’m good with that.

Interestingly enough, the saving of the changed content seems to occur fine in my case even when the JSON error occurs, so I suspect the error may be occurring when the editor reloads the post content via JSON after saving the post.

More evidence to support this is that when loading the initial page for editing (when clicking in the post in the Dashboard), the JSON content is part of the page content; that is, it is not being loaded dynamically by the block editor at that time.

As a separate sanity check, I inspected the editor’s network traffic in my browser’s Developer Tools, and the problematic content was indeed present in the JSON response to the editor save.

So now I have the best of both worlds – the block editor is running fine and the problem in the GT3 Page Builder is bypassed. Since I plan to retire the Page Builder in favour of pure WP Blocks, this is a solution that I can live with and I can transition PageBuilder content over at my own pace.

Conclusion

A potentially handy way to troubleshoot the “the response is not a valid JSON response” error might be to run a query on the WordPress REST API to see if something is affecting the JSON generated by the API.

This information can then be used to find the offending plugin by providing some hints as to where the problem lies, whether just at the plugin level, or at the specific lines of code that can then be modified.

In my case, code from the PageBuilder was deliberately being output into the response, but it would be equally likely that debug messages inadvertently written into code, or compatibility issues caused by updates to PHP may also trigger this behaviour.

There are other solutions for this error that can be found via searching; these include changing the permalink structure and addressing mixed (SSL/ non-SSL) content.

3D Printing: My Jumpstart

During the Time of the Virus, I decided to jump into 3D printing. I’d been looking at printers for a while, probably since 2018, when I had a colleague who talked about 3D printing the odd part for his cars.

Finally, this March, I pulled the trigger on the Ender 3 Pro, from Amazon. Mostly because it was the only one available in a few days (at that time, I also looked at another one, but it rapidly became unavailable during the supply chain crisis that affected all retailers). However, I did find a lot of supporting good reviews that tipped the scales for me in favour of the Ender. The price was great as well, for around $350 CDN.

The Ender comes mostly disassembled, and part of the fun and learning is actually putting it together. Assembly included plugging in the wiring harnesses into the steppers, putting together the rails and belts for the X-axis. The more delicate pieces such as the base and Y-axis, the electronics are all pre-assembled.

It took about an hour, with some help, to do so, and the instructions are fairly decent, with the fasteners in separate labeled bags. More impressively, it comes with some decent accessories, like a scraper, side cutters, nozzle cleaners, extra extruder nozzles.

At the same time, I’d purchased the aluminum extruder upgrade, which I found to be unnecessary, since the Ender 3 Pro version has the extruder upgrade anyway, but this regular Ender 3 would likely benefit from this.

The first print I tried after assembling the Ender was one of the samples on the included micro SD card using Amazon’s AMZ3D PLA filament, and it came out impressively well. Downloading other samples from Thingiverse also yielded really good results as well.

The Ender 3 Pro comes with a textured flexible magnetic build mat that works well for PLA adhesion, and lets you remove and flex the mat to get the printed pieces off.

Useful Upgrades

I’ve added / changed the following:

  • Printed filament guide
  • Printed wiring clips to guide the ribbon display cable
  • Printed a back cover for the display
  • Silent mainboard upgrade (makes a huge difference in stepper noise)
  • Glass bed for printing ABS

Calibration

The Ender 3 prints really well out of the box, and would work great for creating standalone items (vases, pots, etc.) that don’t need to fit into other existing parts accurately. I went through some extensive calibration steps to try to print parts that require dimensional accuracy like clips and accessories for lights or cameras. I had to do the following:

  • Calibrate X, Y, and Z steps
  • Calibrate extruder feed rate. The stock setting extruded less filament than expected (i.e. when commanded to extrude 10mm, it would extrude 9.5mm), so this was adjusted, resulting in having to dial down Cura flow settings to about 90% to compensate.
  • Find the right retraction settings to reduce stringing
  • Find the ideal setting for line width for Cura to get the right wall width. This is a combination of line width and extruder flow

Dimensional Accuracy: The Challenge

What I’ve struggled with for dimensional accuracy is wall width. When designing parts, the wall width squishes out horizontally during extrusion, causing the dimensions to be affected by twice this squish amount. The key is to accept this amount of squish and have it factored into the slicer calculations. The problems is that some amount of squish seems to help with the wall layers adhering to each other, so getting great dimensional accuracy may come with sacrifices in part strength.

Another factor where wall width comes into play is in the X and Y printer calibration. I had calibrated the printer using a 20mm cube, but hadn’t taken wall width into account. Since wall width is part of the

Another approach is to just accept the printer characteristics and adjust the design’s dimensions (e.g. shrink the measurements to reflect the output). I’d rather not do this, but the reality with dealing with materials may require having to do so, at least to some extent).

So far, I’ve been working with Cura’s line width setting at 0.5mm for a 0.4mm nozzle, which helps to factor in the squish factor (normal guidelines suggest 1.2 to 1.25 x nozzle size, so 0.5mm for 0.4mm nozzle fits nicely).

Given what I’ve learned, my sequence of calibration might go in a different order, namely:

  • Calibrate extruder feed rate
  • Slicer flow rate calibration in conjunction with wall line width calibration
  • X, Y, and Z calibration. Note that Z calibration isn’t affected by wall line width, so it could be done almost any time.

Printer Pros

Good price and lots of support on websites. Just being able to read and absorb articles that are Ender 3 specific is a fantastic learning experience, so in that regard it has been a really good starter 3D printer for me. Having to put it together helped in my understanding and comfort in swapping out parts, and just overall how the printer works.

Prints well right off the bat with PLA, easy parts removal (with Pro version magnetic bed).

Printer Cons

Somewhat noisy – this can be remedied through the silent mainboard upgrade and the fans can be changed out, but it would have been nice to have the silent mainboard as part of it.

Need to add more bits to it. It might have been good to have more of the upgrades as part of the package, but on the other hand, it would have increased the price, and wouldn’t have been as much of a learning experience for me.

Verdict: Excellent printer for the price. Really good starter 3D printer