Customizer Widgets: Make editor top bar visible on scroll

[critterverse]

Hi all, re-sharing an idea that came up in #30720 (comment) around the scrolling behavior for the editor "top bar."

I'm wondering if the top bar should act as a sticky element on scroll — meaning the Customizer navigation area could scroll as normal and disappear out of view, while the editor top bar could lock into position directly underneath the Customizer top bar. This can help maximize space in the canvas area while keeping important actions visible.

In order to achieve this affect, I think we could try treating the editor top bar more like its own proper bar/section (right now it's more like a part of the canvas).

For added clarity, these are the different sections I'm referencing:

Scrolled:

editor-top-bar.mov

Figma file is here :)

[critterverse]

Closing this issue for now as there are several ongoing conversations about adding functionality to the top area of this Customizer screen #30886 and #30720. No need to make this area more complicated while things are still being figured out!

[noisysocks]

I saw that @talldan was working in this area so assigning him and moving to In Progress. Feel free to move it around if that's not right 🙂

[talldan]

I tried to implement the sticky aspect of the top bar as part of #31589, but it's complicated because the floating block toolbar anchors itself to the top of the scroll container when scrolling down. This implicit behavior caused it to sit underneath the top bar.

There were some potential solutions with trade offs:

• use the fixed toolbar only in the customizer editor.
• add an experimental offset prop to the BlockTools component.

But there might be better options, it needs more investigation.

[critterverse]

it's complicated because the floating block toolbar anchors itself to the top of the scroll container when scrolling down. This implicit behavior caused it to sit underneath the top bar.

I can see what you mean @talldan. Due to a similar issue, I think we should also the remove the reappear-on-reverse-scroll that is currently applied to the Customizer description container (where it says "Footer" with the back arrow):

customizer-toolbar-scroll.mov

^ Even when the fixed toolbar option is turned on, there are some issues with reshowing that container area on reverse scroll (it causes the fixed toolbar to lose stickiness and get knocked back into its default position at the top of the editor when scrolling from bottom to top). So either way, removing it seems like a step in the right direction.