The Embed block lets you add content from a third-party site to your post or page.
When you are embedding content, you don’t need to upload the content to your WordPress site. You are creating a link to the content, from within your post or page.
Steps to embed content from a third-party site on your post or page
- Copy the URL from the site you want to embed from.
- Add the Embed block by clicking on the + Block Inserter and searching for the Embed block. Alternatively, you can use the slash command,
/embedin a new paragraph block then press
enterto add one quickly.
Detailed instructions on adding blocks can be found here.
- Paste the URL from step 1 into the block.
- Click on the “Embed” button.
- Now you can see the content in your editor. The Embed block will be transformed into the embed block type based on the third-party site from where the content is copied from.
- Click on Preview to see how the content is displayed on the front end of your page.
The block toolbar contains the tools to customize each block. The Embed Block’s toolbar consists of the following tools:
You can transform an Embed into a Paragraph, Columns, or Group block. Transforming to a Group block will let you change the background color around the Embed.
Use the block-moving tools to move the block up and down inside the editor. Use the six dots icon to drag and drop the Embed Block and reposition it anywhere on the editor. Alternatively, click on the up and down arrows to move the block up or down the editor.
Detailed instructions on moving a block within the editor can be found here.
- Wide width – Increase the width of the post beyond the content size
- Full width – extend the TED embed post to cover the full width of the screen.
- Align left – Make the TED embed post left aligned
- Align center – Make the TED embed post alignment centered
- Align right – Make the TED embed post align right
Via the edit URL, you can change the Embed URL in the embed block. Overwrite the existing URL and click on the “Embed” Button.
Show/Hide more settings
Opens or closes the block settings panel on the editor’s sidebar. Its functionality is similar to clicking the cog icon next to the Publish button.
Copy can be used to copy a selected block and then you can paste it wherever you want in the editor.
Duplicate can be used to duplicate selected block.
Insert a new block before the selected block(s).
Insert a new block after the selected block(s).
Lets you use a blue line on the editor to indicate the new position for the selected block. Use your keyboard’s up and down arrows to move the blue line. When the line is in the desired position, press Enter to move the selected block to that position.
Edit as HTML
The Edit as HTML option allows you to modify the HTML code of the embed block.
Prevents users from moving or deleting the selected block. A pop-up window will appear to set the block locking attribute to the selected block. You can opt to disable movement, prevent removal, or both for the selected block.
Add to Reusable blocks
Using the Add to Reusable blocks option lets you add the selected block to a list of reusable blocks, so you can use them on other posts or pages as well.
Select the Group option if you want to create a group of blocks and treat them as a unit. You can for instance add a common background color or other blocks to the group.
With the Remove Embed option, you can delete the selected block from your content.
Via the Media Settings you can control the behavior of your post embed when viewed from a smaller device, like on a phone screen.
The Toggle switch turns on or off the resize functionality for smaller devices. The default setting is “on” or blue.
“Off:” This embed may not preserve its aspect ratio when the browser is resized. In the off position the toggle switch is gray.
“On:” This embed will preserve its aspect ratio when the browser is resized. The toggle switch turns blue in the “On” position.
The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit.