Buttons block: justification setting ignored when the block is selected

[chthonic-ds]

Description

Setting alignment for a button does not update its position until it loses focus.

Step-by-step reproduction instructions

1. Add a Buttons block with a single button.
2. Change the alignment to "Justify items centre" or "Justify items right".
3. The button will not assume the alignment until focus is removed.

Expected behaviour

The button will respond to a new alignment immediately.

Actual behaviour

The button alignment does not update until it loses focus. This also occurs when a button receives focus again.

Screenshots or screen recording (optional)

WordPress 5.7.2: alignment updates immediately

WordPress 5.8-beta3: alignment does not update immediately

Code snippet (optional)

It looks like the right margin being set to auto for the block appender is the cause? A child of a flexbox element will be pushed in the opposite direction to the side its auto margin is applied. A block appender is injected as a new child of the flexbox element when a button receives focus, causing the contents of the Buttons block to be pushed to the left.

.block-editor-block-list__block .block-list-appender {
    align-self: center;
    padding: 0;
    list-style: none;
    margin: 0 auto 0 0;
}

WordPress information

• WordPress version: 5.8-beta3
• Gutenberg version: Tested with 11.0.0 but also happens with Gutenberg deactivated.
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? Twenty Twenty-One and TT1 Blocks

Device information

• Device: Desktop
• Operating system: Windows 10
• Browser: Chrome 91.0.4472.124

[talldan]

Thanks, I'll just change a couple of things about the title to make it clearer if that's ok.

I believe it's too late for 5.8 now, but I've added to the 5.8 project with the hope it can be fixed for 5.8.1

[richtabor]

Came here to report this as well 💪