Reconsider the UX impact of up/down arrows on meta boxes

[johnbillion]

In #39074 an accessibility problem was fixed whereby it was not possible to reorder meta boxes using only the keyboard. This is an important fix because it allows a keyboard-only user to reorder boxes in order to improve the tab order of these boxes.

Unfortunately this created a side-effect where it's now easy to accidentally reorder a meta box by clicking on one of the up/down arrows, whereas previously you had to drag the meta box to another position to reorder it.

There are a few UX issues related to this on the post editing screen:

• Accidentally clicking the "up" arrow on the topmost sidebar meta box will cause it to move below the main post editing panel, which makes it easy to miss as it will commonly move well below the fold. I've just been dealing with reports from two separate users who did this and were unable to find the meta box.
• Clicking anywhere on the meta box title expands/collapses it, but now there is also an up/down button that causes it to move position instead, in addition to the dedicated expand/collapse button. Users who are used to clicking the title now have to be careful where they click.
• It's not possible to move block editor meta boxes (which are React components). This causes a significant visual discrepancy between "classic" meta boxes and block editor meta boxes, and causes especially strange behaviour when a user moves a meta box "up" and it doesn't actually move up to within the block editor meta boxes.

"Classic" meta boxes aren't going away any time soon, so I think the last point is an important one.

[afercia]

Related: #51284.

[SergeyBiryukov]

Related: #50699. The latest patch there aims to only show the UI for reordering meta boxes when the Screen Options tab is open. Looks like that would solve the first two issues?

[poena]

Why are people accidently reordering? Are they trying to collapse the section? - Can this be avoided by moving the icons further away from the collapse icon?

[joedolson]

Added comments to #50699 about the accessibility team's thoughts on how that should move forward; hopefully that ticket would resolve part of this ticket's concerns.

The others are trickier. Moving metaboxes between columns is complicated; the linearized order is predictable, but can be unexpected if you don't know how this works. It should be learnable, however.

The alternative would be adding even more mover buttons to move left and right between columns; I'm not sure that extra UX burden is worth the cost vs. learning the movement process.

The behavior within Gutenberg is pretty strange. I could move a metabox *out* of the Gutenberg sidebar using the mover buttons, but I couldn't move it back in. That needs some adjustment - the buttons should probably only allow movement within current container in Gutenberg unless they can move both directions.

[abrain]

Replying to johnbillion:

• Accidentally clicking the "up" arrow on the topmost sidebar meta box will cause it to move below the main post editing panel, which makes it easy to miss as it will commonly move well below the fold. I've just been dealing with reports from two separate users who did this and were unable to find the meta box.

I have the opposite problem, that users move the meta box from below the content editor into the sidebar and wonder where it went. When I sent them instructions on how to move the meta box back, they said it would not work.

Turns out: In the Block Editor you have to click the "up" button on the topmost sidebar meta box to move it below the content editor, in the Classic Editor you have to click the "down" button on the bottommost meta box in the sidebar.

[sarahricker]

Re #1: "Accidentally clicking the "up" arrow on the topmost sidebar meta box will cause it to move below the main post editing panel, which makes it easy to miss as it will commonly move well below the fold. I've just been dealing with reports from two separate users who did this and were unable to find the meta box."

I'm not able to replicate that, can you confirm if that is still an issue, @johnbillion?

@hedgefield - Noting that there is some overlap with https://core.trac.wordpress.org/ticket/51419 and https://core.trac.wordpress.org/ticket/50699. These issues need some input from design before we can move forward.

Main items remaining to be resolved:
1 - Should Gutenberg sidebar metaboxes be re-orderable?
2 - What icon should be used to open vs re-order (would be best if the were the same in both spots)
3 - Should drag n'drop of metaboxes below content be limited to to that area? (I was not able to move them to the sidebar myself, but their there was some UI issues that made if feel like I could).

[sarahricker]

Punting this from 5.7 to future release, as it is rather unlikely to be resolved before Beta 1.

[johnbillion]

Replying to sarahricker:

I'm not able to replicate that, can you confirm if that is still an issue, @johnbillion?

Yes it's still an issue, but it appears you need at least one side meta box and one advanced meta box registered for it to happen. Example code:

add_action( 'add_meta_boxes', function() {
	add_meta_box(
		'test-side',
		'Side',
		function() {
			echo 'I am on the side';
		},
		'post',
		'side'
	);
	add_meta_box(
		'test-advanced',
		'Bottom',
		function() {
			echo 'I am at the bottom';
		},
		'post',
		'advanced'
	);
} );

[hedgefield]

Do you have an example of a plugin that has legacy metaboxes? I don't have any on my sites so I've never seen the mover arrows in the block editor.

For the classic editor, it sure is a problem. The metabox title bar now has so many affordances, I think we need to streamline that a little bit.

I like what @joedolson suggests in #50699, to be able to toggle the mover arrows on and off in Screen Options. This should also disable drag and drop. But the arrows should indeed be there initially for discoverability.

Let's only show the drop areas when the Screen Options are open, or when you start to drag a metabox.

Let's not also add sideways arrows. Instead, can we focus on the metabox you're moving the same way as we do with blocks that you move in the block editor? Then you'll always be able to see where it ended up.

Then, I think we need to bin being able to click on the title to collapse while the movers are enabled. There's a dedicated UI button for it, if we want to limit accidental clicks, this makes the most sense to me. That frees up the title area to only accomodate the drag and drop affordance. When move and drag are disabled, the only possible action is collapse/expand, so then I'm fine with it.

[azaozz]

Replying to hedgefield:

I like what @joedolson suggests in #50699, to be able to toggle the mover arrows on and off in Screen Options. This should also disable drag and drop.

This was actually the purpose of the patch at #50699: to make arranging/dragging of parts of the screen a Screen Option (as it should have been from the beginning). Unfortunately it got stalled as it seems the Screen Options tab needs some UI and UX improvements/enhancements, and by some (seemingly misunderstood) negative feedback.

I agree with @johnbillion that having all these controls at all the places all the time is too much and seems quite unhelpful. The functionality being implemented is non-essential. Similar but more important functionality (selecting which post boxes are shown on the screen) is implemented in a very different manner which makes this pretty confusing.