-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Open
Labels
[Feature] Drag and DropDrag and drop functionality when working with blocksDrag and drop functionality when working with blocks[Type] BugAn existing feature does not function as intendedAn existing feature does not function as intended
Description
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 -->- Drag a Grid from the space between the blocks
- Note text is hard to select afterward
- Adjust the grid or add content so it will get scaled down when dragged
- Drag and note that overlay doesn’t scale down with the block
- Insert an empty paragraph and drag and drop the Grid over it
- 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
Labels
[Feature] Drag and DropDrag and drop functionality when working with blocksDrag and drop functionality when working with blocks[Type] BugAn existing feature does not function as intendedAn existing feature does not function as intended