Facebook Embed Block preview error doesn't differentiate from a oEmbed API error

[7studio]

Describe the bug
When I try to use the Embed Blocks, the preview of a valid embeddable content and the error message for an invalid URL have the same render.

To Reproduce
Steps to reproduce the behaviour:

1. Create a new content.
2. Add a Facebook Embed Block.
3. Paste a valid content URL. E.g.: https://www.facebook.com/oohmyworld/videos/2324195200940031/
4. See the error message "Previews for this are unavailable in the editor, sorry!".
5. Add a Facebook Embed Block.
6. Paste an invalid content URL. E.g.: https://www.facebook.com/oohmyworld/vides/2324195200940031/
7. See the error message "Previews for this are unavailable in the editor, sorry!".

Expected behaviour
Gutenberg should display different error messages for failed previews and failed oEmbed API requests.
E.g.:

• Failed preview: "Previews for this are unavailable in the editor, sorry!"
• oEmbed API error: "This content URL is invalid, sorry!"

Screenshots

Edition:

Website:

[danielbachhuber]

Thanks for the report, @7studio

Gutenberg should display different error messages for failed previews and failed oEmbed API requests.

Notably, Facebook previews don't ever work in Gutenberg (introduced in f9d17bc and #816). The message "Previews for this are unavailable in the editor, sorry!" is always true because Gutenberg never attempts to fetch the oEmbed preview.

Flagging as Needs Copy Review because I think a little bit of wordsmithing could help the user understand why their Facebook embeds are behaving this way.

[danielbachhuber]

Another idea, and this would be a refinement to the existing implementation, would be to attempt the oEmbed preview, and then have the preview message distinguish between a Facebook Embed that would preview on the frontend vs. one that wouldn't (because the URL is incorrect, etc.)

[michelleweber]

why their Facebook embeds are behaving this way

Why do they -- what detail do you want to communicate here? And there's nothing the user can do about this, right?

[danielbachhuber]

Why do they -- what detail do you want to communicate here?

Facebook Embeds don't preview in Gutenberg like, for instance, Twitter Embeds do.

And there's nothing the user can do about this, right?

Correct.

[7studio]

Thank you to take into account this issue @danielbachhuber

The message "Previews for this are unavailable in the editor, sorry!" is always true because Gutenberg never attempts to fetch the oEmbed preview.

When I used the word "preview" I wanted to say "the oEmbed content displayed" sorry for this misspelling. So in my case, the current Gutenberg message is wrong because WordPress succeeds in catching the response of oEmbed API but Gutenberg doesn't render it 😉

I hope Facebook embeds can have the same behaviour than Twitter in the near future 😁

[michelleweber]

So in the interest of giving the user a useful next step/solution, I'm thinking you want something like:

Unlike other embeddable content, embedded Facebook links don't preview in the editor. Take a look at the page preview to see how they look.

[7studio]

Not really 😅

First of all, I didn't understand why @danielbachhuber said

Notably, Facebook previews don't ever work in Gutenberg

I took the time to look into core-blocks/embed and the Sandbox component and now I understand why Facebook contents can't be included for the moment.

I will try to argument a solution in my other issue #8360

IMHO, a message like:

Unlike other embeddable content, embedded Facebook links don't preview in the editor. Take a look at the page preview to see how they look.

is the worst thing that Gutenberg can do. I don't want to switch into preview mode to know if you paste a wrong URL… Facebook contents should not be an exception.

Due to an error in my code (/oembed/1.0/proxy/ route returned a malformatted JSON), it seems that Gutenberg is already able to display the suitable message for a wrong URL:

Gutenberg could take into account the WP_Error from the REST route response in gutenberg_filter_oembed_result to display the message above.

Example of WP_Error for wrong URL:

WP_Error Object
(
    [errors] => Array
        (
            [oembed_invalid_url] => Array
                (
                    [0] => Not Found
                )
        )
    [error_data] => Array
        (
            [oembed_invalid_url] => Array
                (
                    [status] => 404
                )
        )
)

Currently, Gutenberg returns this JSON for my invalid URL:

{
'html': '<a href="https://www.facebook.com/oohmyworld/vidos/2324195200940031/">https://www.facebook.com/oohmyworld/vidos/2324195200940031/</a>',
'provider_name': 'Embed Handler'
}

If Gutenberg doesn't return html entry, it could pass into this condition core-blocks/embed/index.js#L207 and display the appropriate message 😉

In fact, this behaviour could be applied for all services 😍

[danielbachhuber]

@7studio Do you want to open a pull request for the behavior you'd prefer?

[7studio]

@danielbachhuber Yes, I will ☺️ Thank you to take into account this issue.

[danielbachhuber]

Removing the REST API Interaction label because this doesn't need any changes from the REST API.

[notnownikki]

This was fixed by #10958 where we separated the preview and input components so that the logic isn't mixed.