Problem with Media &Text Block

[AndrewMLeonard]

Describe the bug
https://ebps.org.uk/adiantum-and-its-colours/
I created a Text & Media block and then duplicated it. I added a link to the image in the first block
The only difference between them is that one has a link and the other does not
You can see what happenned if you follow the link (above)
I have 2014 theme (with child)

Desktop (please complete the following information):

• Windows 10 64 bit
• Chrome or Edge
• Version 80.0.3987.163 (Official Build) (64-bit)

[johnbillion]

Please provide screenshots and more information so people don't need to refer to your website each time, and so the information remains available if you fix your website.

[AndrewMLeonard]

In response to Johnbillion:
The page is a test page and can stay as long as you like
I imagined someone clever than me might want to use the inspector on the page to work out what was going wrong
Anyway, I include a screen shot
Here, I repeat my description of the problem
I created the top Text &Media block and the duplicated it so there were 2 identical blocks
I added a link to the "Media File" in the first block and youy can see the result below

[marcnajera]

I've come across what I believe it's the same bug: seeing a cropped and an uncropped image in the Media & Text block. I've tried it in the Genesis and TwentyTwenty themes with the exact same results.

This happens when these 3 conditions are met:

1. The Media & Text block has "Crop image to fill entire column" enabled
2. The image has a link
3. The "text" or content is taller than the image

This effect is easier to see if the block is set to "normal" width instead of wide or full width.

Content smaller than media:

Content slightly bigger than media (the second image starts to reveal at the bottom of the media side):

Content way bigger than the media:

[AndrewMLeonard]

Yes
Have a look here:
https://wordpress.org/support/topic/media-text-block/#post-12664625
and here
https://core.trac.wordpress.org/ticket/49890
I am new to trying to trying to post issues to Github and WordPress Core
As you can see Jarret posted the "issue" for me
Feel free to add you comments
I think your description above is better than my attempt
I was confused by the strange white lines but these were caused by CSS I added to my Child Theme
They did not cause any problem until I tried the block editor...
I hope this helps

[seindal]

While this is probably not the right solution, at least it provides a simple non-invasive work-around.

The problem is that the cropped image is a background, while the link adds the same image un-cropped on top.

Adding this to your CSS will resolve the issue:

.wp-block-media-text .wp-block-media-text__media > a > img { opacity: 0; width: 100%; height: 100%; }

It will take the linked image, render it invisible and stretch it to cover the entire available area. That way the cropped image below shows, but the top opaque image remains clickable across the same area.

[AndrewMLeonard]

I do appreciate you are trying to help
I added your code to sytyle.css of my child theme and you can see the results here:
https://ebps.org.uk/adiantum-and-its-colours/
The first image has disapeared but the link still works
Your CSS does seem to have fixed the other images

[seindal]

Change the CSS to this which will only activate if there's a cropped background image:

.wp-block-media-text .wp-block-media-text__media[style*="background-image:"] > a > img { opacity: 0; width: 100%; height: 100%; }

[AndrewMLeonard]

Well done!
It now works, even on my iphone
Thank you

[annezazu]

I was able to replicate this. As @marcnajera stated above, the following conditions need to be met:

• The Media & Text block has "Crop image to fill entire column" enabled
• The image has a link
• The "text" or content is taller than the image

In particular, it seems the presence of a link with the image seems to be causing the conflict as if you remove the link the image shows without a problem. Of note, this effect only shows when viewing the post on the front end. The editor doesn't show the problem:

I tested this with the following setup:

• WordPress 5.4.1
• Gutenberg 8.1.0
• Twenty Twenty theme

[bobbingwide]

I was working with @AndrewMLeonard today. We noted that the problem also occurs on Twenty Sixteen and Twenty Twenty.
The workaround in #21399 (comment) works for both of these themes.
Would it be possible to apply this fix in Gutenberg / core or does it have to be applied to every theme that is affected?

[bobbingwide]

Would it be possible to apply this fix in Gutenberg / core or does it have to be applied to every theme that is affected?

As a test I added the CSS to wp-includes\css\dist\block-library\style.css and the problem appeared to be resolved.

.wp-block-media-text .wp-block-media-text__media[style*="background-image:"] > a > img { 
opacity: 0; 
width: 100%; 
height: 100%; 
} 

Brief explanation

• This CSS targets the image which is in the link
• opacity: 0 makes it invisible
• 100% height and width makes the link fill the space