Image Block: alignment wrapping in the editor doesn't match the front-end view

[designsimply]

Steps to reproduce:

1. Add an image block.
2. Tap the gear icon to open image settings.
3. Tap the image size to select Thumbnail.
4. Close the BottomSheet.
5. Select left-alignment for the image.
6. Add a paragraph after the image.
7. Preview or publish the post and compare the view in the editor to the view of of the preview/front-end.

Result: left-aligned images in the block editor take up the full width of the editor instead of allowing text to wrap around it—this makes it so the preview or front-end view of the post looks a lot different compared to how the post looks in the editor.

^{Tested with WPiOS 14.3.0.0 TestFlight beta on iPhone 6S iOS 13.3.1.}

[mchowning]

:wave: @iamthomasbishop ! Do you have any thoughts on the desired behavior here?

[iamthomasbishop]

@mchowning I agree with @designsimply that ideally the user should be able to wrap a block around another, but I understand this might take some layout magic on the tech side.

Quick Notes

• I'm not sure if it's directly related to this, but on the web, you can add an "inline image" to most of the RichText blocks. It's very basic on the web with only one control for image width, so maybe it's time we consider adding that?
• Should we explore allowing the user to wrap text around the media in the Media & Text block? I think this was one of the main wishes for the Media & Text block originally, but afaik you can't achieve this to date. It could be a nice thing to try in a controlled environment.

Technical

I don't have much insight into the technical solution, but based on my admittedly rusty CSS knowledge, if we're using flex perhaps there is some way to apply a float to the image block and then a trailing clearing element? I understand like anything layout-related, it's likely that there are more complexities lurking beneath (such as z-indexing, where to apply selection borders, etc.) 😀 However, if we can get this right, it'll make the following design considerations more feasible.

Design Considerations

We have most of the things that we need — alignment controls and size controls are the most important. We might want to consider adding an image size button to the toolbar. If the technical constraint were solved, these controls alone would theoretically be enough to visualize the wrapping — albeit without any further layout customization (margins would be very nice to have, but I digress...). If you try this on the web (at least as of GB 7.7 trying on my self-hosted test site) you can float an image using the toolbar control, and it "works", but offers no layout customization and you can't easily select the image block because the paragraph block has a higher z-index than the image block (see video)

It'd also be great to be able to drag-to-resize images on the canvas. I believe our first venture into this will be an upcoming iteration of the Spacer block, but we haven't gotten there yet. I think this would be beneficial for the image block in general, but especially on this type of interaction.

A related note on a design constraint I would recommend we keep in mind — min-width for blocks so that they can be narrow but still have enough room to show the inline controls. We are considering a similar narrow-block situation on the Buttons block, where we are applying a min-width that is sufficient enough to house the movers and an ••• icon button (see diagram on this comment on the Buttons block PR) — not sure if that would apply globally (cc @lukewalczak).