Block Mover: Try cleaning up the control UI

[richtabor]

Is your feature request related to a problem? Please describe.
Just a thought experiment, but perhaps the current block mover controls could use some tidying up to fit in well with the updated selected block UI. When a block is selected, the controls could appear as such:

[pablohoneyhoney]

What if we don't have arrows all together?
Have you looked at inspirational examples outside of WordPress? What interesting paradigms have you seen?

[chrisvanpatten]

I love this UI — it looks very clean and nicely integrated!

I also want to flag #10063, #11725, and #7646 as having some mover-related issues, and alternate explorations.

[chrisvanpatten]

What if we don't have arrows all together?

For accessibility reasons, I believe visible arrows, which can be accessed via keyboard nav, are necessary.

[kjellr]

This feels very refreshing. I really like the way this more clearly associates the drag handles with the block they're controlling.

I built a quick, horrendously messy local PR to try this out. Here's a quick GIF of this in action:

A couple quick thoughts:

• This makes the mover controls way more prominent. In the case of the drag control, I think that might be a good thing — many users have tried dragging these blocks around, so it could make sense to make that drag control more visible (at least until we can figure out a way to allow people to reorder by dragging anywhere on a block). But on the other hand, the darker color makes the movers seem more important than the toolbar items, which may not be quite right.
• The placement seems a little at odds with the breadcrumb. (But depending on the outcome of Try removing block breadcrumbs #16506, that may not be a concern.

[chrisvanpatten]

I like that a lot. Wow. Such a great improvement!

I do agree about the dark color on selection. what if the movers stayed light gray and just had the dark gray applied as a border around the movers (the whole group, not a border per button)

[marekhrabe]

I love the new style! I agree it might be too loud but I think it's good direction to explore more

[mapk]

I'm in agreement here. This new design looks amazing! The older mover controls always felt a bit clunky for me. I think this might be good to explore in a PR now.

[kjellr]

👍 Sounds good — I can try this one.

[kjellr]

Just wanted to toss out a couple other explorations (both of which have already been tried in the past, I believe), just to get some more ideas flowing. The general issue here — the "floating" quality of the arrows — would be good to solve, but I'm not sure the heavy treatment above is the best way to do it.

Single floating container:

Rounded floating container:

Once we figure out a way to click + drag an entire block, we can remove the mover control, which will be nice too.

[chrisvanpatten]

I had tried something like the rounded rectangle mockup you posted, and really loved it, but ended up putting the PR on the backburner due to other stuff going on. I totally think it's worth revisiting though; I think it looks awesome. Much better than the current look, and will likely adapt better to different editor themes/contexts.

[mapk]

I like the "Single Floating Container" better in these last two mockups. I wonder if the border should mimic the weight/color of the border for the block toolbar? Riffing off of @kjellr's mockups, here's another one:

[kjellr]

I wonder if the border should mimic the weight/color of the border for the block toolbar?

While I think the lightness of that feels really nice compared to the dark treatment originally proposed in this thread, this does resurrect a lingering concern I've had with the placement of these attached-containers in general: Having two blocky shapes touch corners like that draws the eye to somewhere it doesn't need to be:

When corners conflict like that, our eyes are naturally drawn to the point of intersection, which isn't necessarily the most important thing to see. We'd rather you focus on the action icons icons, not the relationship between the shapes created by their containers.

[mapk]

Good point, @kjellr, intersections like this do pull the eye. However, I do like how it extended the top block border horizontally beyond the thicker left border.

Ultimately, this exercise highlighted the initial design pattern of this issue which I hadn't realized was a big part of what I liked – the mover controls are attached to the block. This connection really anchored these controls in a good way for me.

After some iterations, I tried aligning it to the top of the block content area.

[kjellr]

Just noting that I explored a pill-shaped container for these controls over in #17216.

It seems a little more consistent than what we have now. It's definitely more prominent, but it's less prominent than the dark gray movers proposed initially. I'm also a little curious about showing these movers by default on selected blocks.

Please give that PR a spin and leave notes in the PR!

[richtabor]

This looks great @kjellr! I'm with you - the attachment to the block gives the controls relativity with the block they move.

[kjellr]

After some iterations, I tried aligning it to the top of the block content area.

I opened #17234 to give this a try. In practice, I wasn't able to actually have it align with the content area, since this needs to work on really short blocks too:

(I still have to clean that up in general. 🙂)

[kjellr]

Closing this since #17216 has been merged. 👍