Embed Blocks

External content embedding via oEmbed.

core/embed

Universal embed block with provider variations.

Attributes:

  • url (string) — Content URL
  • caption (rich-text) — Embed caption
  • type (string) — Embed type (video, rich, photo, link)
  • providerNameSlug (string) — Provider slug
  • allowResponsive (boolean) — Allow responsive (default: true)
  • responsive (boolean) — Is responsive
  • previewable (boolean) — Can preview (default: true)

Supports: align, className, spacing

Embed Variations

Each variation sets the providerNameSlug attribute:

Video Providers

VariationProviderURL Pattern
youtubeYouTubeyoutube.com, youtu.be
vimeoVimeovimeo.com
dailymotionDailymotiondailymotion.com
videopressVideoPressvideopress.com
tiktokTikToktiktok.com
tedTEDted.com
animotoAnimotoanimoto.com
cloudupCloudupcloudup.com
crowdsignalCrowdsignalcrowdsignal.com

Social Providers

VariationProviderURL Pattern
twitterTwitter/Xtwitter.com, x.com
instagramInstagraminstagram.com
facebookFacebookfacebook.com
flickrFlickrflickr.com
pinterestPinterestpinterest.com
redditRedditreddit.com
tumblrTumblrtumblr.com
blueskyBlueskybsky.app

Audio Providers

VariationProviderURL Pattern
spotifySpotifyspotify.com
soundcloudSoundCloudsoundcloud.com
mixcloudMixcloudmixcloud.com
pocketcastsPocket Castspocketcasts.com

Other Providers

VariationProviderURL Pattern
wordpressWordPress.comwordpress.com
wordpress-tvWordPress.tvwordpress.tv
amazon-kindleAmazon Kindleamazon.com
issuuIssuuissuu.com
scribdScribdscribd.com
slideshareSlideShareslideshare.net
speaker-deckSpeaker Deckspeakerdeck.com
kickstarterKickstarterkickstarter.com
imgurImgurimgur.com
wolfram-cloudWolfram Cloudwolframcloud.com

How Variations Work

json
{
  "name": "youtube",
  "title": "YouTube",
  "icon": "embed-video",
  "keywords": ["video", "music"],
  "description": "Embed a YouTube video.",
  "patterns": ["https?://((m|www)\.)?youtube\.com/.+", "https?://youtu\.be/.+"],
  "attributes": {
    "providerNameSlug": "youtube",
    "responsive": true
  }
}

The embed block detects the URL and automatically selects the appropriate variation.

oEmbed Flow

  1. User pastes URL
  2. Block sends URL to /wp-json/oembed/1.0/proxy
  3. WordPress fetches oEmbed data from provider
  4. Embed HTML is cached in post meta
  5. Block renders provider HTML in iframe/figure

Responsive Embeds

Responsive embeds (videos) are wrapped:

html
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">
  <div class="wp-block-embed__wrapper">
    <!-- provider embed HTML -->
  </div>
  <figcaption class="wp-element-caption">Caption</figcaption>
</figure>

Aspect ratio classes:

  • wp-embed-aspect-21-9
  • wp-embed-aspect-18-9
  • wp-embed-aspect-16-9
  • wp-embed-aspect-4-3
  • wp-embed-aspect-1-1
  • wp-embed-aspect-9-16
  • wp-embed-aspect-1-2