Embed: Image is stripped from pasted Flickr embed code

[rachelmcr]

Describe the bug

When pasting Flickr embed code in a paragraph block, the image tag is stripped out of the block.

This is a regression in the Gutenberg 6.6.0 beta. The embed code works as expected in the release version of Gutenberg in WordPress 5.2.3.

To reproduce Steps to reproduce the behavior:

1. Enable the Gutenberg plugin on a WordPress site (to get the 6.6.0 beta of Gutenberg).
2. Copy the Flickr embed code from a Flickr image (or use the example code shared below).
3. Create a new Gutenberg post.
4. Click in to the default paragraph block and paste the embed code.
5. Switch to HTML editing mode and view the resulting code (only a link tag, no image).

Here's an example Flickr image: https://www.flickr.com/photos/mobilene/48726201381/in/dateposted/

And the console output for that embed:

Received plain text:

 <a data-flickr-embed="true" href="https://www.flickr.com/photos/mobilene/48726201381/in/dateposted/" title="Pay parking"><img src="https://live.staticflickr.com/65535/48726201381_eb5f5a0f18_h.jpg" width="1545" height="1024" alt="Pay parking"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

Processed inline HTML:

 <a href="https://www.flickr.com/photos/mobilene/48726201381/in/dateposted/"></a>

Expected behavior I expect the embed code to be processed such that I'm left with an embedded image linked to Flickr.

This is the expected console output (observed without the Gutenberg plugin enabled):

Received plain text:

 <a data-flickr-embed="true" href="https://www.flickr.com/photos/mobilene/48726201381/in/dateposted/" title="Pay parking"><img src="https://live.staticflickr.com/65535/48726201381_eb5f5a0f18_h.jpg" width="1545" height="1024" alt="Pay parking"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

Processed HTML piece:

 <figure><a href="https://www.flickr.com/photos/mobilene/48726201381/in/dateposted/"><img src="https://live.staticflickr.com/65535/48726201381_eb5f5a0f18_h.jpg" alt="Pay parking"></a></figure>

Desktop (please complete the following information):

• OS: macOS 10.15
• Browser: Chrome
• Version: 77.0.3865.120

Additional context Hat tip to Jim Grey for describing the issue, leading to this report.

[ellatrix]

It looks like the pasted content is considered "inline" and later the image is stripped.

• If the pasted content is just an image, it should not be considered inline.
• Images should not be stripped from inline content.

[Galois44]

Hat tip to Jim Grey for describing the issue, leading to this report.

Hi, all. The same issue occurs on my site running on Windows 10.

Greetings.

[slywy]

Hat tip to Jim Grey for describing the issue, leading to this report.

Hi, all. The same issue occurs on my site running on Windows 10.

Greetings.

I have the same issue on my site, hosted by ProHosting, although I can't recall when it began. I am hoping this gets resolved or easier as I use a lot of photos from Flickr.

[mikeselander]

I ran into this recently on a site and it appears to not limited to Flickr, but instead is any image within a link tag.

We are currently on WP 5.2.4.

For example, the following text will result in the link being retained and the image stripped: <a href="https://live.staticflickr.com/65535/50062868321_873075c0ed_o.png"><img src="https://live.staticflickr.com/65535/50062868321_8bf3a6fecc_h.jpg"></a> results in

<!-- wp:paragraph -->
<p><a href="https://live.staticflickr.com/65535/50062868321_873075c0ed_o.png"></a></p>
<!-- /wp:paragraph -->

Whereas pasting in the image pasted in itself is handled correctly: <img src="https://live.staticflickr.com/65535/50062868321_8bf3a6fecc_h.jpg"> results in:

<!-- wp:paragraph -->
<p class=""><img src="https://live.staticflickr.com/65535/50062868321_8bf3a6fecc_h.jpg"></p>
<!-- /wp:paragraph -->

Did another experiment with breaking the HTML with soft line breaks and it strips the link completely:

<a href="https://live.staticflickr.com/65535/50062868321_873075c0ed_o.png">
<img src="https://live.staticflickr.com/65535/50062868321_8bf3a6fecc_h.jpg">
</a>

turns into:

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://live.staticflickr.com/65535/50062868321_8bf3a6fecc_h.jpg" alt=""/></figure>
<!-- /wp:image -->

Given the timing of the first report here, I would guess (still need to dig further to verify) that https://github.com/WordPress/gutenberg/pull/17140/files may be the culprit.

[gwwar]

I can still reproduce the issue. For next steps I think we'll want to investigate if this is a more general issue. A unit test for the paste handler might make sense.

https://user-images.githubusercontent.com/1270189/115773080-bc87b700-a364-11eb-968a-4d142ef94f4d.mp4