Allow dragging components to top/bottom of page and in between adjacent components with slots

AFAICT #3470973-7: Retain the placement of components within the preview when inserting a component → fixes that? What remains after that?

Confirmed with @balintbrews that this needs a fix that is separate from what is in 🐛 Retain the placement of components within the preview when inserting a component Active .

I started to investigate this, and I wanted to record my findings so far.

I came to the conclusion that when components without slots are placed at the top or the bottom of the page, the drag & drop already works as described in the proposed resolution. E.g. put a Hero component to the top and to the bottom of the page, and you'll notice that you can easily place content above the one at the top, and below the one at the bottom.

So what's broken, then? It's when components with slots are placed to the root, and at the root level there is no other component at a boundary that would provide a "surface" for placing a component. With that surface being absent, only the slots inside the component with slots are detected. I tried to illustrate this with a sketch where I marked where we are able to place components currently. (The two column component is used as an example for a component with slots.)

There is one exception to this in the case of the Two column component, and that is when one of its slots is empty, and we're trying to place a component to the root below the Two column component. Our implementation creates this situation by not allowing to drag a component below the placeholder in the slot, allowing the root layout to detect that something is being dragged there.

Something to note that I consciously made a simplification in my description to talk about the root level only, but the same problem domain is present at any level of the layout: replace the word root with slot, and all of the above still stands.

In an earlier conversation, @jessebaker suggested that we may want to increase space between slots with a nice animation when we start to drag a component. That would automatically solve this entire issue by virtue of having space available for detecting slots at any level. After discussing this approach with @laurii we concluded that we would like to avoid movements like this in the preview, if we can.

See the current state of dragging into slots here :)

https://www.youtube.com/watch?v=esII_juFxcE

Another one that shows the difference when dragging to the left of an empty slot (jiggly) vs the center/right (stable):

https://youtu.be/iXTLnj-Ag8M

Hi !

I was able to insert component on top/bottom / recording: https://youtu.be/PGjod3DfBl0

I run into an issue with empty columns, when I try to drop the component on top of it, it keep moving between the top of the component and the inside.

Several MRs landed since the last commit/CI run. We expect those landed MRs to stabilize some of the more flakey E2E tests. So, started a new pipeline.

@balintbrews: is this MR ready for review? If so, please mark the MR as ready for review 🙏

@wim leers — I never even changed the status to Needs Review. 🙂 I was still battling with tests, then ended up creating 📌 Write end-to-end test for dragging components into slots Postponed . Now it's ready for code review.

Hmm... maybe this is a separate issue but *scrolling* down to bottom to drop a component wasn't working:

https://youtu.be/Ts3IaHEFwcg

Yes, let's keep that separate, please. 😊

Added:

🐛 No downward auto-scroll when components are dragged Active

Tested dragging between slots and it's not working for me when the slot is empty:

https://youtu.be/N-UDw5YkUJA

I managed to reproduce this once or twice after seeing your video. My only guess so far is that this has something to do with deleting a component. I'll keep trying/thinking. Unless I can come up with something reasonably fast, I'll open a new issue for this. Thanks!

tl:dr: #17 is now fixed! Thanks for catching that!

Turns out the issue reported in #17 was caused by the combination of the changes in this issue and the logic added in 🐛 [PP-1] Impossible to drop a component into an empty column of the two Active to prevent dragging a component above the example content of an empty slot. With the introduced required threshold to pull content into the slot by this issue, if the mouse moved too fast across the boundary of a component with a slot and another potential drop target, the slot didn't get recognized as a new drop target.

This is now solved by removing the logic added in 🐛 [PP-1] Impossible to drop a component into an empty column of the two Active and fixing it purely via CSS which is now possible due to what was changed since then by 🐛 Retain the placement of components within the preview when inserting a component Active where we changed how we present the drop target.