{"id":11877,"date":"2020-12-19T12:56:57","date_gmt":"2020-12-19T17:56:57","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=11877"},"modified":"2021-10-01T17:00:32","modified_gmt":"2021-10-01T21:00:32","slug":"how-to-embed-content-in-the-gutenberg-editor","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/wordpress-tutorials\/how-to-embed-content-in-the-gutenberg-editor\/","title":{"rendered":"How to Embed Content in WordPress with Gutenberg"},"content":{"rendered":"\n

A WordPress website<\/a> can display many types of content, from text to videos to live social media feeds. When you want to display content from other websites on yours, you can use an Embed Block.<\/strong> You can embed content in WordPress<\/strong> like audio, video, as well as content from YouTube, Twitter, Spotify and more right from the editor.<\/p>\n

Embeds have been part of WordPress since version 2.9. 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 WordPress Gutenberg editor Embed Block.
\n<\/p>\n

Looking for an alternative to the Gutenberg Editor?<\/em> Try our WordPress Page Builder<\/a> that uses a different approach to WordPress Blocks<\/a> to help build your website with ease! Otherwise, here are the steps needed to continue this tutorial using WordPress with the current WordPress Editor:<\/p>\n

How to Embed Content in WordPress Using an Embed Block<\/h2>\n
Please follow the directions below to add embedded content within the WordPress editor. The Embed Block only needs the URL and will do everything else for you. The Embed Block gives you alignment options otherwise not available, making it easier to align the content on the page for example.<\/p>\n
\n
Open the page or post you wish to edit.<\/li>\n
Click the add block button. There are two add block buttons, each is a + (plus) icon<\/strong>. One is above the title and one on the right side of the editor at the bottom of the page.
\n $\"Add$ <\/a><\/li>\n
You can also add your embed block in-between blocks already on the page. Move your mouse above an existing block and you will see the black + Add Block<\/strong> button.
\n $\"Add$ <\/a><\/li>\n
You will see a pop-up window appear with a search field at the top. Search for embed<\/strong> to see the available types.
\n $\"Gutenberg$ <\/a><\/li>\n
In the list of embed blocks available, click the block you wish to use. WordPress adds the block to the page and then you can add your link to it. This link can be found from the source – the main URL of the page.
\n $\"Embed$ <\/a><\/li>\n
After clicking the blue Embed<\/strong> button, the Block will save and should convert from a text link to an image or iframe, like shown here.
\n $\"WordPress$ <\/a><\/li>\n
Click the alignment button to change how it appears on the page, if desired
\n $\"Align$ <\/a><\/li>\n
Click on Save Draft<\/b>, or Publish<\/b> in the top right corner of the page.<\/li>\n<\/ol>\nHow to Embed Content Using a Custom HTML Block<\/h2>\n
You can also embed content using a Custom HTML Block. To use this method you will need the full embed code from the source website – not just the URL of the content.<\/p>\n
\n
Open the page or post you wish to edit<\/li>\n
Click the Add Block button and search for Embed – click Custom HTML.
\n $\"Custom$ <\/a><\/li>\n
An empty block now shows on the page.
\n $\"WordPress$ <\/a><\/li>\n
Paste your embed code into the Custom HTML Block. You can switch between HTML and visual mode (Preview) from the toolbar above the block.
\n $\"Custom$ <\/a><\/li>\n<\/ol>\n
How to Embed Social Media Content in WordPress<\/h2>\n
We will now show you how to embed content from specific social media sites.<\/p>\n
How to Embed a YouTube Video in WordPress<\/h3>\n
\n
Start by finding your video on YouTube and click the Share link below the video.
\n $\"Share$ <\/a><\/li>\n
After clicking Share you will see the panel shown here. Copy the URL from here.
\n $\"YouTube$ <\/a><\/li>\n
Paste the URL into the block and click the blue Embed button.
\n $\"Embed$ <\/a><\/li>\n
Your video will now display in the WordPress editor.
\n $\"WordPress$ <\/a><\/li>\n
If you’d prefer to use a Custom HTML Block, click the Embed button on YouTube like shown here.
\n $\"YouTube$ <\/a><\/li>\n
On the right side of the panel below the code is a copy<\/strong> button.
\n $\"Copy$ <\/a><\/li>\n
Paste this code into the Custom HTML Block.
\n $\"Custom$ <\/a><\/li>\n<\/ol>\n
How to Embed a Tweet in WordPress<\/h3>\n
\n
Find the tweet you wish to embed and click on the tweet itself.<\/li>\n
To use the Twitter Embed Block, you will need to copy the URL in your browser window, an example is shown below. Simply paste this link in the Embed Block and you’re good to go!
\n $\"Tweet$ <\/a><\/li>\n
If you’d like to use the Custom HTML Block, you will need to use the actual embed code from Twitter. On the right side of the tweet is a menu icon of three dots – click this menu.
\n $\"Open$ <\/a><\/li>\n
Next, click Embed Tweet<\/strong>.
\n $\"Embed$ <\/a><\/li>\n
You will see a screen like this, with a blue Copy Code<\/strong> button. Copy and paste this code into a Custom HTML Block.<\/li>\n<\/ol>\n $\"Custom$ <\/a><\/p>\n
How to Embed Facebook and Instagram Posts in WordPress<\/h3>\n
As of October 24, 2020, Facebook made the decision to remove basic embed support<\/a>. This affects both Facebook and Instagram content. The blocks no longer appear as an option within the WordPress Gutenberg editor. You now need a Facebook developer account and an app ID<\/a>.<\/span><\/p>\n
With the latest version of WordPress, the easiest way to incorporate social media content on your website is with a social media plugin<\/a>.<\/p>\n
How to Embed Google Maps in WordPress<\/h2>\n
You can add a Google map to your website using a map block plugin. WordPress Core doesn’t have built-in functionality to embed Google maps so a plugin is needed. We have outlined the steps below to add a map block plugin directly from the editor. Many websites have maps to help guide customers to the correct location.<\/p>\n
\n
Click an add block button.
\n $\"Add$ <\/a><\/li>\n
Search for Google map<\/strong> and choose a map plugin from the list. We’ve selected BoldGrid’s but you can test others as needed.
\n $\"Add$ <\/a><\/li>\n
A Google map will now appear in the editor. Click the blue pencil icon and open the settings to change the map location.
\n $\"Edit$ <\/a><\/li>\n
Click the menu button with 3 vertical dots, like shown below, then click Show more<\/strong> settings<\/strong>.
\n $\"More$ <\/a><\/li>\n
From here you can change the map address using the panel on the right side of the screen. Make sure you are on the Block<\/strong> tab at the top, otherwise you will not see the correct options.
\n $\"Add$ <\/a><\/li>\n
Enter your desired address and then adjust the zoom level, height, and map type as needed.<\/li>\n
Publish the page to save your changes.<\/li>\n<\/ol>\n
<\/p>\n
You now have an understanding of how to embed content in the WordPress 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<\/a>.<\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"
A WordPress website can display many types of content, from text to videos to live social media feeds. When you want to display content from other websites on yours, you can use an Embed Block. You can embed content in WordPress like audio, video, as well as content from YouTube, Twitter, Spotify and more right […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"How to Embed Content in WordPress with the Gutenberg Editor","bgseo_description":"Learn how to embed content in WordPress from other websites using Gutenberg Blocks. You can embed audio, video, content from YouTube, Twitter, Spotify and more.","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[151],"tags":[691],"class_list":["post-11877","post","type-post","status-publish","format-standard","hentry","category-wordpress-tutorials","tag-gutenberg"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/11877","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=11877"}],"version-history":[{"count":18,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/11877\/revisions"}],"predecessor-version":[{"id":43303,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/11877\/revisions\/43303"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=11877"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=11877"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=11877"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

How to Embed Content Using a Custom HTML Block<\/h2>\nYou can also embed content using a Custom HTML Block. To use this method you will need the full embed code from the source website – not just the URL of the content.<\/p>\n

How to Embed Social Media Content in WordPress<\/h2>\nWe will now show you how to embed content from specific social media sites.<\/p>\n

How to Embed a Tweet in WordPress<\/h3>\n\nFind the tweet you wish to embed and click on the tweet itself.<\/li>\n

How to Embed Social Media Content in WordPress<\/h2>\n
We will now show you how to embed content from specific social media sites.<\/p>\n