Floating an image next to paragraph not intuitive

[emailprotwk]

My testing goal was to add an image and float it next to a paragraph. I added a paragraph first, but found there is no tool to add an image to the left or right of the image.

I was told to add the image first, float it. Then to add the paragraph, which automatically floated the paragraph.

Also, I don't understand the box around the image. Is this margin or padding? How do we edit it?

[ammist]

To add to this:

I tried the following:

1. Add an image. This caused the image to fill up the space. I added a caption below.
2. I added a paragraph below the image.
3. I wanted to make the image smaller than full-width, so I resized the image inside the image block.
4. The caption continued to take up the full amount of space, the grey border remained around the image.
5. I click "float left" on the image. The block did not float. See screenshot.

Skipping step 3 allows the image to flow next to the paragraph.

[ellatrix]

Looks like this is a styling issue. The caption should not be wider than the image.

[ammist]

@iseulde Would you fix the styling by adding a max-width inline style to the "figure" container? If you take a look at the linked ticket (#2555) I've pasted the HTML code that's generated by the caption both in the Gutenberg editor and in the HTML for the front-end. After looking at the code I think I could do this (good first task!) but I'm not sure what the conventions are supposed to be for setting hard-coded widths (for things other than images)

[ammist]

It looks like this might be fixed in #2682. Will test again w/ @emailprotwk when that gets wrapped into a release.

[mtias]

Closing as fixed.