Embed Block

The Embed Block lets you embed videos, images, tweets, audio, and other content from external sources …

WordPress Gutenberg Blocks – Embed

WordPress Gutenberg - Embed Block

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

***

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

(Add media elements to WordPress using the Embed Block)

How To Use The Embed Block

To add an Embed Block:

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

'Add Block' Tool - Add 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

(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

(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

(Remove an Embed Block)

Additionally …

  • 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

(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

Embed Block Editor

(Embed Block Editor)

Embed Block Settings

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

(Unsupported Embed Formats)

WordPress currently supports the embed blocks listed below:

Embed Block ImageEmbed Block NameDescription

WordPress Gutenberg - Animoto Embed Block

AnimotoAnimoto is a cloud-based video creation service that produces video from photos, video clips, and music into video slideshows.

WordPress Gutenberg - Cloudup Embed Block

CloudupCloudup lets you instantly and securely share photos, music, links, and files.

WordPress Gutenberg - Embed Block

CollegeHumorCollegeHumor delivers daily comedic content, including videos, pictures, articles and jokes.

WordPress Gutenberg - Embed Block

DailymotionDailymotion is a video-sharing technology platform.

WordPress Gutenberg - Embed Block

EmbedGeneral embedding block

WordPress Gutenberg - Facebook Embed Block

FacebookEmbed content from Facebook.

WordPress Gutenberg - Flickr Embed Block

FlickrFlickr is an image hosting service and video hosting service.

WordPress Gutenberg - Embed Block

Funny or DieFunny videos, funny pictures, and funny articles featuring celebrities, comedians, and you.

WordPress Gutenberg - Embed Block

HuluHulu provides instant streaming content.

WordPress Gutenberg - Imgur Embed Block

ImgurImgur is an online image sharing community

WordPress Gutenberg - Instagram Embed Block

InstagramEmbed content from Instagram

WordPress Gutenberg - Embed Block

IssuuIssuu is an electronic publishing platform for flipbooks, digital magazines, and digital catalogs.

WordPress Gutenberg - Embed Block

KickstarterKickstarter is a global crowdfunding platform focused on creativity and merchandising.

WordPress Gutenberg - Embed Block

Meetup.comMeetup is a service used to organize online groups that host in-person events for people with similar interests. 

WordPress Gutenberg - Embed Block

MixcloudMixcloud is an online music streaming service.

WordPress Gutenberg - Embed Block

PhotobucketPhotobucket is an image and video hosting website.

WordPress Gutenberg - Embed Block

PolldaddyPolldaddy (Crowdsignal) lets you create polls, surveys, quizzes, and ratings.

WordPress Gutenberg - Reddit Embed Block

RedditEmbed content from Reddit a social news aggregation, web content rating, and discussion website.

WordPress Gutenberg - Embed Block

ReverbNationReverbNation provides tools and opportunities for musicians.

WordPress Gutenberg - Embed Block

ScreencastScreencast lets you share content created with image and video capturing software like Snagit and Camtasia.

WordPress Gutenberg - Embed Block

ScribdScribd is a digital library, e-book and audiobook subscription service

WordPress Gutenberg - Embed Block

SlideshareLinkedIn SlideShare is a hosting service for professional content including presentations, infographics, documents, and videos. 

WordPress Gutenberg - Embed Block

SmugMugSmugMug is an image sharing, image hosting service, and online video platform.

WordPress Gutenberg - SoundCloud Embed Block

SoundCloudSoundCloud is an online audio distribution platform and music sharing website

WordPress Gutenberg - Embed Block

Speaker DeckSpeaker Deck is an online presentation sharing site.

WordPress Gutenberg - Spotify Embed Block

SpotifySpotify is a music streaming platform.

WordPress Gutenberg - Embed Block

TEDTED provides videos from subject experts on education, business, science, tech, and creativity.

WordPress Gutenberg - Embed Block

TumblrTumblr is a microblogging and social networking website

WordPress Gutenberg - Twitter Embed Block

TwitterEmbed content from Twitter.

WordPress Gutenberg - Embed Block

VideoPressVideoPress lets you easily upload and share videos on your WordPress blog or any site.

WordPress Gutenberg - Vimeo Embed Block

VimeoVimeo is a video-sharing website where users can upload, share and view videos

WordPress Gutenberg - WordPress Embed Block

WordPressEmbed content from WordPress sites

WordPress Gutenberg - Embed Block

WordPress.tvWordPress.TV provides videos and recorded talks about the WordPress platform.

WordPress Gutenberg - YouTube Embed Block

YouTubeEmbed content from YouTube

***

Congratulations! Now you know how to use the WordPress Gutenberg content editor Embed Block.

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"This is AMAZING! I had learnt about how to use WordPress previously, but this covers absolutely everything and more!! Incredible value! Thank you!" - Monique, Warrior Forum

Reusable Blocks

Learn how to create and use Reusable Blocks for the WordPress Gutenberg content editor.

WordPress Gutenberg Blocks – Reusable Blocks

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

***

Reusable Block – Description

Reusable Blocks are a new feature of the WordPress Gutenberg content editor that:

  • Let you store and reuse content blocks across your site.
  • Can be shared with other contributors to reuse across your site.
  • Automatically update everywhere on your site when you make changes to the block.
  • Can be converted into regular blocks to prevent global changes from being applied throughout your site.

Reusable Block

(Reusable Block)

Reusable Block – Settings

The settings available for a Reusable Block depend on the type of block being used.

For more details about block settings, see the “WordPress Gutenberg Blocks” section of the tutorial below:

Reusable Block – Advanced Settings

Custom styles can be applied to Reusable Blocks using CSS (Cascading Style Sheets).

Reusable Block - Advanced Settings

(Reusable Block – Advanced Settings)

Note: Multiple CSS classes are allowed (add a space to separate each class name)

Reusable Block – Options

Reusable Block Settings

(Reusable Block Settings)

The following options from the ‘More Options’ menu are available for Reusable Blocks:

  • Hide Block Settings
  • Duplicate
  • Insert Before
  • Insert After
  • Convert to Regular Block
  • Remove from Reusable Blocks
  • Remove Block

Using the ‘Remove from Reusable Blocks’ setting is covered in this tutorial. For all other settings, see the tutorial below:

How To Create A Reusable Block

To create a Reusable Block:

  • Click inside the block you want to turn into a Reusable Block
  • Click on the ‘More Options’ menu
  • Select ‘Add to Reusable Blocks’
  • Give the block a name and click ‘Save’ to create the Reusable Block …

Create A Reusable Block

Your newly-created Reusable Block will be stored in a ‘Blocks’ library …

Blocks Library

(Blocks Library)

Important

Refer to the “How To Manage Blocks” section further below to learn how to manage Usable Blocks.

How To Use Reusable Blocks

To insert a Reusable Block into your content:

  • Select the ‘Add Block’ tool
  • Scroll down to the ‘Reusable’ section
  • Select and click on a Reusable Block …

Add Block - Reusable Section

(Add Block – Reusable Section)

The Reusable Block will be inserted into your content.

Reusable Blocks can be identified by the Reusable Block icon displayed on the top right-hand corner of the block …

Reusable Block icon

(Reusable Block icon)

How To Edit Reusable Blocks

To edit a Reusable Block:

Click anywhere inside the Reusable Block …

Click inside the Reusable Block to edit

(Click inside the Reusable Block to edit)

Click on the ‘Edit’ button …

Reusable Block - Edit

(Reusable Block – Edit)

Make your changes and click the ‘Save’ button to update your block settings …

Reusable Block - Save

(Reusable Block – Save)

Once changes have been made to a Reusable Block, every instance where the block has been used on your site will automatically update to reflect the changes …

Edit Reusable Block

(Edit Reusable Block)

How To Convert Reusable Blocks To Regular Blocks

To prevent changes made to a Reusable Block from being applied globally to your site, convert the Reusable Block into a regular Block as follows:

  • Click inside the Reusable Block
  • Click on the ‘More Options’ menu
  • Select ‘Convert to Regular Block’
  • The Reusable Block will be converted to a Regular Block …

Converting a Reusable Block to a Regular Block

(Converting a Reusable Block to a Regular Block)

Important

Converting a Reusable Block into a Regular Block doesn’t affect other instances where the Reusable Block has been used on your site.

If you want to make changes to a Reusable Block without affecting other instances of that block throughout your site, then:

  • Duplicate the Reusable Block
  • Convert duplicate Reusable Block into a Regular Block
  • Delete the Reusable Block from your content …

Duplicate Reusable Block then convert to Regular Block

(Duplicate Reusable Block then convert to Regular Block)

How To Manage Reusable Blocks

As mentioned earlier, Reusable Blocks are stored in a ‘Blocks’ library …

'Blocks' Library

(Your ‘Blocks’ Library)

You can access your Blocks library:

Access Your Blocks Library From The ‘Add Block’ Tool

To access your Blocks library from the ‘Add Block’ tool:

  • Select the ‘Add Block’ tool
  • Click on the ‘Reusable’ section
  • Click on ‘Manage All Reusable Blocks’

Manage All Reusable Blocks

(Manage All Reusable Blocks)

This will bring you to the ‘Blocks’ library section.

Access Your Blocks Library From ‘More Tools & Options’ Section

To access your Blocks library from the ‘More Tools & Options’ section:

  • Click on the ‘More Tools & Options’ menu section
  • Select ‘Tools’ > ‘Manage All Reusable Blocks’

More Tools & Options: Tools > Manage All Reusable Blocks

(More Tools & Options: Tools > Manage All Reusable Blocks)

This will bring you to the ‘Blocks’ library section.

To learn more about the ‘More Tools & Options’ section, go here:

Blocks Library

Managing Blocks

(Managing Blocks)

The following management actions can be applied to blocks stored in the ‘Blocks’ library:

  • Add new block
  • View blocks by status (e.g. published, draft, private, etc.)
  • Search blocks
  • Filter blocks by date
  • Sort blocks by Title or Date
  • Edit (single block edit or bulk edit)
  • Trash (single block trash or bulk trash)
  • Permanently delete blocks (after trashing)
  • Export as JSON / Import from JSON
Editing Blocks In The Reusable Blocks Library

Important

Bulk editing blocks only let you change their status (e.g. from published to draft). To edit the actual content of a Reusable Block, edit blocks individually.

To edit a block in the Reusable Blocks library:

  • Access the Reusable Blocks section using one of the methods shown above
  • Hover your cursor over the title of the Reusable Block you want to edit
  • Select ‘Edit’ …

Edit Reusable Block in 'Blocks' library

(Edit Reusable Block in ‘Blocks’ library)

This opens the Reusable Block in its own screen with all the tools and options available for that specific block type …

Reusable Block edit screen

(Reusable Block edit screen)

Save your changes after editing to update all instances of the Reusable Block on your site.

Export As JSON / Import From JSON

These settings allow you to export your Reusable Blocks to a data file and import these into other WordPress sites (or reimport them into your site).

Similarly, you can use this feature to import Reusable Blocks from other sites or created by other WordPress users.

How To Delete Reusable Blocks

Reusable Blocks can be removed:

  • From your content (removes the block from the post or page you are working on only.)
  • From your Reusable Blocks library (removes the block from every post and page where the block has been added.)

Deleting A Reusable Block From Your Content

To delete a Reusable Block from your content:

  • Click inside the Reusable Block
  • Click on the ‘More Options’ menu
  • Select ‘Remove Block’
  • The Reusable Block will be removed from your content.

Remove Block

(Remove Block)

Deleting A Reusable Block From Your Reusable Blocks Library

To delete a Reusable Block from the Reusable Blocks library:

  • Click inside the Reusable Block
  • Click on the ‘More Options’ menu
  • Select ‘Remove from Reusable Blocks’
  • Click on the ‘Delete Reusable Block’ confirmation message to proceed with the deletion or click ‘Cancel’ to abort the process.
  • If you proceed with the deletion the Reusable Block will be permanently removed from your Reusable Blocks library.

Remove from Reusable Blocks

(Remove from Reusable Blocks)

Important

Removing a Reusable Block from the Reusable Blocks library will permanently remove the block from all posts and pages that use it.

Therefore, make sure that this is what you really want to do.

'Delete Reusable Block' confirmation message

(‘Delete Reusable Block’ confirmation message)

Reusable Blocks – Additional Information

Search the WordPress plugins library from your dashboard for new block-enabled plugins that will help you enhance and extend your content …

New WordPress Plugins are available for Reusable Blocks

(New WordPress Plugins are available for Reusable Blocks)

Congratulations! Now you know how to use Reusable Blocks.

***

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"I love the way your email series "Infinite Web Content Creation Training Series" is documented and presented. It is very absorbing and captivating. The links and tutorials are interesting and educational. This has motivated me to rewrite my content following the concepts I am learning from the email series." - Mani Raju, www.fortuneinewaste.com