Block in Customizer: Moving blocks between widget areas

[mapk]

As stated in issue #27343, we'd like to explore ways for the user to move blocks/widgets between widget areas while in the Customizer.

keep the ability to move widgets from one widget area to another

This issue is created to collect the design explorations.

[mapk]

While keeping the block editor embedded in the sidebar of the Customizer, one exploration could include accordions for the widget areas.

Prototype

[mapk]

If we only show a single widget area at a time as proposed here: #23975, then maybe we can work in a control in the block's toolbar that enables moving the blocks to another widget area.

Mockup

[kevin940726]

I love this idea ❤️ (#27409 (comment))

One advantage of this over the work in #25434 is that now we don't have to split different widget areas into different block editors, which could be really complicated.

This is also more aligned to how the widget screen currently works. We could potentially even re-use the same code with some RWD tweaks.

I'll play with this idea more and see where it goes.

[mapk]

To keep this rolling, I'll prepare a prototype of the flow. But I imagine that once the user clicks the another widget area, the Customizer sidebar jumps to that new area while still focused on the selected block.

Also as we're moving forward, here's the SVG of the new icon.

<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <Path d="M19.75 9c0-1.257-.565-2.197-1.39-2.858-.797-.64-1.827-1.017-2.815-1.247-1.802-.42-3.703-.403-4.383-.396L11 4.5V6l.177-.001c.696-.006 2.416-.02 4.028.356.887.207 1.67.518 2.216.957.52.416.829.945.829 1.688 0 .592-.167.966-.407 1.23-.255.281-.656.508-1.236.674-1.19.34-2.82.346-4.607.346h-.077c-1.692 0-3.527 0-4.942.404-.732.209-1.424.545-1.935 1.108-.526.579-.796 1.33-.796 2.238 0 1.257.565 2.197 1.39 2.858.797.64 1.827 1.017 2.815 1.247 1.802.42 3.703.403 4.383.396L13 19.5h.714V22L18 18.5 13.714 15v3H13l-.177.001c-.696.006-2.416.02-4.028-.356-.887-.207-1.67-.518-2.216-.957-.52-.416-.829-.945-.829-1.688 0-.592.167-.966.407-1.23.255-.281.656-.508 1.237-.674 1.189-.34 2.819-.346 4.606-.346h.077c1.692 0 3.527 0 4.941-.404.732-.209 1.425-.545 1.936-1.108.526-.579.796-1.33.796-2.238z"/>
</SVG>