Image block: Resized image with no defined alignment appears centered in the editor instead of left-aligned (WP 5.5 beta2)

[dianeco]

Steps to reproduce

1. Inside the editor, add an image.
2. Resize it to a smaller size using the resize handles.
3. Observe that the image appears centered instead of left-aligned while it appears left-aligned on the front-end.

Tested using WordPress 5.5 beta 2 and WP 5.4.2 + Gutenberg 8.5.1.
Tried with Twenty Twenty & Twenty Seventeen.

[pagelab]

I can reproduce this on version 5.5-beta2-48491 with the default editor styles applied.

[annezazu]

Replicated with Gutenberg 8.6.1 & WordPress 5.5 RC.

[merapi]

@tellthemachines @annezazu The resized image should be centered in the output/FE, correct? (not left-aligned in the editor).

[annezazu]

Right now, seems like the solution is either:

1. When resizing an image, have it default to whatever the alignment is set to (this means defaulting to the left).
2. If it is naturally centered, make sure it's reflected on the front end.

Not quite sure what's intended here! Might need to bring in some designers.

[tellthemachines]

My understanding of the issue (which I was also able to reproduce) is that an image with no set alignment (defaulting to left-aligned) shouldn't change alignment when resized (it should stay left, in editor and front-end). Instead, what happens is the image suddenly appears center-aligned after resizing.

[merapi]

(this means defaulting to the left)
(defaulting to left-aligned)

@annezazu @tellthemachines

I think it's center by default (looking at the icon)?

Newly inserted image:

After resizing + left-aligned at the bottom:

[tellthemachines]

I think it's center by default (looking at the icon)?

That's the bug! It should be left-aligned by default after resizing. That's how it worked before 5.5.

[merapi]

Checked on 5.4, now I get it.
So just to sum up: we have this 6th option of alignment ("undefined" - when no option is selected, that aligns to the left of the text content and it's different than the left alignment from the options) that confusingly shows the center alignment icon when it's active. Don't we want to fix it? by either adding another alignment option (that will be active from the start) or making one of the current options a default one? (not the "undefined" one)

[talldan]

I've put together a fix - #26376.

Did some debugging, it isn't related to the alignment options. All the blocks that have alignments have that align center icon by default, but it doesn't mean that the actual alignment is center. Table and cover are other examples.

This is more of a CSS issue. The image block's wrapping figure tag, is styled as display: table; (a hack to make the caption center properly). display: table makes the wrapper collapse to the content size when the contents are smaller, rather than take up the full-width like it would if it were display: block.

At the same time all blocks have a margin: auto applied to their wrappers, which has the unwanted side-effect of centering the image:

gutenberg/packages/block-editor/src/components/block-list/style.scss

Lines 305 to 309 in 55bf7ec

	// Extra specificity needed to override default element margins like lists (ul).
	.block-editor-block-list__layout .wp-block {
	margin-left: auto;
	margin-right: auto;
	}