{"id":12889937,"date":"2020-05-25T21:34:28","date_gmt":"2020-05-25T21:34:28","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&#038;p=12889937"},"modified":"2024-06-09T10:11:34","modified_gmt":"2024-06-09T10:11:34","slug":"wordpress-embed","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/wordpress-embed\/","title":{"rendered":"WordPress embed"},"content":{"rendered":"\n<p class=\"has-text-align-right has-small-font-size wp-block-paragraph\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/blocks\/\">Go back to the list of <strong>Blocks<\/strong><\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With the WordPress Embed block, you can embed WordPress posts into your posts and pages. You don\u2019t need a WordPress account to be able to use it. You can only embed public posts, though.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>An Example:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"899\" height=\"744\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/155233584-f1b85b8b-fbdb-434c-b950-66a0d407bc3a.png\" alt=\"Images showing the WordPress embed\" class=\"wp-image-15572064\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/155233584-f1b85b8b-fbdb-434c-b950-66a0d407bc3a.png 899w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/155233584-f1b85b8b-fbdb-434c-b950-66a0d407bc3a-300x248.png 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/155233584-f1b85b8b-fbdb-434c-b950-66a0d407bc3a-768x636.png 768w\" sizes=\"auto, (max-width: 899px) 100vw, 899px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Steps to embed a WordPress Post<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>You need to find the URL of the Post.<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Find the URL of the WordPress post you want to embed in your page. Copy the link of that post from the search bar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"941\" height=\"494\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/05\/second-wordpress-embed.png\" alt=\"Getting the URL for the WordPress embed\" class=\"wp-image-12938937\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/05\/second-wordpress-embed.png 941w, https:\/\/wordpress.org\/documentation\/files\/2020\/05\/second-wordpress-embed-300x157.png 300w, https:\/\/wordpress.org\/documentation\/files\/2020\/05\/second-wordpress-embed-768x403.png 768w\" sizes=\"auto, (max-width: 941px) 100vw, 941px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li><strong>Go to your post or page<\/strong><\/li>\n\n\n\n<li><strong>Add the WordPress block<\/strong><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"658\" height=\"694\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/155233245-60b63bd9-46d1-4251-9420-029355e70d4b.png\" alt=\"How to add the WordPress embed to a page or post\" class=\"wp-image-15572069\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/155233245-60b63bd9-46d1-4251-9420-029355e70d4b.png 658w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/155233245-60b63bd9-46d1-4251-9420-029355e70d4b-284x300.png 284w\" sizes=\"auto, (max-width: 658px) 100vw, 658px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/adding-a-new-block\/\">Detailed instructions on adding blocks<\/a><\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li><strong>Paste the link into the text box and click the \u201cEmbed\u201d button<\/strong><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"882\" height=\"653\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/155234216-7240c98a-ea04-49d2-b2bd-4b4198802b63.png\" alt=\"Image showing how to add the URL for the embed \" class=\"wp-image-15572071\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/155234216-7240c98a-ea04-49d2-b2bd-4b4198802b63.png 882w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/155234216-7240c98a-ea04-49d2-b2bd-4b4198802b63-300x222.png 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/155234216-7240c98a-ea04-49d2-b2bd-4b4198802b63-768x569.png 768w\" sizes=\"auto, (max-width: 882px) 100vw, 882px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If it\u2019s a link that can be successfully embedded you will see a preview in your editor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"648\" height=\"270\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/2022-04-19_11-57-59.png\" alt=\"Image showing how to add the URL for the embed \" class=\"wp-image-15572141\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/2022-04-19_11-57-59.png 648w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/2022-04-19_11-57-59-300x125.png 300w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If you\u2019re using a link that cannot be embedded, the block shows a message, \u201c<em>Sorry, this content could not be embedded.<\/em>\u201d<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You will have two choices: Try again with a different URL or convert it to a link.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1012\" height=\"749\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/155235027-68807f45-152e-4a4e-bb9e-94cc1b137ab6.png\" alt=\"Image showing how to add the URL for the embed \" class=\"wp-image-15572080\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/155235027-68807f45-152e-4a4e-bb9e-94cc1b137ab6.png 1012w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/155235027-68807f45-152e-4a4e-bb9e-94cc1b137ab6-300x222.png 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/155235027-68807f45-152e-4a4e-bb9e-94cc1b137ab6-768x568.png 768w\" sizes=\"auto, (max-width: 1012px) 100vw, 1012px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>6. Click on \u201cPreview\u201d to see how it will look on the front-end.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"258\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/155235324-a8004734-1843-4c87-838f-ff49d041cac3.png\" alt=\"Preview of a WordPress embed after adding a URL\" class=\"wp-image-15572083\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/155235324-a8004734-1843-4c87-838f-ff49d041cac3.png 650w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/155235324-a8004734-1843-4c87-838f-ff49d041cac3-300x119.png 300w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Block Toolbar<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Besides the Mover and Drag &amp; Drop Handle, the Block Toolbar for the WordPress embed shows four buttons:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"377\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/155236019-ba09c31c-890a-4d1f-a488-91327e3568f3.png\" alt=\"Block toolbar for the WordPress embed \" class=\"wp-image-15572088\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/155236019-ba09c31c-890a-4d1f-a488-91327e3568f3.png 602w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/155236019-ba09c31c-890a-4d1f-a488-91327e3568f3-300x188.png 300w\" sizes=\"auto, (max-width: 602px) 100vw, 602px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Transform to<\/li>\n\n\n\n<li>Change alignment<\/li>\n\n\n\n<li>Edit URL, and<\/li>\n\n\n\n<li>More Options.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Transform to<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"480\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/155236194-b9245d2f-62b1-4740-92c8-ae57ff1446d4.png\" alt=\"How to transform the WordPress embed to other block\" class=\"wp-image-15572091\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/155236194-b9245d2f-62b1-4740-92c8-ae57ff1446d4.png 640w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/155236194-b9245d2f-62b1-4740-92c8-ae57ff1446d4-300x225.png 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can transform a WordPress embed to a Group. This would give you the ability to change the background color around the WordPress embed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"600\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/163211830-bba7916b-6d3a-4720-9391-8bad25e4420c-1024x600.png\" alt=\"WordPress embed that has been transformed into a group block\" class=\"wp-image-15572093\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/163211830-bba7916b-6d3a-4720-9391-8bad25e4420c-1024x600.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/163211830-bba7916b-6d3a-4720-9391-8bad25e4420c-300x176.png 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/163211830-bba7916b-6d3a-4720-9391-8bad25e4420c-768x450.png 768w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/163211830-bba7916b-6d3a-4720-9391-8bad25e4420c.png 1145w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Editor view of an WordPress Embed as a group with Color Settings controls<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"644\" height=\"373\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/163211643-61a84b7b-05a7-4702-9dc1-256c64c5d8dc-1.png\" alt=\"The settings available when the WordPress embed is in a group block\" class=\"wp-image-15572102\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/163211643-61a84b7b-05a7-4702-9dc1-256c64c5d8dc-1.png 644w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/163211643-61a84b7b-05a7-4702-9dc1-256c64c5d8dc-1-300x174.png 300w\" sizes=\"auto, (max-width: 644px) 100vw, 644px\" \/><figcaption class=\"wp-element-caption\">WordPress Embed with a green background.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Change Alignment\u00a0<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"644\" height=\"438\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/163212433-75b0e6e5-0352-47f9-b3c8-afc611d228c1-1.png\" alt=\"How to change alignment of the WordPress embed \" class=\"wp-image-15572106\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/163212433-75b0e6e5-0352-47f9-b3c8-afc611d228c1-1.png 644w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/163212433-75b0e6e5-0352-47f9-b3c8-afc611d228c1-1-300x204.png 300w\" sizes=\"auto, (max-width: 644px) 100vw, 644px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Align left<\/strong> &#8211; Make the WordPress post left aligned<\/li>\n\n\n\n<li><strong>Align center<\/strong> &#8211; Make the WordPress post alignment centered<\/li>\n\n\n\n<li><strong>Align right <\/strong>&#8211; Make the&nbsp; WordPress post align right<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Edit URL<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Via the edit URL, you can change the WordPress Embed URL in the embed block. Overwrite the existing URL and click on the &#8220;Embed&#8221; Button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"262\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/163212585-09ade742-1afd-4829-a863-8624bcf7b03d.png\" alt=\"Adding a URL to the WordPress embed \" class=\"wp-image-15572108\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/163212585-09ade742-1afd-4829-a863-8624bcf7b03d.png 650w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/163212585-09ade742-1afd-4829-a863-8624bcf7b03d-300x121.png 300w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/figure>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>More Options<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/more-options\/\">Read about these and other settings.<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Block Settings<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\">Media Settings<\/h3>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"406\" height=\"182\" data-id=\"12701737\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/04\/Screen-Shot-2020-04-20-at-9.29.46-AM.png\" alt=\"Media Settings you can control the behavior of your post embed\" class=\"wp-image-12701737\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/04\/Screen-Shot-2020-04-20-at-9.29.46-AM.png 406w, https:\/\/wordpress.org\/documentation\/files\/2020\/04\/Screen-Shot-2020-04-20-at-9.29.46-AM-300x134.png 300w\" sizes=\"auto, (max-width: 406px) 100vw, 406px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"408\" height=\"197\" data-id=\"12701738\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/04\/Screen-Shot-2020-04-20-at-9.29.55-AM.png\" alt=\"\" class=\"wp-image-12701738\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/04\/Screen-Shot-2020-04-20-at-9.29.55-AM.png 408w, https:\/\/wordpress.org\/documentation\/files\/2020\/04\/Screen-Shot-2020-04-20-at-9.29.55-AM-300x145.png 300w\" sizes=\"auto, (max-width: 408px) 100vw, 408px\" \/><\/figure>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Via the <em>Media Settings<\/em> you can control the behavior of your post embed when viewed from a smaller device, like on a  phone screen. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Toggle switch turns on or off the resize functionality for smaller devices. The default setting is &#8220;on&#8221; or blue. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>&#8220;Off:&#8221;<\/strong> This embed may not preserve its aspect ratio when the browser is resized. In the off position the toggle switch is gray. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>&#8220;On:&#8221;<\/strong> This embed will preserve its aspect ratio when the browser is resized. The toggle switch turns blue in the &#8220;On&#8221; position. <\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Advanced<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit.<br><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/wordpress.org\/documentation\/files\/2020\/04\/Screen-Shot-2020-04-22-at-10.33.35-AM.png\"><img loading=\"lazy\" decoding=\"async\" width=\"349\" height=\"191\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/04\/Screen-Shot-2020-04-22-at-10.33.35-AM.png\" alt=\"\" class=\"wp-image-12714391\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/04\/Screen-Shot-2020-04-22-at-10.33.35-AM.png 349w, https:\/\/wordpress.org\/documentation\/files\/2020\/04\/Screen-Shot-2020-04-22-at-10.33.35-AM-300x164.png 300w\" sizes=\"auto, (max-width: 349px) 100vw, 349px\" \/><\/a><figcaption class=\"wp-element-caption\">The advanced section lets you add a CSS class to your block.<\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-group changelog has-very-dark-gray-color has-very-light-gray-background-color has-text-color has-background is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading has-medium-font-size\" id=\"changelog\">Changelog <\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Updated 2022-11-26 \n<ul class=\"wp-block-list\">\n<li>Removed redundant content <\/li>\n\n\n\n<li>Added alt text to images <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2022-04-19 &#8211; new screenshots<\/li>\n\n\n\n<li>Updated 2020-08-18\n<ul class=\"wp-block-list\">\n<li>Replaced \u201cMore Options\u201d \u2013 new screenshot<\/li>\n\n\n\n<li>Added \u201cMove To\u201d and \u201cCopy\u201d section under More Options<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Created 2020-05-25<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Go back to the list of Blocks With the WordPress Embed block, you can embed WordPress posts into your posts and pages. You don\u2019t need a WordPress account to be able to use it. You can only embed public posts, though. An Example: Steps to embed a WordPress Post Find the URL of the WordPress [&hellip;]<\/p>\n","protected":false},"author":5713323,"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false},"category":[80,89],"class_list":["post-12889937","helphub_article","type-helphub_article","status-publish","hentry","category-customization","category-embed-blocks"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/12889937","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/users\/5713323"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=12889937"}],"version-history":[{"count":3,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/12889937\/revisions"}],"predecessor-version":[{"id":16360453,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/12889937\/revisions\/16360453"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=12889937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=12889937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}