Varia: Manually resized image become centred align on front of site

[iamtakashi]

Originally reported here: Automattic/wp-calypso#36026 (comment)

Image is left aligned if you don't set the alignment both in the editor and on the front of the site.

But if we manually resize the image, it becomes centre aligned, because the width of the figure becomes the size of the image.

We'll need to exclude this from the rue that adds auto margins to the sides.

.entry-content > *:not(... {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

[Copons]

Just copying the gif I've posted in the other PR that could make it clearer of what's happening:

[allancole]

This seems somewhat related to #1414. We can probably fix both in one PR.

[iamtakashi]

I looked into this issue, but it's trickier than I thought.

Image block changes the display behaviour of a resized image to table which changes the width of the block.

[iamtakashi]

Image block changes the display behaviour of a resized image to table which changes the width of the block.

This approach has been in question before: WordPress/gutenberg#13684 In my opinion, this makes difficult to work with.

I'm not sure what we can do about it. @allancole any thought?

[allancole]

@iamtakashi Yeah, I think we may need to punt this one, unfortunately. Based on the comment here, any fix we apply in Varia will likely conflict with the true fix which needs to happen in core first.

[iamtakashi]

@allancole But the disparity in alignment between the editor and the front-end concerns me.

I wonder if Varia should make images centred align as default until a user specifies alignment for it. The position of the caption suggests that as well.