Jetpack: Research: Anchor.fm embed support in Gutenberg

[WunderBart]

Find out how we can get Gutenberg to automatically create an Anchor.fm embed for us.

[WunderBart]

In Gutenberg, we should be able to use the getEmbedPreviews() API call to retrieve the embed HTML. You can try with a YT link in the console, e.g.:

wp.data.select('core').getEmbedPreview('https://www.youtube.com/watch?v=PzPqKFdoaw0')

...which will call the https://www.youtube.com/oembed API with a given URL as a param.

Note: YouTube embed is customized here, in Jetpack, so maybe we could use it also as a reference if needed.

To add the support for Anchor.fm links, I think we'd need to either use the wp_oembed_add_provider or add the provider to wp-includes/class-wp-oembed.php.

I don't have any experience with oEmbed, but Anchor.fm doesn't seem to provide an /oembed endpoint (source) as e.g. YT does. Would that mean that we need to create it?

[jeherve]

Anchor.fm doesn't seem to provide an /oembed endpoint (source) as e.g. YT does.

I think they may have an oEmbed implementation already. Here is an example:
https://anchor.fm/api/v3/profile/22b6608/oembed?title=Brave%2C%20Not%20Perfect%20with%20Reshma%20Saujani

We could see about adding them to our list as a first step:
https://github.com/Automattic/jetpack/blob/7253a5e05189874496ccc68c9a909225d918b58e/class.jetpack.php#L1874

In parallel, Anchor.fm may be interested in asking Core to add support:
https://make.wordpress.org/core/handbook/contribute/design-decisions/#whitelisting-oembed-providers

[getdave]

Thanks for this research @WunderBart and @jeherve.

I also did some research here into how Gutenberg Core handles embeds.

In Gutenberg there is already a core/embed Block. This has been cleverly designed to allow it to be extended for multiple providers.

For example, this PR https://github.com/WordPress/gutenberg/pull/19345 adds TikTok embed support.

A quick look at the code seems to indicate that to add AnchorFM embed support we'd need to:

• Add a new entry to the core-embed.js file.
• Write the appropriate regex for the patterns props in the entry.
• Create and add an AnchorFM SVG icon.

To test this theory I did (some) of the above and came up with:

So, in theory, we could propose this in Core as a new entry in the Embeds Block. It's not all-singing-all-dancing, but it is a good MVP for Anchor FM support.

[marekhrabe]

Has anybody been successful embedding any content from them though? They do seem to have support for oembed and when I paste an Anchor.fm content link into an empty paragraph, the oembed discovery picks it up, transforms it into an embed block that loads their Anchor.fm player. The basic player UI loads but otherwise it stays empty and never loads the audio content and there are some errors in console about preventing requests for security reasons.

[jeherve]

9973 may be a useful related issue here. Anchor.fm, just like Song.link in that issue, may have to take some steps towards ensuring that their embeds work nicely from oEmbeds.

[getdave]

So @WunderBart are you going to need to contact Anchor.FM about their oEmbed support?

[WunderBart]

So @WunderBart are you going to need to contact Anchor.FM about their oEmbed support?

@davemart-in has already emailed them 🙌

[obenland]

@marekhrabe outlined what's necessary for the block to work as an oembed block in the main issue.