Probably unintentional alignment button appears on button block toolbar

[kurudrive]

Description

Hi there.
Thanks for Gutenberg team's effort.

Only when you place a new button will the button block toolbar display an unintended alignment UI.
It disappears when you enter any characters, so it's probably a bug.

Step-by-step reproduction instructions

1. Input /button on editor
2. select Buttons block and put on editor.
3. Click Button(Not Buttons) Block
4. I see the "justify item alignment" button, but I also see the "Change alignment" button
5. Input any characters.
6. The "Change alignment" button disappears.

Screenshots, screen recording, code snippet

gutenberg-button-align-toolbar-bug.mov

Environment info

• WordPress 5.9 only
• WordPress 5.9 with Gutenberg 12.4.1
• Theme : TT2
• Browser : Chrome
• Device : Mac OS 11.6

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[Trapsta]

@kurudrive Thanks for reporting, but I believe this is not a bug and is the intended behaviour. The children buttons' toolbar "absorbs" the relevant parents controls to make it easier and more intuitive to change the parent's attributes without constantly switching between parent and child. You can find more context in #26313

[talldan]

I think the confusing UI is an issue, even if it is intentional to show the parent block's controls. Most users wouldn't know which of the duplicate controls to use.

I'm also not sure why it disappears. 🤔

[mrfoxtalbot]

Thank you for reporting this @talldan. I can still reproduce what you described:

It is worth mentioning that the content of each button's dropdown is actually different:

Screen.Capture.on.2022-09-13.at.09-52-18.mp4

Thank your for mentioning #26313, @Trapsta.

The children buttons' toolbar "absorbs" the relevant parents controls to make it easier and more intuitive to change the parent's attributes without constantly switching between parent and child.

I am not sure this applies to this case, though. If you look at the parent buttons block, it only has one alignment button.

Additionally, as soon as the justification is changed on the parent buttons block, the second alignment button will disappear:

Aside from the above, I do not understand the goal of individual buttons showing width and alignment settings this way. I agree with @talldan that this can lead to a lot of confusion.

I the light of all the reasons above, I do think this is a bug. I am going to remove the Stale label and add the Bug one.

Thank you both!