Adding an image block after an image aligned to the side produces unexpected behavior

[LZL0]

Issue Overview

Adding an image block after an image aligned to the side produces unexpected behavior resulting in the misplacement of the second image and all other boxes after the second image.

Steps to Reproduce (for bugs)

1. Create an image block, align it to the left
2. Create another image block, leave it as is, don't apply an alignment
3. Try to create a rich text field

Tested with Chrome 67 and Opera 53 (Chrome 66).

Expected Behavior

The second image should be displayed properly (including the resize dots and "Write caption..." text) and the rich text block should be placed after the second image.

Current Behavior

The added (second) resize handlers and the "Write caption..." text is on the top in line with the first image, while the image is displayed below the first image block. If there meta boxes are present the second image will be displayed behind them. After adding a paragraph to the bottom of the post it will be then placed somewhere inside the second image.
Important: Interestingly, the problem will not occur until the secondary image is selected from the media gallery/uploaded.

Screenshots / Video

https://www.youtube.com/watch?v=bta1vBdC0cc
https://youtu.be/UmHcQpGXOtw

The same thing occurs if the second image block is set to "center."

[LZL0]

Found the possible source of the issue. When I get back I will add a pull request for it.

[danielbachhuber]

Thanks for the report, @LZL0.

#4127 is related. I believe the true source of the problem is that we don't know what our expected behavior is. Specifically, whether: 1) blocks should clear one another, or 2) it should be possible to align blocks around one another. We need to make this decision before we can identify the appropriate fix.

[LZL0]

I respectfully disagree. My apologies for not uploading a video explaining the issue.
This, of course, is just a possible solution to the issue.
https://youtu.be/JOobYdR1Ihs

[danielbachhuber]

I respectfully disagree.

Which part do you disagree with? The video you've uploaded doesn't appear to be playable.

[LZL0]

https://youtu.be/UmHcQpGXOtw

[danielbachhuber]

Ok. Here's what I see in your screencast:

Specifically, when an Image Block is inserted into the editor and then aligned to the left, any blocks inserted after it look all sorts of broken. Is this an accurate description of the issue you're experiencing?

If so, #4127 and #4010 are related because, conceptually, we need to decide whether blocks can be floated to the left or right of one another. My feeling is no, we'll clear floats after each block, and use nested blocks for a more grid-like experience.

[LZL0]

That's also a possible solution. It is a rare issue, but needs to be sorted.

[karmatosed]

It seems that #4127 and #4010 are where the focus for this should be, unless I am mistaken? I feel clearing floats makes sense and in this case with nesting and the adaptions that gives we're moving away from this as an issue. For now closing, but we can always reopen.