[drag-and-drop] JSON content added to the classic block when dropping another block in / around it

[fullofcaffeine]

Describe the bug

Dropping a block onto the Classic block results in JSON code being added to that block’s content as well as the dropped block moving either above or below the classic block.

To reproduce
Steps to reproduce the behavior:

1. Create a most with multiple blocks including a Classic block
2. While dragging a non-Classic block, drop it on top of the Classic block

Expected
The block would be dropped where the indicator line displayed and not add anything into the content of the Classic block.

Actual
JSON code was injected into the content of the Classic block in addition to the block actually being moved to the location the drop indicator line showed.

Screenshots

Click the image to open the video

Editor version (please complete the following information):

• WordPress version: 5.4.2
• Does the website has Gutenberg plugin installed, or is it using the block editor that comes by default? gutenberg plugin
• If the Gutenberg plugin is installed, which version is it? 8.5.1

Desktop (please complete the following information):

• OS: Linux Mint 18.4
• Browser: Firefox Quantum
• Version: 79.0b9

[geheren]

Flagging this from Trac: https://core.trac.wordpress.org/ticket/52168

User shared this screen recording of the same issue.

[mikeh000]

It is very easy to recreate. Here is the screencast: (https://www.screencast.com/t/qcezq4HSE)

1. Add 2 CLASSIC BLOCKS and an image block, all stacked.
2. Start moving around one of the classic blocks to different locations, like in screen cast. Eventually it will fill with JSON code.

[BenBroide]

It seems like the content of the transfer_block variable is been added to the block content

[carolinan]

We were able to reproduce this at the contributor day on February fifth, while user testing drag and drop from the inserter

WordPress 5.7 beta 1
Browser: Google Chrome - Version 88.0.4324.96,
Operating system: macOS Catalina - Version 10.15.7,
Twenty Twenty-One

The tester shared this screenshot:

[BenBroide]

@carolinan
This is the object of transferData that is converted into a string and added to the block content after being dragged as you can see in the screenshot I added above.
The questions are:
Where is logic that converts the transferData object back to a block after dragging?
I can't find that part and also can't seem to output changes I do in the drgabble component like console log

gutenberg/packages/components/src/draggable/index.js

Line 52 in 66d46b3

event.dataTransfer.setData( 'text', JSON.stringify( transferData ) );

[BenBroide]

Added gif how to reproduce bug 100%

[BenBroide]

Seems like the gif got cut, however you can see the screen recording here https://recordit.co/d60rsAh3NC
steps to reproduce 100% of the times:

1. add classic block
2. add regular block below
3. add classic below
4. move the regular block above the top classic block

[mikeh000]

You don't even need to add a regular block. Here is how to reproduce 100% of the time:

1. Add 2 classic blocks, one on top of the other.
2. DRAG the bottom classic block above the top classic block

It doesn't seem to happen when you drag the top classic block below the bottom classic block.

[mikeh000]

Can anyone please look at this? We have provided screencasts and step by step to reproduce. It's been doing this for at least 10 months or so (even though the bug submission was this summer).