-
Hello!
I keep running into an issue when trying to update a Hook Element on my website. The element is the set of 20 logos just below the Header.
I’m attempting to change the logos using the Image Block to SVGs via the Headline Block.
However, every time I attempt to “Update” the element, I receive the following error: Updating failed. The response is not a valid JSON response.
I regenerated Permalinks but this didn’t solve the issue.
-
Hi there,
theres a good possibility that those SVGs contain a lot code that is being rejected by the sanitizations that WP performs.
You may also want to consider that adding them as Inline SVGs won’t be that great for performance, as those logos like really complicated and will return a LOT of HTML code.
-
Thanks, David–I’ll give that a try and see if that helps. I loaded one of the logos in Illustrator and just noticed I didn’t select “Minify” and also didn’t make the Object IDs “Minimal”. The difference in code in drastic—hopefully that solves it!
-
Theres also this web app:
https://jakearchibald.github.io/svgomg/To minify them further and get rid of other cruft.
I hope it works out 🙂
-
Sorry, David–still encountering an issue and it seemingly happens at random.
– I upload the SVGs via the Asset Library and they Save successfully
– However, when I attempt to insert some of the new SVGs into the Hook element, I continue to receive the JSON errors.
I sent login credentials to help expediate the issue.
-
SO the element contains a Synced Pattern. Is that required ?
-
I believe I initially set this up using a block from the Pattern Library. Though, since it’s a Hook element, I suppose it doesn’t *need* to contain a Synced Pattern: is that causing the issue?
-
What’s odd is this only happens with certain SVGs. For instance, when I attempt to add the SVG in the screenshot to the element, it gives me the JSON error even though the file uploaded to the Asset Library without any problem.
Screenshot: https://postimg.cc/68nZ91ZV
-
If you don’t require the Synced Pattern then don’t use it. Its unlikely that its the issue here but WP will be running extra code on that block thats not necessary. Remove it to eliminate it as a possible cause.
I copied that SVG to my own local test site and it saves correctly if i add it directly to the block in the elemnent. And if i add it via the Asset Library custom icons.
Is it thats specific icon ? Or is it perhaps theres a LOT of SVG code being output by all those icons eg. if that icon was added with only a couple of others does it save correctly ?
-
David–I actually came across this in the GenerateBlocks documentation and it seems to be the exact issue I encounter since I’m on a multi-site install.
https://docs.generateblocks.com/article/fix-svg-icons-not-saving/
Apologies for this being an elementary question: how would I add the code mentioned above into the site? I assume I can do so via Code Snippet?
-
That snippet allows users who do not have an Admin Role tom save SVGs…. which i assume you have 🙂
But yes, you can add it using the Code Snippets plugin -
Very odd—I added that PHP code via Snippet and I’m still encountering upload/saving errors even when I run the file through the SVG web app you mentioned [and remove the unnecessary scripts].
I’m stumped.
-
So after thorough searching, I came across a demo web app created by DomPurify. You upload your SVG’s HTML and it gives you a new, “sanitized” version.
I ran each of my files through it and they all uploaded perfectly! Quite literally tears of joy.
For reference, this is the web app (I don’t think I’ve ever bookmarked something quicker in my life): https://cure53.de/purify
-
It can be a bit hit and miss, as GB uses domPurify in the SVG upload fields.
But I am super glad to hear you found that and got it working.
- You must be logged in to reply to this topic.