Modern Image Formats picture support breaks gallery block cropping

[joemcgill]

Bug Description

When using the new Modern Image Formats picture element support on my personal site, I noticed that the markup conflicted with the style for an image gallery created using the wp:gallery block when the "Crop images to fit" setting was enabled for the block.

I've left the feature enabled on my site for now so the behavior can be observed.

Steps to reproduce

1. Activate the Modern Image Formats plugin and enable picture support from the Media Settings screen.
2. Create an image gallery using the core gallery block that includes images with different aspect ratios
3. Turn on the "Crop images to fit" setting on the Gallery block settings panel (screenshot below)
4. Preview the page in the front end

Screenshots

Screenshot of the settings panel

Before using picture

With picture support enabled

[adamsilverstein]

@joemcgill thanks for the bug report (and ouch that first photo!). This is likely due to a CSS selector that isn't applying correctly. We will either need to change the specificity to make it work, or add an additional selector for the picture element version.

[joemcgill]

No problem, and sorry for my face. I've recovered! I assumed there was a CSS issue but haven't dug into it. Wanted to report it while it was top of mind.

[devansh016]

Would like to work on this issue. Can you assign me this?

Adding the following css to picture tag should solve this issue.

style="display: contents;"

@joemcgill @adamsilverstein