Improve the page hierarchy display

In the absence of a design, here are a couple of screenshots of competing UI's that could serve as inspiration for how this might look

Very much in favor of this! It makes not only seeing the site hierarchy much easier and quicker, but you can also drag and drop the components in the view in a much more user-friendly manner. It doesn't work that way in Figma though unless you have auto-layout turned on.

Here's WordPress' implementation:

Attaching designs for this.

Gauravvvv → changed the visibility of the branch 3458503-Improve-page to hidden.

@lauriii I think you meant to surface this at https://contribkanban.com/board/experience_builder? 😅 Adding parent issue to make it so!

This is blocked on being able to test this with nested components, which would be enabled by:

1. 📌 Create validation constraint for ComponentTreeStructure Needs work
2. 📌 Introduce an example set of representative SDC components; transition from "component list" to "component tree" Fixed

There's also ✨ Option to change the icon for components on the page hierarchy display Active which is a soft-blocker.

hooroomoo → changed the visibility of the branch 3458503-page-hie to hidden.

hooroomoo → changed the visibility of the branch 3458503-page-hie to hidden.

hooroomoo → changed the visibility of the branch 3458503-page-hie to hidden.

hooroomoo → changed the visibility of the branch 3458503-page-hie to active.

🐛 Provide an "Address formatter" text format that supports Twig without Wysiwyg Active is in.

📌 Introduce an example set of representative SDC components; transition from "component list" to "component tree" Fixed is almost done.

hooroomoo → changed the visibility of the branch 3458503-page-hie to hidden.

Should I close https://git.drupalcode.org/project/experience_builder/-/merge_requests/80 + https://git.drupalcode.org/project/experience_builder/-/merge_requests/91 now that @hooroomoo started https://git.drupalcode.org/project/experience_builder/-/merge_requests/176?

Yeah I think you can close them. Both of them were also made before the new layers menu.

Wim Leers → closed merge request !80

Wim Leers → closed merge request !91

Fixed the hover/select issue where hovering over a parent or child did not apply styling to the individual item. Next will look at fixing the Sortable functionality

Implementation done, will try my hand at adding drag and drop tests next using cypress-real-events library....

#28: 🥳

(Reflecting that in the issue metadata 👍)

See MR description

From design perspective, there's some improvements we still need to make – for example the layers feel a bit chunky and I'm not sure if bold is the best way to indicate slots. However, this takes the layers panel so much closer to what it should be that I'd argue that we should just ship this and work on the improvements in smaller follow-up issues 🚢

Manually tested.

The screenshot in #27 is still accurate 👍

Detailed observations, none of which need to be addressed here, only in follow-ups:

1. the slot names are machine names, not human-readable names
2. clicking on a slot name doesn't do anything — I'd expect the entire slot to be outlined?
3. the slot names are bold: why do we want to make them visually stand out compared to components? Especially due to the above point, I'd expect them to have less visual prominence.
4. clicking the slot name doesn't do the same as clicking the disclosure triangle

@balintbrews is awake long before the US, so asking him to review this first 😊

Adding #27 to issue summary and simplifying.

#33, #34 Yup improvements in follow-ups is good.

Just pushed low hanging fruit minor styling change so it looks less chunky and added a @todo in the tests to replace the cy.waits linking to 🐛 Unnecessary wait() use in e2e tests causing failures Active

Updated the gif in the IS to the updated one

That means 📌 [PP-1] Refine dragging behavior in Layers menu Postponed is now unblocked 👍

(And I'm hopeful that #3470625-5: Dragging sections in the Layers sidebar throws error → can now be tested & closed.)

Wow! This is great 😍 Works so well!