How to Embed Content in the Gutenberg Editor

Per the definition for using blocks with the Gutenberg Editor in the WordPress interface:

The Embed block allows you to easily add videos, images, tweets, audio, and other content to your post or page.

Embeds have been part of WordPress since version 2.9. The majority of the embed types consist of social websites like Twitter, Facebook, YouTube, Instagram, Pinterest, etc. Most of the embeds work through a protocol called oEmbed that allows one website to provide the HTML code for embedding content on another website. For the most part, WordPress does this for you when you drop the content on to the page/post. However, we will be demonstrating how to use the Gutenberg editor to add embedded content. Make sure that you have the latest version of Gutenberg loaded in order to use this tutorial.

How do you Embed Content using the Gutenberg Editor

Follow the directions below to add embedded content through blocks within the Gutenberg editor.

  1. Log in to the WordPress Administrator
  2. Select Pages or Posts in the menu.
  3. Add a new page or post, or open an existing on and edit it.
  4. If you are adding a new page or post you will see a title field at the top of the editor screen. Type in a title as needed.
  5. Move your pointer to the bottom center of an existing block if you are editing an existing post or page. Otherwise, if you are adding a new post or page, click on the circled plus sign that appears. If you are looking at an existing page or post, you can click on a block, then click on the circled plus sign in the top left corner.
  6. You will see a pop-up window appear with a search field at the top. Underneath, you will see the following headings for blocks:
    • Recent – Recently used blocks
    • Blocks – Variety of block types for different types of content
    • Embeds – Embed options that allow you to add content from other websites
    • Saved – If you have edited a block and then detached it as a Reusable Block, then you have the option to save it under a different name. If you have saved the block, then you will see it listed in the Saved block section. For information please see our article on Editing a Block in the Gutenberg Editor.

    Click on the Embeds option to see the available types.

  7. Once you have completed selecting the Embed that you wish to use, select it and then add  your URL information to it. The URL information will be the link for your embedded media link.
  8. Click on Save Draft, or Publish in the top right corner of the page.

You now have an understanding of how to embed content in the Gutenberg editor. You can still always just drag and drop content into the page as was the case in the classic editor. If the content is supported by WordPress, the content would automatically be added. Check out the documentation provided by WordPress for more details on the oEmbed protocol.




   200+ Design Templates + 1 Kick-ass SuperTheme
   6 WordPress Plugins + 2 Essential Services

Everything you need to build and manage WordPress websites in one Central place.

Leave a Reply