Icon + up/down arrows for aligned/full width objects

[ellatrix]

In the current prototype, if the image is aligned right, the controls show on the other side and don't feel connected. Showing them on the right side might also be a bit odd if the left side is the "main" side.

[aduth]

Perhaps if they were given a docked (floating) toolbar effect similar to the block controls, it wouldn't seem so odd? Excuse the rough example:

[folletto]

Interesting exploration... Maybe it could be a single bar, with a "head" that has arrows and icon, and the rest that has the options?

[ellatrix]

Yeah that was my initial thought, but then it will require more clicks I guess. Move caret to block, press the icon, then arrows.

[ellatrix]

[ellatrix]

That's with old WP toolbar design, sorry, but you get the idea.

[jasmussen]

Hah, was just about to post something in the vein of Ella's above:

I'm not quite ready to go there, though — when it's docked like that it doesn't feel like "hover UI", and if we show it this way only for floated images, it's a different design for the same features. So I'm showing this not as a suggestion, but rather to keep the ideas flowing, in hopes the right solution will present itself.

[mtias]

See #53.

I think we could try placing the controls to the right when floated right?

[ellatrix]

Yeah, this was also my initial idea, see above comment. The downside is that the left side acts more or less as the main side for controls, so it can be a bit odd/disorienting to see controls on the other side just for right aligned objects.

[jasmussen]

Seems like it's worth trying them on the right side, for right aligned images, as it feels like a super easy win. But let's keep this ticket open (and ideas flowing), because the problem will likely reappear for full-bleed images.

[folletto]

I agree on @iseulde's point on having a stable main side of controls, so I had an idea that might be a bit counter intuitive but might just work: we always keep the control on that side, even if it gets indented. No flipping sides, no overlaying, nothing. In the end the control that is about to move is going to be "highlighted" in some way, so might just be obvious enough.

[ellatrix]

I had two other thoughts on this:

• Add a line that somehow makes it clear where the control is positioned in the vertical flow of the document. Personally I don't like this that much, but putting it out here anyway.
• Have the arrows connected to the toolbar instead, as I've show in the mock-up, for all blocks. For aligned object blocks we don't really need the icon as the object is automatically selected (and has a toolbar) as soon as you click on it or move the caret to it. Non-object blocks cannot be aligned, so the icon is not an issue for these.

[mapk]

Have the arrows connected to the toolbar instead, as I've show in the mock-up, for all blocks.

This solution seems to work well. It would also work in relation to mobile where currently the block-switcher gets lost off-screen. Example of lost block-switcher below.

[mapk]

Perhaps if they were given a docked (floating) toolbar effect similar to the block controls

A floating element technically breaks out of the flow of markup, so maybe allowing the controls to break out of their normal state to match the element might be OK.