Grid direct drag issues

[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

[tellthemachines]

Noting that I'm able to reproduce the first issue with other Group types, particularly Row and Stack:

group_unselectable_children.mp4

[ellatrix]

I believe the overlay is fixed now, as we hide the block tools popovers, see #73539.