Button Update Doesn't Make Centering and Moving of Block Obvious/Intuitive

[NewYorkerLaura]

Hi All,

I love Gutenberg! I create content in it every day for upwards of 30 unique sites.

The button update:

LOVE that I can do side-by-side

HATE that it's not UX friendly in terms of innate functionality being obvious and present (moving up and down/centering) when you click the plus button. See short video of me replicating multiple frustrated clients who asked for help this week and ME (been using WordPress since 2006) who took three days to figure out what was going on!

https://trainingvideoslaura.s3.amazonaws.com/zoom_0.mp4

[0aveRyan]

I've reviewed the video above and will try to summarize the report so it can be actionable.

With the Buttons Block added in #17352, Block Alignments and the Block Mover are now in the parent block and the experience to users is those options have disappeared or grayed-out.

For users accustomed to inserting Button Blocks (singular), it's extremely easy to miss that the single button is an inner block in a Buttons Block (plural) and wonder where those controls went. There are only two visual cues that communicate this departure that are easy to miss:

1. the s in Buttons upon insertion
2. the block breadcrumbs in the bottom toolbar.

I realize this parent-and-inner block relationship is a design problem that's been iterated on a few times and is by no means a simple problem. That said, with full-site editing on the horizon with many nested relationships, I think it's worth revisiting the problem to see what else can be done to communicate hierarchies to users for Buttons/Button, Columns/Column, Social Links/Social Link and some of the other blocks with this UX challenge.

None of these are the one magic solution, but a few ideas that aren't block borders...

Emphasize selection relationship in Block Breadcrumbs

Use Block Sidebar to emphasize relationship (low-fidelity mocks)

Add "Select Parent Block" to Block Menu on Inner Blocks (or some other way on the toolbar)

Provide inverse plus icon treatment for inner blocks so plus icons in inner blocks are more clearly distinct (unmocked below, but perhaps outline instead of fill treatment)

Highlight Block Navigation whenever Inner Blocks are Selected

[paaljoachim]

@NewYorkerLaura We do not have access to the video. Could you make it so we can access it again?

@0aveRyan Thanks for the feedback!
This is something we need to look closer at.

[NewYorkerLaura]

@paaljoachim Looks like the video got deleted when I was doing some cleanup in my AWS buckets. Here's a new link https://trainingvideoslaura.s3.amazonaws.com/button+issue.mp4

[paaljoachim]

Hey Laura. Can you also edit your initial post with the correct link? That would be helpful. Thanks.

[paaljoachim]

Changes have happened since this issue was created. An example is that we now have a parent icon show up to the left of the Block toolbar when there are inner blocks present. This is what it now looks like for the Buttons block.

Clicking the left icon brings one up to the parent - Buttons block.

Parent-icon-Buttons-block.mp4

I do believe that the various issues might have been taken care of. I will go ahead and close this issue. I can always reopen if I made a mistake. But any additional actionable item could perhaps be made into a new issue. Thanks.