Drag-Dropping Blocks shows top/bottom targets that produce the same result

[JJJ]

When using the 6-dotted handle to drag and drop a block around, the drop targeting seems "generally weird" to me. At first, there are no obvious targets. Once I wiggle the mouse around about 50px to the right in frustration, a simple horizontal line appears. Ah ha, that must be it!

But each block has both a top and a bottom target, that lead to the same result. It's actually possible to expose 4 drop targets that, when dropped on, put the block in the same exact place.

To Reproduce

1. Go to Add/Edit a post
2. Create a few paragraph blocks, multiline, singleline, whatever you like
3. Grab a block by the 6-dotted grabber handle thing
4. Notice that a vertical line appears to denote where it can be dropped
5. Notice that blocks have lines above/below each block, as well as the current placeholder block having its own, too

Expected behavior
I recommend swapping the placeholder and the droppable, so that the UI element underneath the mouse is a rectangle, and the placeholder stays the original content as is. In my brief testing, this seems more inline with every other text editor (TinyMCE, Netbeans, Atom, and regular Textareas.)

Screenshots

Desktop (please complete the following information):

• OS: macOS (10.14)
• Browser: Safari (12) but any will work just fine

Additional context

• Gutenberg 4.0.0

[designsimply]

Thank you for testing and for including animated gifs! 😊

I would like to consolidate this issue together with #8540. Please let me know if you think it should remain open separately though.