How to Add iFrames in Gutenberg Blocks

Iframe

iFrames are a feature of the web that can be very useful and also very frustrating.

WordPress is a good example of this. On one hand, WordPress uses iFrames as a key part of the Customizer. On the other hand, WordPress often blocks iFrames as a security threat.

In this guide, I'll show you how to add iFrames to posts made with the Gutenberg editor.


Option #1. Using the Custom HTML block

The easiest way to add iFrames in Gutenberg is to use the “Custom HTML” block. In the image below, I've searched for this block:

Html Block
Html Block

Once you have added the block to you post, you can enter the iFrame code. You will need to enter the full HTML code to load the iFrame.

Iframe Html
Iframe Html

If you save this post, you should see the iFrame code is active and working on the front of your site:

Embed Iframe
Embed Iframe

Option #2. Using an iFrame Plugin

We use the “Advanced iFrame” plugin on this site and it works well.

Install Advanced Iframe
Install Advanced Iframe

After installing Advanced iFrame, you will see a new block available to add to your content:

Iframe Block Add
Iframe Block Add

You can now add your iFrame URL into the block settings in the right sidebar. You do not need to enter any of the iFrame code.

New Iframe Block
New Iframe Block

Solving Problems with iFrames

Although the steps above are straightforward, there are several ways in which this can go wrong. Most of these problems are caused by the wp_kses_post() function that tried to make sure that no insecure code is used in your posts.

#1. Do you have the correct permissions?

One common problem is the unfiltered_html permission. If a user doesn't have this permission, they won't be able to add iFrames. What will happen is that the user will be able to add the iFrame code in the admin area, but it will be automatically stripped when they save the post.

One workaround for this is to use the PublishPress Capabilities plugin.

  • After installing the plugin, go to “Capabilities” in your admin menu.
  • Select the role you want to edit in the “Select Role to View / Edit” box.
  • Check the box for “unfiltered html”.
Unfiltered Html
Unfiltered Html

Any user in this role will now be able to add iFrame code.

#2. Are you using a multisite network?

On a multisite network, only Administrators are able to use iFrames. You can extend this option to all users using the technique above.

#3. Are you using a security plugin?

If iFrames are not loading correctly, check to see if you have a plugin such as Wordfence or Sucuri on your site. If so, ou may need to tweak the security settings to allow iFrames.


More troubleshooting for Gutenberg blocks


Leave a Reply

Your email address will not be published. Required fields are marked *

Professional publishing plugins for WordPress! Get PublishPress