Blocks in Customizer: Block toolbar positioning

[mapk]

Current problem

Blocks in the Customizer show the block toolbar still attached to the block itself. This causes some difficulty selecting items in the toolbar that are beyond the width of the Customizer.

Proposed solution

In the past, I've suggested that we use the mobile web view in the Customizer – the block toolbar should stick to the top. I'm still promoting this here, but @draganescu pointed out the Customizer is narrower than most phones. This means we'll need to accommodate this narrow width when we have long block toolbars.

Mockup

Prototype

[paaljoachim]

As I began reading the issue my first thought was to add as you mentioned a sticky toolbar (similar to mobile).
Showing parts of the last icon gives a hint that there is more to be seen, that one will need to use the keyboard to move to the right/left, or the cursor and move the toolbar.

Another thought that come up is.... what if we split the toolbar in two parts. Having a top and bottom sticky toolbar.
The following does not look nice but it is meant as a visual idea.

Another idea.... well this is supplementary, would be to make the Customizer sidebar resizable, so the user can make the area wider and be able to see the full toolbar.

I'll add on to this comment when/if other ideas come up.

[annezazu]

In light of closing out #25155 I want to note that in designing this next version for the toolbar, it's necessary to think about the "three dot" menu option as right now that opens as a transparent menu.

[draganescu]

Apparently this has been fixed recently as now in master the toolbar is fixed to top but:

• it scrolls with the sidebar and it's supposed to stick to the top
• on desktop at least, one can't scroll it to see all the buttons

[adamziel]

Blocked by #25625

[noisysocks]

Closing this as we will be completely rearchitecting our implementation of how blocks work in the Customiser. Also worth noting that this specific design detail came up in #26900.