The iframe block allows you to embed an iframe. You can embed iframes with an external URL, or by uploading your page assets (HTML, CSS, images, etc.) in a ZIP archive.
Using the iframe block
To use the iframe block, follow these steps.
- Edit the post or page where you would like to add the block.
- Open the Gutenberg block inserter and search for iframe, or scroll down to the Newspack section of the dropdown and choose the Iframe block.
- You can also type
/iframein an empty paragraph block and press Enter.
- If you choose to upload your iframe content, the assets archive should be a ZIP file and its content should include an entry file called index.html. The entry file will be the file loaded as the iframe source.
- You can also select the iframe assets archive from the Media Library in case you already upload it.
- If you choose to embed your iframe using an external URL, please make sure that the URL starts with https.
Block Toolbar
Selecting the iframe block will bring up the block’s formatting palette.
From there you can choose to preview or edit the iframe block.
Block Settings
By default, the iframe block is set to non-fullscreen mode. You can change the block size or set it to fullscreen mode by changing the block settings.
- To update the block settings, select the block, then in the right sidebar, select the Block tab at the top. If the right sidebar is not visible in the editor, it can be opened by selecting the sidebar icon at upper right.
- Under the Iframe Settings panel, you can enable the iframe fullscreen mode, which can be used to showcase your project pages, for example. If the fullscreen mode is enabled, a warning will be shown in the editor explaining that the block will take over the page content.
- You can also specify the height and width of the iframe in case the fullscreen mode is not enabled using CSS units (%, px, or em).
- Once you’ve finished editing the iframe block settings, select Update or Publish to save your changes.
Iframe block
Block Table of Contents