The Amazon Kindle embed block allows users to embed Amazon Kindle content.
Click the (+) icon to open the block inserter pop-up window and search for the Amazon Kindle embed block.
You can also use the keyboard shortcut /amazon-kindle
to quickly insert an Amazon Kindle embed block.
Keep in mind that the link needs to follow this format: https://www.amazon.com/dp/ASIN where you will need to paste your preferred ASIN numbers and choose the corresponding locale (amazon.co.uk, amazon.com, and so on). More information can be found here: Linking from Your Website.
Then paste the preferred URL, click on the Embed button and the book’s details will be added:
Detailed instructions on adding blocks can be found here.
The block toolbar contains the tools to customize each block. The Amazon Kindle block’s toolbar consists of the following tools:
Transform to
If you click the Embed icon on the toolbar, you will be able to convert the block into columns and group blocks.
Block-moving tools
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 Amazon Kindle 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.
Change alignment
The change alignment tool is used for the Amazon Kindle block’s position and width:
Edit URL
The edit URL button is used to modify the Amazon Kindle block embed link.
More options
Click on the three dots icon to show more block options. A drop-down menu with these actions will appear:
The block settings panel contains customization options specific to the block. To open it, select the block and click the cog icon next to the Publish button.
Here are the options for the Amazon Kindle block:
Advanced
The Advanced tab lets you add CSS class(es) to your block. This will allow you to write custom CSS and styles for the block.
With the Animoto Embed block, you can embed your own Animoto video which you have created on your Animoto account. You need an account to create/customize your own videos and embed them into your post. A user who does not have an Animoto account can play the full video from the post.?
Embedded Animoto Video
Steps to Embed a video from Animoto
1. Find the video URL on Animoto- Open your video which you can find in your Animoto Account > My video area and click on the Share button.
2. Click on the Share icon- From the share tab, click on the link icon which will open a pop-up window.
3. Copy the link of the Animoto video – Click on the Copy to Clipboard button to copy your video link easily.
4. Add the Animoto Block from the Block list
Detailed instructions on adding blocks
5. Paste the video link in the URL box
6. Click the Embed button-If it’s a link that can be successfully embedded you will see a preview in your editor.
If you use a URL that can’t be embedded, the block shows the message “Sorry, this content could not be embedded.” You will have two choices: Try again with a different URL or Convert to link.
Besides the Mover and Drag & Drop Handle, the Block Toolbar for the Animoto embed block shows four buttons:
Transform to
The Animoto embed can be transformed into a group. This gives the ability to change the background color around the Animoto embed.
Change alignment
Wide width and Full width alignment need to be enabled by the theme of your site.?
Edit URL
Via the Edit URL, you can change the Animoto Embed URL in the embed block. Overwrite the existing URL and click on the Embed Button.
More options
These controls give you the option to copy, duplicate, and edit your block as HTML.
Read about these and other settings.
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.
Embedded Cloudup content:
Steps to embed Cloudup content:
If it’s a link that can be successfully embedded you will see a preview in your editor.
If you use a URL that can’t be embedded, the block shows the message “Sorry, this content could not be embedded.” You will have two choices: Try again with a different URL or convert to link.
Besides the Mover and Drag & Drop Handle, the Block Toolbar for the Cloudup embed shows four buttons:
Transform to
You can transform a Cloudup embed to a Group. This would give you the ability to change the background and text color around the Cloudup embed.
Change alignment
“Wide width” and “Full width” alignment need to be enabled by the Theme of your site.
Edit URL
Via the edit URL icon, you can change the Cloudup embed URL in the embed block. To overwrite the existing URL and click on the “Embed” button.
More options
These controls give you the option to copy, duplicate, and edit your block as HTML.
Read about these and other 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.
With the Crowdsignal Embed block, you can embed Crowdsignal polls (or surveys or votes) into your posts and pages. You need a Crowdsignal account to be able to create polls (or surveys or votes) before you can embed them into your posts or pages.
Example of an Embedded Crowsignal Poll:
Within the Share Your Poll pop up, click “Copy to Clipboard”.
Detailed instructions on adding blocks
If it’s a link that can be successfully embedded you will see a preview in your editor.
If you use a URL that can’t be embedded, the block shows the message “Sorry, this content could not be embedded.” You will have two choices: Try again with a different URL or convert to link.
Besides the Mover and Drag & Drop Handle, the Block Toolbar for the Crowdsignal embed shows four buttons:
Transform to:
You can transform a Crowdsignal embed into a Paragraph, Columns, or Group. Transforming it into a Group would give you the ability to change the background color around the Crowdsignal embed.
Change alignment:
“Wide width” and “Full width” alignment need to be enabled by the Theme of your site.
Edit URL:
Via the edit URL, you can change the Crowdsignal Embed URL in the embed block. Overwrite the existing URL and click on the “Embed” Button.
More options
The More Options menu represented by three vertical dots on the far right of the toolbar gives you more features such as the ability to duplicate, remove, or edit your block as HTML.?
Read about these and other settings.
Besides the Advanced section, the Crowdsignal embed has only one other setting in the “Block Settings” sidebar: Media Settings.
Via the Media Settings you can control the behavior of your 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 CSS class(es) to your block.
The “Additional CSS class(es)” lets you add CSS class(es) to your block, allowing you to write custom CSS and style the block as you see fit.
Detailed instructions on adding blocks
If it’s a link that can be successfully embedded you will see a preview in your editor.
You’ll see your video in the block editor, with the option to write a caption underneath.
If you use a URL that can’t be embedded, the block shows the message “Sorry, this content could not be embedded.” You will have two choices: Try again with a different URL or Convert to link.
Besides the Mover and Drag & Drop Handle, the Block Toolbar for the Dailymotion embed shows four buttons:
Transform to:
You can transform a Dailymotion embed into a Paragraph, Columns, or Group. Transforming it into a Group would give you the ability to change the background color around the Dailymotion embed.
Change alignment:
“Wide width” and “Full width” alignment need to be enabled by the Theme of your site.
Edit URL:
Via the edit URL, you can change the Dailymotion Embed URL in the embed block. Overwrite the existing URL and click on the “Embed” Button.
More options
The More Options menu represented by three vertical dots on the far right of the toolbar gives you more features such as the ability to duplicate, remove, or edit your block as HTML.?
Read about these and other settings.
Besides the Advanced section, the Dailymotion embed has only one other setting in the “Block Settings” sidebar: Media Settings.
Via the Media Settings you can control the behavior of your 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 CSS class(es) to your block.
The “Additional CSS class(es)” lets you add CSS class(es) to your block, allowing you to write custom CSS and style the block as you see fit.
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.
Using the generic Embed Block, you can paste the URL from the third-party site that you want to embed the content such as YouTube, Vimeo, TED, etc on your post or page.
You can also use Embed blocks build for specific third-party services such as YouTube Embed, Vimeo Embed, etc.
For a full list of embeds, check out the article: list of all embed blocks.
WordPress can embed content from the services listed below:
Due to Facebook’s decision to close the oEmbed end point for embedding Facebook links, the block will not work anymore after October 24, 2020. Publishers who want to embed Facebook links into their sites will require a developer account and an appid, and provide an authentication token with their call to the endpoint. Facebook Documentation: create an app
WordPress leadership reached out to Facebook but it seems the policy change is final. Apart from alerting users here and in other places, WordPress contributors can’t do anything about it.
Facebook Embed block allows you to add Facebook posts to your post or pages. Keep in mind that the post needs to be public in order to add it.
Besides Facebook Posts, you can also share links to Facebook Photos, Facebook Albums, and Facebook Videos.
Note that you can not embed Facebook pages, Facebook events, and Facebook groups.
Embedding a Facebook post is as simple as following these steps:
Detailed instructions on adding blocks
The block toolbar contains the tools to customize each block. The Facebook block’s toolbar consists of the following tools:
Transform to
You can transform a Facebook embed into a Group. This would give you the ability to change the background color around the Facebook embed.
Block-moving tools
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 Facebook 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.
Change alignment
Note: “Wide width” and “Full width” alignments need to be enabled by the Theme of your site.
More options
These controls give you the option to copy, duplicate, and edit your block as HTML.
Read about these and other settings.
The block settings panel contains customization options specific to the block. To open it, select the block and click the cog icon next to the Publish button.
Besides the Advanced section, the Facebook embed has only one setting in the “Block Settings” sidebar: Media 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 settings
The “Advanced” tab lets you add CSS class(es) to your block. This will allow you to write custom CSS and styles to the block.
With the Flickr embed block, you can add photos and videos from Flickr to your posts and pages. However, when you click any photo or video, it will take you to Flickr where you can see photos and play videos.
You can also embed photo albums and galleries with the next/previous arrow links. You don’t need a Flickr account to embed photos or videos.
Note: With video, the page/post only displays the image of the video. There will be no play/pause button. By clicking on the video, it will be redirected to the corresponding Flickr page to play.
You can only share those photos and videos which are visible to everyone(public). Some publishers put restrictions by setting privacy.
Embedded image from flickr
Steps to embed Flickr photos or videos to your post or page
Detailed instructions on adding blocks
If the link can be successfully embedded into the post/page, you will see the preview in your block editor.
If you use a URL that can’t be embedded, the block shows the message “Sorry, this content could not be embedded.” You will have two choices: Try again with a different URL or convert to link.
Embed Photo Album and Gallery
You can embed a photo album and gallery to your post/page. The page/post will display the first photo of the album or gallery with the next and previous arrow link.
The Block Toolbar for the Flickr embed shows six buttons:
Transform to:
Group
You can transform a Flickr embed into a Group. This would give you the ability to change the background color around the Flickr embed.
Left: Editor view of a Flickr Embed as a group with Color Settings controls
Right: Flickr embeds with a green background.
Change Alignment
Note: “Wide width” and “Full width” alignment needs to be enabled by the Theme of your site.
Edit URL
Via the edit URL, you can change the Flickr Embed URL in the embed block. Overwrite the existing URL and click on the “Embed” Button.
More Options
These controls give you the option to copy, duplicate, and edit your block as HTML.
Read about these and other 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.
Using the Imgur Embed block you can include an Imgur post into your post/page, so your visitor can stay on your site to view the Imgur post directly, without redirecting to Imgur. Also note that you don’t need an Imgur account to embed an image, GIF or video, although it needs to be public.
Steps to embed an Imgur post in your post or page:
2. Add an Imgur Embed block to your post.
Detailed instructions on adding blocks
3. Paste the Imgur URL from Step 1 in the text box
4. Click on the “Embed” Button
If it’s a link that can be successfully embedded you will see a preview in your editor.
If you use a URL that can’t be embedded, the block shows the message “Sorry, this content could not be embedded.” You will have two choices: Try again with a different URL or convert to a link.
5. Click on “Preview” to see how it will look on the front end of your page
Each block has its own block-specific controls that allow you to manipulate the block right in the editor. The Block Toolbar for the Imgur embed shows four buttons:
Transform to:
You can transform an Imgur embed block into a Paragraph, Columns or Group block. Changing an Imgur embed block into a Group block would give you the ability to change the background color around the Imgur embed.
Block-moving tools
Use the block-moving tools to move the block up and down the editor. Use the six dots icon to drag and drop the Imgur 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.
Get more information about moving a block within the editor.
Change Alignment:
The block toolbar for the Imgur Embed block has options for alignment.
The “Wide width” and “Full width” alignment settings must be enabled by your WordPress theme.
Edit URL
Via the edit URL, you can change the Imgur Embed URL in the embed block. Overwrite the existing URL and click on the “Embed” Button
More Options
These controls give you the option to copy, duplicate, and edit your block as HTML.
Read about these and other settings.
Besides the Advanced section, the Imgur embed has only one setting in the “Block Settings” sidebar: Media 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 settings
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.
Due to Facebook’s decision to close the oEmbed end point for embedding Instagram links, the block will not work anymore after October 24, 2020. Publishers who want to embed Facebook links into their sites will require a developer account and an appid, and provide an authenication token with their call to the endpoint. Facebook Documentation: create an app
WordPress leadership reached out to Facebook but it seems the policy change is final. Apart from alerting users here and other place, WordPress contributors can’t do anything about it.
The Facebook embed block was removed for the Gutenberg plugin version 9.0 and will be removed from the upcoming WordPress core version in 5.6
With the Instagram Embed block, you can embed Instagram posts on your posts and pages. You don’t need an Instagram account to be able to use it. You can only embed public posts, though.
An Example:
Steps to embed an Instagram Post
FinNavigate to the Instagram post you want to embed on your page. Copy the link of that post by clicking on it, then on the more options button, and then on the Copy Link. The process is similar for mobile devices.
If the link is embedded successfully, you’ll see a preview in your editor.
If you’re using a link that cannot be embedded, the block shows a message, “Sorry, this content could not be embedded.”
You will have two choices: Try again with a different URL or convert it to a link.
6. Click on “Preview” to see how it will look on the front-end.
Besides the Mover and Drag & Drop Handle, the Block Toolbar for the Instagram embed shows four buttons:
Transform to:
You can transform an Instagram embed to a Group. This would give you the ability to change the background color around the Instagram embed.
Change Alignment
Edit URL
Via the edit URL, you can change the Instagram Embed URL in the embed block. Overwrite the existing URL and click on the “Embed” Button.
More Options:
These controls give you the option to copy, duplicate, and edit your block as HTML.
Read about these and other 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.