[Bug]: Site editor row block has excessive layout shifting

[jeyip]

Quick summary

There’s significant content shifting when we justify items in the row block (center, right, left, and space between) and select it. I tested the behavior with 1, 2 and 3 block children.

Steps to reproduce

1. Enable full site editing by activating the Gutenberg plugin and an FSE enabled theme (Ex. Quadrat)
2. Navigate to the site editor
3. Add a row block
4. Add two items into the row block
5. Open the row block settings sidebar
6. Change the content justification to space between
7. Unselect the row block
8. Reselect it and verify that the content jumps

What you expected to happen

I would expect no layout shifting when selecting a row block with content

What actually happened

There was layout shifting when selecting a row block with content

Browser

Google Chrome/Chromium

Simple/Atomic

Reproduced on simple sites

Reproducibility

Consistent

[mtias]

This should be addressed in gutenberg trunk. Can you check?

[jeyip]

@mtias Those we’re my exact thoughts as well, and I did check in my core Gutenberg dev environment before drafting this issue. I was only able to reproduce the problem on dotcom.

Hopefully the fix is already in core Gutenberg, and it’s simply a matter of waiting for a future Gutenberg release on dotcom to resolve everything 🤞

[jeyip]

I did some css debugging. The reason we only see it on Dotcom is because a fix was merged into core Gutenberg a week ago.

It doesn’t look like the fix made it into Gutenberg v12, but it should be resolved by v13.

[mtias]

Yes, it should come with 12.1.

[jeyip]

Solved with the release of 12.1 on simple sites