How To Embed Google Slides into Gutenberg In WordPress

 

Google Slides are great for presentations, and you can embed them directly into your WordPress site with Gutenberg. I’ll show you how to publish from Google and show you which Gutenberg block to use to embed it.

Hey folks, welcome to another HeroPress Tip of the Week. This week, I’m going to show you how to embed Google Docs into a Gutenberg page, just like the one you can see right here. So let’s get started.

We’re going to start here at the google slides presentation. This works with any Google Slides presentation, the first thing you do is go to File, then share, and then publish to web. And then over here, is embed. Now, we don’t want to auto advance, we don’t want to start as soon as it loads. And we don’t want to restart. We don’t want to mess with any of that. Just want to click publish. Google will ask if I’m sure I will say yes. And there we are, it’s published. And now you’ll see what we get here is a little HTML that has an iframe.

So I’m going to skip to the end here a little bit, if you know what you’re doing, we’re just going to take this iframe and put it in the HTML block. And that’s all there is to it. So if that tells you everything you need to know, you can probably stop here. But if not, I’m going to show you exactly how it works.

Another thing I want to show you is, we’re have the option here for size, medium, 960 by 569. Those values are right here in the HTML. And so you can actually type in anything you want there later. So you don’t have to come back here. If you want to change its size, you just need to make sure that the dimensions are, are proper. So that doesn’t stretch one way or the other. So I’m going to leave it at medium. And then I’m going to copy all of this stuff.

Then I’m going to go to my Gutenberg page. And this is just a regular page, it’s set to my homepage right now. And I’m going to slash and we want the custom HTML block and it’s at the top for me, but it probably won’t be for you if this is your first time. So you could just type HTML, and it’ll come up as your only option.
And then you simply paste into there. And then we will click Update. And then here’s my page without it, and I will reload.

And there it is. And you can read the slides. It’s a full blown Google Slides, presentation. Everything, everything works the way you would expect it to. Now you’ll see mine is not centered. And the block itself does not come with centering options. So I’m going to cheat and do it really old school. And so at the very beginning, I put in center, and at the end slash center. And I don’t even think this is valid html5. However, you’ll see it works. And so now that’s centered. That’s all there is to it.

You just go back, you publish the web, copy the code and put it in the HTML block. That’s something I learned is that you can stop publishing. And that code goes away. But this still works. So I don’t want you to think that this can get out in the wild and you can turn it off for people by stopping the publishing. That doesn’t work. Once they have those slides, then it doesn’t work. You might be able to disallow it for people by restricting access. I’m currently logged in as your press so that would that wouldn’t help me at all. But if you want to restrict it, you can. But if you’re putting it on the web, you probably don’t want to restrict it. So there you are. A google slides presentation right in Gutenberg. Hope you find it useful.