Embed Block

Go to the List of Blocks

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

  1. Copy the URL from the site you want to embed from.
  2. Add the Embed block by clicking on the + Block Inserter and searching for the Embed block.  Alternatively, you can use the slash command, /embed in a new paragraph block then press enter to add one quickly.
How to quickly add an Embed block

Detailed instructions on adding blocks can be found here.

  1. Paste the URL from step 1 into the block.
  2. Click on the “Embed” button.
Paste the URL into the Embed block
  1. 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.
Twitter Embed block
  1. Click on Preview to see how the content is displayed on the front end of your page.
Preview of the Embed block

Block Toolbar

The block toolbar contains the tools to customize each block. The Embed Block’s toolbar consists of the following tools:

Transform to

Transform tool in the Embed block

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.

Grouping Embed block
Adding background color to Embed block group.

Block-moving tools

Block moving tools in the Embed block

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.

Change alignment in the Embed block

Change alignment

  • 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

Edit URL

Via the edit URL, you can change the Embed URL in the embed block. Overwrite the existing URL and click on the “Embed” Button.

Edit URL in the Embed block

More options

More options in the Embed block

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

Copy can be used to copy a selected block and then you can paste it wherever you want in the editor.

Duplicate

Duplicate can be used to duplicate selected block.

Insert before

Insert a new block before the selected block(s).

Insert after

Insert a new block after the selected block(s).

Move to 

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

Edit as HTML

The Edit as HTML option allows you to modify the HTML code of the embed block.

Lock

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.

Group

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.

Remove Embed

With the Remove Embed option, you can delete the selected block from your content.

Top ↑

Block Settings

Media Settings

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.

Advanced

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.

The advanced section lets you add a CSS class to your block.
The advanced section lets you add a CSS class to your block.

Top ↑

Changelog

  • Updated 2022-08-16
    • Added ALT tags for the images
  • Created 2022-04-30

Was this article helpful? How could it be improved?