Skip to content

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

@jameskoster

Description

@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?

Grid

Only vertical snap areas, tooltip if you pause

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:

Snap tooltip


Issue updated Nov. 23.

Initial proposal

Second iteration:

guides

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:

snapping

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:

Flow

First iteration:

Screenshot 2022-09-22 at 10 41 43

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:

Flow

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    Status

    🏗 In progress

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions