Feature request: Parent selector

Beta
#1

I am sorry for deviating from the main Beta topic once again.

I’d take the opportunity to point out that it is often not possible to select a Column or a Row that holds other elements. For example if a DIV that occupies the whole space is inside a Column.

This could be solved with a little button, for example at the top of the Inspector highlight area. Clicking it would select the inspected element’s parent, and then clicking it again would select the parent above, etc.

Also, not to open a new thread for another thing: it would be very useful if we could either drag the responsive toggles up/down, or have their top/bottom placement in the settings. They often get in the way. :slight_smile:

1 Like
#2

Yes please. Both of these have been bugging me as well.

1 Like
#3

I see what you mean. That’s an interesting idea to have a quick way to ascend elements. I’m a bit hesitant to add another button when it can be done with the breadcrumbs. I’ll chat with Kory about it sometime.

As for the responsive toggles, those are going to be overhauled for the responsive styling update. We prototyped some options a few months ago and we’ll probably be doing something with adjustable rulers that allow accessing any size instead of just the 5 predefined ones.

5 Likes
#4

@alexander Cool!

I have noticed that if I hover outside the Row (parent) container, its label shows up even if the parent is completely covered by its children. It is even clickable, but only up to the lower third of the label, then it disappears.

image

If the entire label was clickable, that would be a way to select the underlying container more easily.

Continuing on this logic, there doesn’t even need to be an extra button. Maybe if we hover to the right of the label, the parent container showsu up, and if we hover more to the left, its parent container show up.

I know that there could be too many parents and this is not ideal, but something along those lines: allow selection of underlying stuff by smart hovering. :slight_smile:

This also solves the issue of selectin the Row generally: we need to click between the columns to select it, but that is where the responsive handle is, so we end up moving it if we are not extra careful.

That need to slow down while selecting stuff in order not to displace elements or move handles is a huge UX thing for those who work a lot inside builders.

1 Like
#5

Hey @Misho, some great points here. We’re getting to a place with nested elements that it’s more difficult to track/select the element you want. Rows are a good example, but it’s true for all kinds of use cases especially using wrapping Div elements. This is more apparent now that we’re in the Looper era of Pro and you could be working with small elements in confined spaces like Columns. I think the status indicators were a huge move in the right direction because they serve as visual anchors in the breadcrumbs.

The observer labels in the live preview have never been clickable because when you mouse into their space you start observing the neighboring element. It’s a very transparent UI element that can’t be interacted with.

In the live preview, it always inspects the elements that the observer is indicating. I think it’s important to keep that experience consistent. If we change that, while it might introduce a shortcut, we’ve just changed a predictable behavior and some people will start doing it by accident and get frustrated or think something is broken. So if we did do anything we’d probably use a little action icon.

Before we start changing the observer experience, I think there are some other paths to explore:

  • We’ve talked about adding a little button in the Inspector to navigate upwards (inspect the parent). Because parent elements now show sortables for all the children, this would bring continuity and allow fully traversing the Element tree from the Inspector pane albeit one element at a time.
  • In addition to the above, we could bind that to a keyboard shortcut. Then you could click the Column and immediately hit the shortcut to be Inspecting the Row.
  • This is a much taller order but I’d like to re-explore the ability of having the Inspector and Outline panels visible simultaneously. Then you could see the highlighted element in the

Just some thoughts to add after reading your suggestions.

1 Like