The Iframe block allows you to embed an AMP-compatible iframe. You can embed iframes with an external URL, or by uploading your page assets (HTML, CSS, images, …) 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 selector and search for ‘Iframe’, or scroll down to the Newspack section of the dropdown and pick Iframe block:
- You can also type
/iframeand 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 embbed your iframe using an external URL, please make sure that the URL starts with https.
Block Toolbar
Clicking on the Iframe block will bring up the block toolbar:
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 change the block settings, select the block, then in the right sidebar, select Block tab at the top. If the right sidebar is not visible in the editor, it can be opened by clicking the cog icon in the top-right corner:
- 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, click Update or Publish to save your changes.