Custom HTML block, embedding iframe
-
Hi,
Something I have been doing for years seems to have stopped working in the last 24 hours.
At the end of each of my blogs I embed a link to google maps. To do this I use the Custom HTML block, and paste in a google maps link that starts with <iframe src=”https://www.google.com/maps/em… (this editor doesn’t seem to allow me to paste the full string in, which is quite long !).
For at least 5 years this has worked every time, and did yesterday. In my blog post today, it fails to work and the block flips to just displaying the google maps url (of sorts).
Any insight as to what has changed would be appreciated, and if there’s a workaround for this.
Thanks,
Kevin.
The blog I need help with is: (visible only to logged in users)
-
Hi there.
I looked at your two most recent blog posts:
– https://kevinstandagephotography.wordpress.com/2024/05/24/jahaz-mahal-mehrauli-delhi/
– https://kevinstandagephotography.wordpress.com/2024/05/23/zafar-mahal-the-forgotten-legacy-of-delhis-last-mughal-emperor/It seems that only the first one did not have the Custom HTML block. I tried copying the Custom HTML block from the second blog post and successfully added the iframe code and was able to see the Google Map on the page preview.
Can you please share the iframe code you are trying to add that is not working?
-
Thanks for your reply. Yes, the blog post I did yesterday was fine, the one today is not.
This editor won’t allow me to past in the iframe code for some reason (which I got from Google Maps->Share->Embed a map, via ctrl-c) So here it is as an image. It doesn’t matter what google maps iframe link I use, none of them work. This is on both Chrome and Edge.

-
One further observation. As soon as I paste the iframe code into the custom html block, it switches to a paragraph block and just shows this :
-
I was able to add this for you using a Custom HTML block. It appears after adding the embed code copied from Google Maps it will turn into a shortcode. Here’s the support doc that explains how to do this – https://wordpress.com/support/google-maps/#embed-a-google-map
You can see how the code looks when editing your post – https://kevinstandagephotography.wordpress.com/2024/05/24/jahaz-mahal-mehrauli-delhi/
-
Thanks. The article didn’t help me much, but I’ve sussed the workarpound.
I basically have to grab the iframe code from Google maps, extract a portion of it and build the string up in a separate editor before pasting it into the custom html block.
So I get this :
Extract the characters in bold, to create this in a text editor :
[googlemaps https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d5783.691301490876!2d77.17596228901364!3d28.51386268765479!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d1e119bfbc7ef%3A0x766cd60ec250a628!2sJahaz%20Mahal%2C%20Delhi!5e0!3m2!1sen!2suk!4v1716575129714!5m2!1sen!2suk&w=800&h=600]
That seems to work. This is a terribly fiddly workaround, and doesn’t explain why the sudden change overnight using any iframe code on any browser. Surely something has changed to result in this ?
Kevin.
-
Hi Kevin, yes there was a new bug introduced recently; we’re aware of it and working on a fix, but this workaround should help in the meantime. Thanks for your patience!
-
Thank you. Would it be possibly to post a reply to this thread once it’s fixed, happy to test it for you :-)
-
-
-
Hi @kevinstandagehotography! Yup, we’ve released an updated version of Gutenberg that should fix this issue. Let me know if you run into other problems and we’ll take a closer look.
- The topic ‘Custom HTML block, embedding iframe’ is closed to new replies.