Clicking Wide or Full alignment makes the Image block jump

[afercia]

Tested with Twenty Nineteen because it supports "Wide" or "Full" alignments.

When clicking the "Wide" or "Full" alignment buttons in an Image block, the image "jumps" a bit down, even though there's no apparent reason for the extra space to exist. Here's a GIF:

This seems to happen only on the Image block. Doesn't happen on other blocks that support wide and full alignment, e.g. Columns, Cover, Gallery.

As far as I can tell, the jump is caused by one single line of CSS: position: relative here:

gutenberg/packages/edit-post/src/components/visual-editor/style.scss

Lines 32 to 41 in b5a709f

	&[data-align="wide"] > .editor-block-list__block-edit > .editor-block-contextual-toolbar,
	&[data-align="full"] > .editor-block-list__block-edit > .editor-block-contextual-toolbar {
	width: calc(100% + #{ $block-padding * 2 + $border-width * 2 }); // Matches the negative margins applied to parent blocks.
	height: 0; // This collapses the container to an invisible element without margin.
	text-align: center;
	.editor-block-toolbar {
	max-width: $content-width;
	width: 100%;
	position: relative;

To my understanding, especially after #7365, the toolbar should be completely pulled out from the layout flow. That's the reason why it normally uses position: absolute.

However, with a wide or full alignment, it gets position: relative; so it still takes some space in the layout.

Pushing a PR to remove position: relative; would be trivial and in my testing it would fix the issue. However, I'm not sure if there are other reasons for position: relative;. /Cc @jasmussen

[jasmussen]

Thanks for a very solid ticket with even a suggested fix.

However that fix won't do it. When removing the position relative, this happens:

Due to the change we recently made to TwentyNineteen this wasn't easily discoverable, but as you ticketed yourself in WordPress/twentynineteen#665 that behavior might need a revisit. Basically we need the block movers to be available also for fullwide images.

I will see if I can find another fix.

[afercia]

Ah, I see, that's with Twenty Seventeen and the toolbar docked to the block left edge. Right.

[jasmussen]

Submitted fix in #12305.