WordPress Block Editor – Embed Block

This tutorial is part of our series WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users.

• To learn more about using the WordPress block editor interface, go here: The WordPress Block Editor – Content Area
• To learn more about using blocks, see this tutorial: How To Use WordPress Block Editor Blocks

***

Embed Block – Description

The Embed block lets you embed videos, images, tweets, audio, and content from other online services or external sources into the posts and pages of your site.

How To Use The Embed Block

In this section, we’ll cover:

• How to add an Embed block to your content.
• How to edit and configure your Embed block and block settings.
• How to remove the Embed block from your content.

For more details on using blocks (e.g. how to move blocks around your content), see this tutorial: How To Use Blocks.

Adding An Embed Block

To add an Embed block:

• Either:
  • Click on the ‘Add Block’ tool in the Editing Toolbar section and select the Embed block (in Most Used or Embeds section),
  • Add the Embed block in the Content Area.
• 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…

Or, select an Embed block using the Inserter tool in the Content Area.

Either of the above methods will insert an Embed block into your content.

After adding an Embed block, you can:

• Add a link to the content you want to embed and display on your site.
• 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.
  • Edit the embed URL.
  • Format caption text (e.g. bold, italics, strikethrough).
  • Add a hyperlink to the embed caption.
• Use the Block Settings to configure any additional settings for your embedded content.

The block’s Media settings let you turn the option of resizing your embedded content for smaller devices on or off. This preserves the aspect ratio of your content when the user’s browser is resized.

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 Embed block will be removed from your post or page.

Additionally…

• You can reposition your block using the ‘Move Up’ and ‘Move Down’ arrows or the Drag and Drop handle tool (if you need help with this step, see our tutorial on How To Use Blocks).
• You can also convert an Embed block into a Reusable block.

Embed Block Tools, Options & Settings

The Embed Block includes tools, options, and settings for:

• Embed Block Editor
• Embed Block Settings

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.)
• Drag & Drop Tool
• Move Up and Down Tool
• Change Alignment
  • Align left
  • Align center
  • Align right
  • Wide width – wide-aligned embedded media sticks out on either side of normal content.
  • Full width – stretches embedded media to cover the entire width of the browser window (normal content remains within margins on either side).
• Edit Embed URL
• More Options – See How To Use Blocks to learn how to use this section.

Embed Block Settings

Embed Block settings include:

• Block description area
• Media Settings
  • Resize for smaller devices – enable to preserve the aspect ratio of embedded content when the browser is resized.
• Advanced Settings
  • Additional CSS Class(es) – This field lets you add multiple CSS classes to your block separated with spaces. This allows you to write custom CSS and style the block as you see fit. Note: This requires having knowledge of CSS (Cascading Style Sheets).

Embed Block – Additional Info

Supported WordPress Embeds

WordPress currently supports embedding content from many third-party platforms, including:

• Embed – Use this block for general content embedding.
• Amazon Kindle – Embedded content about Amazon Kindle products.
• Animoto – A cloud-based video creation service that produces video from photos, video clips, and music into video slideshows.
• Cloudup – Share photos, music, links, and files.
• Crowdsignal – Create flexible surveys, polls, quizzes, and ratings.
• Dailymotion – A video-sharing technology platform.
• Flickr – An image hosting service and video hosting service.
• Imgur – An online image-sharing community.
• Issuu – An electronic publishing platform for flipbooks, digital magazines, and digital catalogs.
• Kickstarter – A global crowdfunding platform focused on creativity and merchandising.
• Meetup.com – A service used to organize online groups that host in-person events for people with similar interests.
• Mixcloud – An online music streaming service.
• Reddit – A social news aggregation, web content rating, and discussion website.
• ReverbNation – Tools and opportunities for musicians.
• Screencast – Share content created with image and video capturing software like Snagit and Camtasia.
• Scribd – A digital library, e-book, and audiobook subscription service.
• Slideshare -A hosting service for professional content including presentations, infographics, documents, and videos.
• SmugMug – An image sharing, image hosting service, and online video platform.
• SoundCloud – An online audio distribution platform and music sharing website.
• Speaker Deck – An online presentation sharing site.
• Spotify – A music streaming platform.
• TED – Videos from subject experts on education, business, science, tech, and creativity.
• TikTok – A video-sharing social networking service for short-form videos.
• Tumblr – A microblogging and social networking website.
• Twitter – Embed content from Twitter.
• VideoPress – Upload and share videos on your WordPress blog or any site.
• Vimeo – A video-sharing website where users can upload, share, and view videos.
• WordPress – Embed content from WordPress sites.
• WordPress.tv – Videos and recorded talks about the WordPress platform.
• YouTube – Embed video content from YouTube.
• And many others…

Use the embed blocks from the platforms listed above, or try adding the content using the general Embed block described in this tutorial.

You cannot embed links from platforms that WordPress does not support.

If you try to add a link from an unsupported platform, you will get the message “Sorry, this content could not be embedded.” and the option to try again, or convert the unsupported content into a link.

You can convert an Embed block into the following block types:

• Paragraph block
• Columns block
• Group block
• Reusable block

Additionally:

Installing plugins or themes on your site may also add new functionality, options, or settings to an Embed block.

Congratulations! Now you know how to use the WordPress content editor’s Embed block.

To learn how to use other blocks, go here: WordPress Block Editor – How To Use Blocks

***

***

We are not affiliated, associated, sponsored, or endorsed by WordPress or its parent company Automattic. This site contains affiliate links to products. We may receive a commission for purchases made through these links.