Block toolbar position broken for full-wide blocks in some themes.

[kjellr]

This could end up being a Twenty Nineteen issue, but since it popped up recently (and nothing has changed in Twenty Nineteen), I figured I'd start here.

Lately, I've noticed that the block toolbar for full-aligned blocks appears cut off on mobile when using Twenty Nineteen:

There's also a bit of toolbar misplacement when editing the children of the cover image block on mobile:

There have been no recent updates to Twenty Nineteen's editor styles, so my guess is that this is due to a recent change in Gutenberg. It could theoretically be fixed by setting the .block-editor-block-contextual-toolbar position to left: 0 and right: 0 in Twenty Nineteen's editor styles, but this sort of editor UI adjustment doesn't seem like the sort of thing theme styles should mess with.

This exact issue does not appear in other themes, however a very similar issue appears if you view a full-wide image block in other Twenty- themes:

(Note, these themes do not declare full/wide block support, so to reproduce you need to create a full-aligned block in a different theme and then switch to these themes to view the error).

[m-e-h]

I've experienced something similar. Pretty sure it has to do with the method the theme uses to align it's blocks and a full-width block. I recently switched from doing a margin-left: calc(-50vw + 50%); kind of thing to using flexbox and the issue disappeared for me.

Actually, the toolbar is now centered on align-full blocks but it's better than it was. I'll try to take a deeper look sometime this week.

[m-e-h]

My similar issue above must've been something I did cause I can't seem to replicate it. 😕

The issue you're seeing @kjellr I'm able to replicate on any theme that supports the full width.

Here's an unmodified underscores theme at < 600px:

It could theoretically be fixed by setting the .block-editor-block-contextual-toolbar position to left: 0 and right: 0

That's exactly where I see the issue too.
This does get done at > 600px:

@media (min-width: 600px) {
	.block-editor-block-list__block .block-editor-block-contextual-toolbar {
		left: auto;
		right: auto;
	}
}

https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/block-list/style.scss#L917-L920

I'm not seeing where we ever need that -14px on the .block-editor-block-contextual-toolbar itself. At least not with [data-align="full"].
https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/block-list/style.scss#L833-L843

The 14px padding is already compensated for on the contextual-toolbar's parent div:

.block-editor-block-list__layout .block-editor-block-list__block[data-align="full"] > .block-editor-block-list__block-edit {
    margin-left: -14px;
    margin-right: -14px;
}

https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/block-list/style.scss#L470-L484

What a beast of a file that /block-list/style.scss is, btw. 👹

[kjellr]

The issue you're seeing @kjellr I'm able to replicate on any theme that supports the full width.

Ah yes, I'm seeing it everywhere now too. Opened #14669 as a potential fix. Thanks for the investigation, @m-e-h!