How to oEmbed MySite in Wordpress

Question

Could somebody please help me understand how to debug this and what to do?

In short

I created a oembed provider and added it to wordpress. I see that wordpress got in response the correct json. But there is no further request for the picture at the provided url.

All I know

So basically I have a wordpress site and I want to embed a picture from another site of mine while writing a post.

I added the

wp_oembed_add_provider( 'https://dynamicallyLoadedSPA.com/*', 'https://laravelBackend.com/oembed/', false );

function in the functions.php (in the wordpress site). And after that, now when I paste a link while writing a post the embeding process happens, but still no picture or anything. I don't know how to debug this.

I see in my nginx logs,

/oembed/?maxwidth=1060&maxheight=1000&url=https://dynamicallyLoadedSPA.com/some-link-with-picture-and-description&dnt=1&format=json

that wordpress did make a request to that endpoint.

if I make the same request in the browser my laravel backend returns:

{
    "title": "Sausages",
    "description": "expiration date: 2020.10.01, 10euro",
    "url": "https://dynamicallyLoadedSPA.com/sausages",
    "type": "image",
    "tags": "food",
    "image": "https://img.laravelBackend.com/goods/4289/Untitled-2-04.jpg",
    "code": "<img src='https://img.laravelBackend.com/goods/4289/Untitled-2-04.jpg'>"
}

But after woordpress receives this there are no further requests for the actual picture at the

https://img.laravelBackend.com/goods/4289/Untitled-2-04.jpg

endpoint.

Why isn't woordpress making a request for the picture and displaying it in the post and post editor UI?

I'm expecting a picture with a description to appear when I paste a link in the woordpress "gutenberg" editor.

ps. when I look at the html of the visually editable block in the gutenberg editor, this is the generated html (everything seems to be in order there)

<figure class="wp-block-embed"><div class="wp-block-embed__wrapper">
https://dynamicallyLoadedSPA.com/sausages
</div></figure>

Answer 1

I think your oEmbed implementation is wrong. You can see in the WP-oEmbed class that WordPress supports four type values: photo, video, link and rich; whereas you're returning type=image.

From the spec section 2.3.4 it looks like that's WordPress's list is complete and 'image' isn't generally supported. You possibly meant type=photo, but those aren't generally linked and have mandatory height and width properties that you're not supplying.

So I think your options are:

• change your oEmbed provider to return a type=rich instead, and generate the HTML to include there
• extend WordPress to support type=image: implement the oembed_dataparse filter (called from the bottom of the function I linked above), detect type=image there and return the generate HTML you'd want to include from the oEmbed data returned.
  However chances are you'll also have to extend Gutenberg to work with the new type too, and I'm not sure how to do that.