When dragging the resize handles, snap to wide / full widths

[jameskoster]

For blocks that have resize handles for width (e.g. Image), it would be nice if the block 'snapped' to predefined widths like wide and full. Perhaps the different widths could appear as guide lines?

Then as you approach a guide line, the width snaps to fill. If you pause for a moment, or as you near a particular snap point, a tooltip appears with the name of the snap point:

---

Issue updated Nov. 23.

Initial proposal

Second iteration:

Then as you approach a guide line, the width snaps to fill. I appreciate this is a bit awkward for wide and full widths as the layout will jump quite a bit, but it's hard to know just how impactful that will be without an interactive prototype (which I cannot make in Figma). Here's the closest approximation I can come up with:

If the above approach is too technically challenging, a smaller step could be to show snap-zones in a style similar to that of dropzones or the sibling inserter:

First iteration:

For blocks that have resize handles for width (e.g. Image), it would be nice if the block 'snapped' to predefined widths like wide and full.

If the above approach is too technically challenging, a smaller step could be to show snap-zones in a style similar to that of dropzones or the sibling inserter:

[jasmussen]

Just thinking through what design this needs, here's a GIF showing an image sized up beyond its intrinsic size:

Once you reach a particular wide or full snap-point, what happens? One thought is to show a semi-transparent image overlay at those wide and full positions, and so when releasing the mouse button at those sizes, the alignment is applied.

[jameskoster]

I was thinking it would just "stick" to the snap point for n pixels while the mouse is held down. I suppose it's a little tricky because depending on the containers justification the image width could expand both left and right in those positions, unlike the uni-directional scaling in your gif.

[jasmussen]

Right, that's exactly the problem, if we actually changed the currently selected block itself, the layout around it can potentially shift and jump because dimensions vastly change. So it may be better to show an overlay which it snaps to on release.

Perhaps the overlay doesn't even need to be a copy of the image, perhaps it's simply a blue indicator of sorts in the width of the wide and full points?

[jameskoster]

Yeah that's probably worth a try. Perhaps with some text or icon inclusion to explain what is going on.

[jasmussen]

Here's a mockup showing a "snap ruler":

[jameskoster]

Perhaps the different widths could appear as guide lines?

Then as you approach a guide line, the width snaps to fill. I appreciate this is a bit awkward for wide and full widths as the layout will jump quite a bit, but it's hard to know just how impactful that will be without an interactive prototype (which I cannot make in Figma). Here's the closest approximation I can come up with:

[jasmussen]

I love that quite a bit. I only wonder how hard that would be to implement, notably the height matching that of the image. But if possible, looks great! I'd use fewer colors, though — perhaps just a single opacity instead of 3? I quite like that it includes "content width" as a snap point, as that would allow you to snap back to responsive if scaling down.

[jameskoster]

Re fewer colors, I think that will depend on implementation. In the gif above all overlays have the same opacity, but they are stacked which creates the illusion of multiple colors.

I quite like that it includes "content width" as a snap point, as that would allow you to snap back to responsive if scaling down

Yes, I think it can also pave the way for a future where layout is based on a predefined grid. So instead of only seeing content/wide/full guide lines you'd see all the different column widths, and be able to create ad hoc layouts.

[jasmussen]

Sounds good. I've updated this issue as marked ready for a dev to tackle it!

[talldan]

I'll start taking a look at this one, but open to collaborating with other devs along the way. I think where I'll start is creating the visualizer, and I imagine it to be quite similar to the padding/margin visualizer implementation.

I'd hope it wouldn't then be much of a stretch to also visualize the widths when hovering over the items in the alignment control:

(but that can be a follow-up to resizing and snapping).

[talldan]

An early version of the visualizer in #45056. Feel free to adjust the styles @jameskoster @jasmussen.

There's no snapping yet, that'll be a challenge on its own 😄

[jasmussen]

I updated this issue with some slightly tweaked mockups. They are in part based on the converstion of the PR in progress (#45056), and hopefully they should not be too much of a detour of the code implemented.