Highlight slot with a border where component/section is about to be placed

gauravvvv → made their first commit to this issue’s fork.

Before

After

Overall looks good to me.Now it makes the UX for dragging much cleaner.
Can you please update the issue summary and attach the screenshots for before and after in the User interface changes section?

We could probably add further clarity by highlighting the slot where the component / section would be added.

This might be something to consider in a follow-up but I'm wondering if we could be opinionated about section templates and as a UX enhancement, only allow adding them to the main level. After the section has been added to the page, the user can drag the components to any shape they wish. Thoughts?

I also realized that I'm not seeing this striping on my environment at all; instead I'm seeing a button with the name of the component 🤔

RE #8 Have you tried a cache clear since checking out this branch? I think that is what I did to resolve the same issue.

In Site Studio's Visual Page Builder the target slot (or Dropzone to use their terminology) is highlighted with a dotted border when you are dragging and hovering over the slot. I think we should have something similar.

+1 for #10.

Clearing caches did resolve the issue from #8 👍

I opened 🐛 Retain the space consumed by a component when it's being dragged Fixed which is a related issue. We don't need to solve for that here but it's probably good to keep that goal in mind.

RE #7

I'm wondering if we could be opinionated about section templates and as a UX enhancement, only allow adding them to the main level.

I don't think this would be beneficial for two reasons

1) If the issue is that it is difficult with the current UI to accurately place the thing you are drag/dropping into nested slots then we will still need to solve that problem for components so just preventing sections from working in that way would just be a sticky plaster
2) Ultimately I don't think we need to restrict users in that way - As an example, a given user's particular page layout may be based around having a large layout component that has a slot for all the page content and they would want to place their sections inside that larger component.

I've added a POC of #10 to this MR. Still wrapping my head around how XP is built but it is working well.

I set it up as a seperate MR for the POC but if everyone is happy we could combine them. I've attached a screencast.

Tested the MR from @DanielVeza manually and it seems like it's implements the border around slots from #7 which is a nice improvement. Thank you!! 🙏 We could open a follow-up issue to show the label of the slot.

Opened 🐛 Retain the placement of components within the preview when inserting a component Active which would help further improve this.

FYI this is a de facto blocker to #3471085, because this likely would solve that bug report too, per @lauriii at #3471085-6: [PP-1] Dragging into slots doesn't work well → .

My MR is green, the phpcs being out of date will be resolved by 📌 Improve UX of adding new sections Needs review , I don't think that needs to block this from getting in.

The MR does not contain the changes that make the ghost area bigger, as I don't think thats required anymore with the border being applied

🐛 Retain the placement of components within the preview when inserting a component Active landed, let's land this next? 😄

Let's land 📌 Mitigate class pollution from injected CSS Needs review first and adjust the CSS class names accordingly.

📌 Mitigate class pollution from injected CSS Needs review is in.

wim leers → closed merge request !200

The MR is now ready for review. I adjusted the styling a bit to address a few things:

1. Use an outline instead of a border so components are not moving due to the size of outline;
2. Set a 100% height for the slots;
3. Increase the height of the ghost element — the blue line showing where something will be placed — and add some horizontal space to play better with the slot outline visually;
4. Introduce CSS variables to keep design tokens standardized.

Played around with this using some column components we created awhile ago. It seems to do what is intended (see video).

https://youtu.be/HtkEa8fp1kI

Components move out of the slots but that is due to this one I guess: 🐛 Adding a component with slots does not register the slots as children Fixed

Thanks for taking the time to test the changes, Kristen! And yes, that issue you linked to is going to address that problem very soon!

Just waiting for a final 👍🏻 from @jessebaker.

🎉 Merged!

Just tested with latest changes and it looks good, thanks!