[Feature enhancement] New elements tree with more powerful interactions and shortcuts

Man, I don’t really like these new changes as it is very confusing and elements won’t show unless you click on the reveal icon.

I hope you guys don’t force this change onto everyone right from the get go and have the option for us to not opt into this unless its flawless and/or perfectly working. As of now, this is making my work tedious and confusing

4 Likes

I also think familiar functions from the old element tree are missing. You now have to click a lot more to reach your destination.

1 Like

There are two problems with the new design.

First: If there are a lot of nested elements - they gradually go behind the scenes.

Second: If you select “Show only hidden elements”, the tree cannot be collapsed.
Screenshot_8

I think you can use colors to visualize the tree (or reduce the paddings of elements)

2 Likes

2p feedback

Double-clicking on an element should open the properties panel…

That is such a large space to click.

Whereas to open the properties panel, I have to click a tiny icon…

Kept clicking the element so many times…

Thanks
Zubair

6 Likes

I like that there is an update on the elements tree. The old one was really annoying. But i agree with the others that it is hard to read with a lot of nested elements, to much space. Also when i switch between pages then the height of the tree stays the same but on other pages (or reusables) i have less items in the tree so there is a lot of blank space between the visual elements section. I think it would be much better if the elements tree gets the full height on the left side and the other items like visual elements, containers, input and reusables are somewhere else. Maybe in a floating bar on the top with a favorite list, you don’t use them all, but you have some favorites that you use a lot (maybe with shortcuts). now it takes allot of space that is much more needed for the elements tree.

Does this only work on a mac and windows? on a linux with logitech keyboard i cannot select multiple elements. I can only select them with shift+click but then i get a row of elements.

And only expand the layer that is selected would also be very nice, and is more often the case i think. expanding everything is more an overkill then having a better view of the elements tree.

1 Like

I second this. Too much padding between rows and the icons do nothing for me. The new navigation is clunky and confusing. I’m finding it VERY difficult to find elements I want now.

5 Likes

Horizontal scrolling when the tree is expanded doesn’t work!

2 Likes

Hi @bubble

While you’re at it, can you do a quick update on Debug menu?

Thanks,
Developer Community

3 Likes

Great upgrade, love it!! :heart_hands:
I have a suggestion: It would be nice if you remove the minimum height of the assets, so when it’s closed, the element tree could be even taller.


(just remove the blank space indicated in red in the screenshot).

10 Likes

I gave them a heads up 3 days ago about what seems to be the second most requested change to the new design…didn’t think they would have made such a mistake on the spacing though.

I don’t like that clicking on the name of the element now opens an input to change the name rather than opening the element on the canvas, nor that I have to strain my eyes and hurt my brain trying to focus on the 4 icons and the text (total of 5 elements on one line for a single element) in order to find the eye icon to just simply open an element on the canvas.

I honestly have not played with it enough to understand all that is new with it, but from this thread it seems yet again

  1. No QC as apparently there are numerous bugs
  2. Rolled out to all users before any QC so everybody just has to submit bug reports
  3. Not much (if there was any) interviews/feedback from power users
  4. No Beta release to allow for those who opt into the beta to report all the bugs so that there could be a better received roll out
  5. Missing the mark on UX as it seems Bubble is super excited about UI for the past few months

BUT, if this at least allows me to drop an element into the elements tree instead of on the Canvas - Thank You

if this lets me select multiple elements from the elements tree to group them together instead of needing to do it from the canvas - Thank You

But, yes, another but, please allow us to toggle on or off the icons as they are completely unnecessary. Everybody already has their preferred way of naming elements. Some people like adding their own emojis/icons to the name, some like to change the word Group to grp, some like to keep the name of the element in tact so that anybody who views the app knows what the element type is and when changing names they do not need to change the default beginning of the name…The icon and the word is redundant and is going to give newbies a false impression that it will be okay to remove the word of the element (for example Group) from the element name as they may mistakenly believe it will be easy enough to know what type of element it is because the element tree provides for an icon that is supposed to represent a group - a naming convention is extraordinarily important to create and follow as there are so many places throughout the app within the editor that you can quick type and search for things, and personally I rely on the name of the type of element a lot when doing so - having these icons will only make it harder for newbies to see the value in keeping the name of the element type in tact and they will in turn likely not learn about the benefits of naming convention and the multitudes of ways they help speed up development - and not just for them, but for when they inevitably scale on Bubble and starting hiring dozens of Bubble developers to expand their platforms.

However, yeah the use of a different conjunction, the dropping of an element into the tree, and the selection of multiple elements in the tree to group, are so so nice; because of those two, maybe in fact, Bubble was listening to some power users.

8 Likes

Hey @kate.mcnally and Bubble team – can see a lot of thought and work went into this! Love the easy ability to auto-reveal and collapse/expand all groups in a tree – sometimes it would take me 4-5 clicks to get to the property settings of the desired element. The visual cues of icons for the type of element is nice too.

One point of feedback for those of us that develop in Bubble on our laptops – which it seems the team is already privy to – is carefully budgeting the amount of screen real estate ui elements take up in the editor.

For example, in the past few weeks the Bubble team updated the Design, Workflow, Data, Styles, etc tabs to reduce their unnecessarily large size, which is great! Then here in this update, it went the opposite direction with a huge increase in padding around elements in the elements tree. I can see the UI designer’s perspective in this decision, it looks nice, but I would assert that though Bubble builders do like nice looking things, we care more about functionality.

Thus, the point of feedback is to reduce the amount of padding around the items in the elements tree so we can see more of what’s there and find the stuff we’re working on. There is another option that is a compromise like if you’ve seen Gmail they give users the option to display their email list in Regular/Cozy/Compact formats. So, if you gave us the option to set how we want it, that’d work just as well. Thanks for the consideration.

7 Likes

Any way to have the previous view as an alternative for the transition period?

2 Likes

After a day of use, I’d like to be able to open the property editor from the tree.

Right now, the click on a tree element allows to rename the element. I find this is less useful than being able to open the property editor.
I rename the elements only once.
I need to open and work on the editor lots of time.

6 Likes

If you double click on icon, this open editor.
I suggested to be able to rename from the tree and I think it’s a good thing. Double click is fine for me, but only if single click open editor. Actually, double click on name should do the same thing that icon is doing (icon and name should have the same behavior). But really think that single click should open editor.

3 Likes

Bug Report - when right clicking an element on the canvas and choosing “Replace the element type”, the icon displayed in the Elements Tree that is new for this release does not update to the corresponding new element type

5 Likes

And this option is currently only showing up when we use the right mouse button directly on and the element on the preview screen, and not in the element tree

1 Like

Interesting use case here! Thanks for sharing this

2 Likes

Sounds like “tighter” is a general theme of feedback throughout these comments. Thank you all for sharing your feedback here.

6 Likes

Thank you everyone for sharing your feedback and initial thoughts on experience. In addition to the density concerns, I see a lot of feedback around extra clicks for viewing hidden elements or extremely nested elements on the tree. Something for our team to keep on our radar. Thanks again, and appreciate the feedback as it continues to come in.

8 Likes