Remove image float max-width

[jasmussen]

In the editor, we apply a max-width to images that are floated and not resized. We do this because otherwise on big images you probably wouldn't see the image float at all.

The line of code that is removed in this PR, prevents this from also happening on the frontend.

The reason is — in WordPress, the .alignleft and .alignright classes have traditionally been handled by the WordPress theme. By adding an inline style, not only are we overriding that, but we are also making it even harder for a theme to override. Inline styles take precendence over any other CSS style that is not !important.

[youknowriad]

IMO we should avoid this in the editor as have some visual feedback regardless of the size of the image.

[jasmussen]

IMO we should avoid this in the editor as have some visual feedback regardless of the size of the image.

I.e. remove the max-width entirely? I'd be open to that.

[ellatrix]

This was specifically added in #4356. Let's be careful to keep that original issue fixed too.

[jasmussen]

This PR adds a width to the image on the front-end if the image is aligned but not resized. Currently we set a width of 370px in the Gutenberg editor, but we don't set anything on the front-end, so it doesn't feel like the image is aligned at all.

This is the original issue, correct?

That's a good point. And this makes me think we should go with Riads suggestion, remove the max width from inside the editor as well.

The biggest reason for doing this is that inline styles are impossible to override without !important, which is bad form. Given that floats are traditionally handled by the theme, this is likely to cause a bunch of side-effects unless we remove it.

[ellatrix]

The biggest reason for doing this is that inline styles are impossible to override without !important, which is bad form. Given that floats are traditionally handled by the theme, this is likely to cause a bunch of side-effects unless we remove it.

The idea was that a specific size was set, just like when the user resizes the image. When the user resizes the image, there are also inline styles set. Removing them from both the editor and front-end may work.

[jasmussen]

The idea was that a specific size was set, just like when the user resizes the image. When the user resizes the image, there are also inline styles set. Removing them from both the editor and front-end may work.

Just so there's no doubt, the user-set style should remain as an inline style. I'm only referring to the arbitrary 370px style we set in Gutenberg.

[ellatrix]

Yes. :) The thought was that this would be just like user set sizing. I'm fine with removing that though, I'm just trying to justify the previous change. :)

[jasmussen]

Investigated this again today with a desire to fix it. However many blocks that have no intrinsic width, like Cover Image or Gallery, they need a max-width applied to them when floated because we can't resize them.

Add to that the sub-optimal float CSS we have in the editor, which is due for a refactor, and I've decided to postpone finishing this branch for now. Answers may present themselves as we refactor.

[ellatrix]

I'll think about it a bit too. Was playing around with a theme last night for fun.

[jasmussen]

This branch will be closed on #5142, as that refactor requires us to revisit max-widths the way we used to use them. The problem those widths solved will still be there, but it will require a different solution.