Skip to content

Grid direct drag issues #72987

@stokesman

Description

@stokesman

Description

Directly dragging a Grid can produce some unexpected and frustrating effects. I'm documenting three of those here.

Step-by-step reproduction instructions

Block markup I used in testing
<!-- wp:group {"layout":{"type":"grid","minimumColumnWidth":"15rem"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#fbebeb"},"layout":{"columnSpan":1,"rowSpan":1}}} -->
<p class="has-background" style="background-color:#fbebeb">one</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"background":"#fbebeb"}}} -->
<p class="has-background" style="background-color:#fbebeb">two</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"background":"#fbebeb"}}} -->
<p class="has-background" style="background-color:#fbebeb">three</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"background":"#fbebeb"}}} -->
<p class="has-background" style="background-color:#fbebeb">four</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"background":"#fbebeb"}}} -->
<p class="has-background" style="background-color:#fbebeb">five</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
  1. Drag a Grid from the space between the blocks
  2. Note text is hard to select afterward
  3. Adjust the grid or add content so it will get scaled down when dragged
  4. Drag and note that overlay doesn’t scale down with the block
  5. Insert an empty paragraph and drag and drop the Grid over it
  6. Note how dragging and dropping the Grid again doesn’t move it

Screenshots, screen recording, code snippet

After drag, trying to select text drags again

Text select-ability can be recovered with some additional clicks.

grid-after-drag-text-select-drags-again.mp4

Grid overlay visible and unscaled while dragging

This just looks like something’s going wrong.

grid-drag-overlay-visible-and-unscaled.mp4

Malfunction if dropped on an empty paragraph

This one can make it hard to drag again to a new location and seems to break the direct drag’s preview logic as it looks like maybe the browser default image is being used.

grid-drag-dropped-on-empty-paragraph.mp4

Environment info

WP 6.8.2 and Gutenberg at trunk
Chrome Beta, Firefox 144 and Safari 18.3.1
MacOS

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Feature] Drag and DropDrag and drop functionality when working with blocks[Type] BugAn existing feature does not function as intended

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions