Using WordPress Gutenberg to embed other websites

The new Gutenberg editor is pretty neat. You can use edit blocks and widgets easily. It’s not quite as nice as Elementor in terms of control, but that doesn’t matter that much for ordinary blog sites.

One thing that is handy though is to be able to embed complex sites. The COVID-19 tracker metapage that I use is a good example. There are so many sites that are using GIS data. You don’t just want an image, you want to be able to make the whole site work inside you page.

That was the original purpose of an IFRAME. It has all kinds of security issues, but it is really useful. But how to make it work with Gutenberg. Fortunately, there are two steps:

  1. There is an HTML widget for Gutenberg. This lets you put an arbitrary HTML object into a web page.
  2. Finally, there is an of course a plugin called of source Superframe that handles this. It’s really nice because it lets you set parameters like how wide and high the image should be.
  3. then you want to set the parameters. For instance, setting it to non-scrollable so it feels more like just the page. Also, you can set the height and width as well.

I’m Rich & Co.

Welcome to Tongfamily, our cozy corner of the internet dedicated to all things technology and interesting. Here, we invite you to join us on a journey of tips, tricks, and traps. Let’s get geeky!

Let’s connect