WordPress Gutenberg Blocks – Embed
This tutorial is part of our WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users series.
- To learn more about using the Gutenberg content editor and the editor interface, go here: WordPress Gutenberg Content Editor
- To learn more about using blocks, go here: How To Use WordPress Gutenberg Blocks
Embed Block Description
The Embed Block lets you embed videos, images, tweets, audio, and other content from external sources.
(Add media elements to WordPress using the Embed Block)
How To Use The Embed Block
To add an Embed Block:
- Add or paste in your Embed URL.
- Use the tools in the Embed Block Editor or Block Settings section to align, edit, or configure your media elements.
Let’s go through the above steps:
First, create a new post or page or open an existing post or page and either:
Click on the ‘Add Block’ tool and select an ‘Embed’ block …
(‘Add Block’ Tool – Add Embed Block)
Or, select an Embed Block in the Content Area …
(Add an Embed Block from the Content Area)
After adding an Embed Block, you can:
- Edit and configure block settings,
- Save, publish, or update your post or page.
How To Edit An Embed Block
To edit an Embed Block:
- Click inside the Embed Block to select it.
- Use the Block Editor tools to:
- Change block alignment.
- Format caption text (bold, italics, strikethrough).
- Add a hyperlink to the embed caption.
- Use the Block Settings to configure any additional settings for your embedded content.
(Edit a Embed Block)
Remember to update and publish your post or page to save your settings.
How To Remove An Embed Block
To delete or remove an Embed Block:
- Click inside the Embed Block to select it.
- Select the ‘More Options’ tool in the Block Editor.
- Click on ‘Remove Block’.
- The block will be removed from your post or page.
(Remove an Embed Block)
- You can reposition your block using the ‘Move Up’ and ‘Move Down’ arrows or the Drag and Drop handle tool (see our ‘How To Use Blocks‘ tutorial if you need help with this step).
- You can also convert Embed Blocks into Reusable Blocks.
Embed Block Tools, Options & Settings
The Embed Block includes tools, options, and settings for:
- Embed Block Editor
- Embed Block Settings
Embed Block Editor
(Embed Block Editor)
The Embed Block Editor includes tools that let you perform the following operations:
- Display Block Type (See ‘Embed Block – Additional Info’ section below.)
- Align Embedded Element
- Align left
- Align center
- Align right
- Embedded Element Width Display
- Wide width
- Full width
- More Options
- See ‘More Options’ menu section in the Gutenberg Content Area tutorial for more details.
(Embed Block Editor)
Embed Block Settings
(Embed Block Settings)
Embed Block settings include:
- Block description area
- Media Settings
- Resize for smaller devices – preserve aspect ration of embedded element when the browser is resized.
- Advanced Settings
- Additional CSS Class
Embed Block – Additional Info
- The Embed Block cannot be converted into other block types:
- Installing plugins or themes on your site may add new functionality, options, or settings to Embed Blocks.
Supported WordPress Embeds
WordPress supports embedding many third-party media elements (see table below). If you try to add an unsupported format, you will get a message that the element is not supported (“Sorry, we could not embed that content.”) and the option to try again, or convert the media element into a link.
(Unsupported Embed Formats)
WordPress currently supports the embed blocks listed below:
|Embed Block Image||Embed Block Name||Description|
|Animoto||Animoto is a cloud-based video creation service that produces video from photos, video clips, and music into video slideshows.|
|Cloudup||Cloudup lets you instantly and securely share photos, music, links, and files.|
|CollegeHumor||CollegeHumor delivers daily comedic content, including videos, pictures, articles and jokes.|
|Dailymotion||Dailymotion is a video-sharing technology platform.|
|Embed||General embedding block|
|Embed content from Facebook.|
|Flickr||Flickr is an image hosting service and video hosting service.|
|Funny or Die||Funny videos, funny pictures, and funny articles featuring celebrities, comedians, and you.|
|Hulu||Hulu provides instant streaming content.|
|Imgur||Imgur is an online image sharing community|
|Embed content from Instagram|
|Issuu||Issuu is an electronic publishing platform for flipbooks, digital magazines, and digital catalogs.|
|Kickstarter||Kickstarter is a global crowdfunding platform focused on creativity and merchandising.|
|Meetup.com||Meetup is a service used to organize online groups that host in-person events for people with similar interests.|
|Mixcloud||Mixcloud is an online music streaming service.|
|Photobucket||Photobucket is an image and video hosting website.|
|Polldaddy||Polldaddy (Crowdsignal) lets you create polls, surveys, quizzes, and ratings.|
|Embed content from Reddit a social news aggregation, web content rating, and discussion website.|
|ReverbNation||ReverbNation provides tools and opportunities for musicians.|
|Screencast||Screencast lets you share content created with image and video capturing software like Snagit and Camtasia.|
|Scribd||Scribd is a digital library, e-book and audiobook subscription service|
|Slideshare||LinkedIn SlideShare is a hosting service for professional content including presentations, infographics, documents, and videos.|
|SmugMug||SmugMug is an image sharing, image hosting service, and online video platform.|
|SoundCloud||SoundCloud is an online audio distribution platform and music sharing website|
|Speaker Deck||Speaker Deck is an online presentation sharing site.|
|Spotify||Spotify is a music streaming platform.|
|TED||TED provides videos from subject experts on education, business, science, tech, and creativity.|
|Tumblr||Tumblr is a microblogging and social networking website|
|Embed content from Twitter.|
|VideoPress||VideoPress lets you easily upload and share videos on your WordPress blog or any site.|
|Vimeo||Vimeo is a video-sharing website where users can upload, share and view videos|
|WordPress||Embed content from WordPress sites|
|WordPress.tv||WordPress.TV provides videos and recorded talks about the WordPress platform.|
|YouTube||Embed content from YouTube|
Congratulations! Now you know how to use the WordPress Gutenberg content editor Embed Block.
- To learn how to use other Gutenberg blocks, go here: WordPress Gutenberg Content Editor – How To Use Blocks
- For more tutorials on using the Gutenberg content editor, go here: WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users