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.

[jasmussen]

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.

The UI prototype isn't mobile optimized, though, and though this mockup needs more love, the toolbars are docked:

[ellatrix]

@jasmussen Where should the arrows be placed for the full bleed images?

[jasmussen]

Where should the arrows be placed for the full bleed images?

Let's actually try not showing them there. Or: it's fine they are off-screen. You can still move the block above one down, or the block below one up. If we find we really need those arrows on full bleed, then we can cross that bridge when we get there.

[mtias]

I think we would just move them to be above the edge of the image?

[folletto]

Another idea would be to keep them in position and just overlay them on top of the image when there's no more space. It shouldn't compromise anything as the image is going to be already large enough to provide a good target, even on mobile. And if we need to place other controls we can assume that space is reserved.

[ellatrix]

Another idea would be to keep them in position and just overlay them on top of the image when there's no more space.

We used to overlay images in core with controls but had to move away from that as we started using them for other objects, which can have their own controls inside the block (video/tweet links, buttons etc.) Not dismissing the idea, just something to keep in mind.

[mtias]

Not dismissing the idea, just something to keep in mind.

Yes, I think many blocks would require clarity of these controls, so I propose we just align them vertically with the controls. Depending on how the API shapes up to be, this is something a block could declare.

[folletto]

Yes I agree, if we want to standardize for other full width items might not be a wise choice. What about instead just leaving a small gap instead of going full bleed? With the arrows being now without the selector dropdown they take less space so it might work.

[jasmussen]

What about instead just leaving a small gap instead of going full bleed?

I'd think of this as a plan B. Full-bleed is kind of a bold look, and we want to convey that boldness in the UI too, and not "hold back". It isn't live preview, it's abstracted live preview, and it should probably give the same impression as when you see it on the site.

Matias' idea of simply moving the arrows up above seems like an easy first step to try.