Drop Cap causes text wrapping issues for images slightly smaller than viewing screen

[thehenrybyrd]

With an Image block that has been made smaller and right-aligned, it’s possible to add a Paragraph block to the left, imitating the Media & Text block. Text from the Paragraph then wraps around the Image.
However, this can really screw up drop caps if the image ratio matches the screen size poorly. This was brought up in a user interaction, where the text doesn't wrap properly (or rather the text does but the drop cap doesn't) when viewing the post from certain mobile devices.

To reproduce:

1. Create a new post using Gutenberg, or use an existing post.
2. Add an Image block, and resize the image so it’s about half the width or less of a normal block. For best results, make the image slightly less wide than the screen of your mobile device (or one you'll check in inspect element). I made this image 344x281 px and viewed it via inspect element with the Pixel 2 profile, 411x&731.
3. Right-align the Image block.
4. Click below the Image block, in an attempt to add a new block.
5. See a new Paragraph block appear to the left of the small Image block. Add some text, and use a Drop Cap.

Here’s what that looks like:


The text wraps around the image nicely in desktop web browser:

However, when viewed in mobile, if the image is just a bit smaller than the viewing screen, the text wraps but the drop cap remains below the image:

Reproduced on both WordPress.com and a vanilla WordPress install using WordPress 5.1.1.

[gziolo]

Related issues: #12468, #12298, #10832.

[gwwar]

Edit: Still seeing this. It is a little tricky to trigger without activating devtools.

dropcap.mp4

[paaljoachim]

Here is another variant.

Dropcap-movies-below-image-left-on-smaller-screens.mp4

[Anuj-Rathore24]

Hey @thehenrybyrd

This issue has been resolved, and we can close it!
Reference PR - #12177