Beta4: New UI

[urchindesign]

Just so you know I am really liking all the new functionality and some of the new stuff is amazing. I wanted to say that as it feels like perhaps a lot of things are negative. I guess this is because we want things to be the best they can be. I also really appreciate how responsive you guys have been to everything thus far.

Perhaps I don’t like change but this is honestly the first time I’m finding the UI tricky. With each iteration of X and then Pro it always felt like the changes made to the UI made a lot of sense. For me with the latest version it feels like a lot of things have taken a step backwards.

I don’t really have time to get into all of it but here are some examples.

The breadcrumbs in the builder.

In the current version of Pro they made sense. If I clicked a column but wanted to access the row or section I could click the breadcrumb for the row or section and my mouse would be almost directly where I wanted to work. After all if I’m clicking the row in the breadcrumb to access it I most likely want to adjust row settings.

With the new UI if for some reason the builder doesn’t allow me to click a section or row I need to move all the way to the far right of my screen to use the breadcrumb and then move my mouse all the way back to the far left of the screen to access the row. On a large monitor this is a long way to go.

Launching Pro
In the past it was simple to click the Pro menu and choose what part of Pro we wanted to open. Now you are effectively not giving us the choice. Either we open the builder then we have to click an option to where we want to go or you arbitrarily open Pro in the last place we were working. It makes more sense if there is a menu where we can directly choose what we want to open.

Placement of the icons fo CSS / JS etc.
This one I will probably get used to but for me stacking all the icons towards the bottom makes more sense.

There seem to be a lot of these small similar changes that make working in Pro less effective.

[RubberDuckers]

I echo @urchindesign in some bits. Whilst the new functionality is AMAZING from what I’ve played with so far and so many strides in the right direction, the breadcrumbs being quite far away as pointed out or even not grouped with what its changing. Thinking in UX terms its odd to not have the breadcrumbs in the settings as its layered navigation for the settings, not the page itself where it sits currently.

I imagine a lot is just getting used to changes and fair play to you all for squeezing in all the new bits and the improvements so far, even simple things like accessing the fonts/colours or toggling on and off the settings that aren’t needed are great.

[devinelston]

I agree about the location of the breadcrumbs.

For my own builds, I’ve added some UI CSS to reverse the bar when it’s up top, and it matches my mental model of the hierarchy a bit more. Basically, I’ve grouped everything closer to the inspector which also makes it easier for me to move up and down the stack.

If you want to do something similar, here’s the CSS to add to the UI CSS tab in the Dev Console. (One note, this was my quick and dirty version – scrolling left/right doesn’t work within the breadcrumbs on narrow screens)

.tco-bar.is-navigation.is-top {
  flex-direction:row-reverse;
  justify-content: flex-end;
}

.tco-crumbs:last-child {
  margin-left:none;
  border-right-width: 2px;
  border-right-width: var(--d-border-base);
}

[Misho]

I was moving my breadcrumbs to left as well, but that custom CSS stopped working now.

Also I had CSS to indicate there is custom CSS on the element, but it stopped working as well:

.cs-layer.has-element-css > .cs-layer-content:before {
    content: '*';
    position: absolute;
    color:hsla(101, 34%, 55%, .9)!important;
    left: 0;
    top: 9px;
}

For now the biggest UI issue for me is the small “X” that needs to be hit to close various floating windows. Almost each time I have to click twice to close them.

[alexander]

Thanks for sharing all this! I’ve been mostly working through bug fixes today, so I’ll take some time to think on your comments and reply Monday. Quick thought on the breadcrumbs, we’re open to possibly adding more preferences to give you control over the output and positioning (don’t think more drag/drop is a good idea there since the bar itself already moves).

[BrandexPublishing]

I support the feedback on the breadcrumbs being down at the bottom - I can’t seem to move that bar either. The smallest thing I would do is move that bar to the top at least. It’s too odd to look top left to handle most of the UI interaction then zoom down to the bottom to navigate the sections of the properties. IMO.

[urchindesign]

The dragging works but honestly top or bottom that entire bar doesn’t work.

I know it allows more space but my eye just doesn’t go there.

[urchindesign]

@Misho

I was moving my breadcrumbs to left as well, but that custom CSS stopped working now.

The custom UI CSS isn’t saving. CSS I added in Beta 3 is there but I can’t remove it and new CSS takes effect but doesn’t save so it works until I change work spaces.

[alexander]

Thanks again for all the thoughts here! Still thinking on some of them but wanted to share some feedback

@urchindesign

The breadcrumbs in the builder.

In the current version of Pro they made sense. If I clicked a column but wanted to access the row or section I could click the breadcrumb for the row or section and my mouse would be almost directly where I wanted to work. After all if I’m clicking the row in the breadcrumb to access it I most likely want to adjust row settings.

With the new UI if for some reason the builder doesn’t allow me to click a section or row I need to move all the way to the far right of my screen to use the breadcrumb and then move my mouse all the way back to the far left of the screen to access the row. On a large monitor this is a long way to go.

This is one I could see us introducing some preferences to provide more options on how it’s presented. Using Devin and Misho’s customizations as an example, we could a new select called “Inspector Navigation” and have some permutations like

• Breadcrumbs | Control Groups (Spaced)
• Breadcrumbs | Control Groups (Adjacent)
• Control Groups | Breadcrumbs (Spaced)
• Control Groups | Breadcrumbs (Adjacent)

@urchindesign

Launching Pro
In the past it was simple to click the Pro menu and choose what part of Pro we wanted to open. Now you are effectively not giving us the choice. Either we open the builder then we have to click an option to where we want to go or you arbitrarily open Pro in the last place we were working. It makes more sense if there is a menu where we can directly choose what we want to open.

Before we had links to Headers, Footers, Global Blocks etc. but those just went to an interstitial index screen where you still had to choose what you wanted to edit. Now everything can be discovered from anywhere in the app without having to navigate away. So it’s a tradeoff because we don’t have those places for you to land anymore. If you navigate directly to /pro/ you can see we do have a main screen available, but that will still be a click away and isn’t very useful on its own.

There will always be the “Edit Page”, “Edit Header” etc. contextual links, so as long as something on the front end is powered by a builder, you’ll be able to immediately jump right into it.

@urchindesign

Placement of the icons fo CSS / JS etc.
This one I will probably get used to but for me stacking all the icons towards the bottom makes more sense.

There seem to be a lot of these small similar changes that make working in Pro less effective.

We’re actually considering one more change where all the code editors are combined into one tabbed window instead of having to open/close both CSS and JS. This would be consolidated to a single icon, so it would be something to get used to for sure, but we do like reducing the number of icons in the bar because it’s likely we will need to add more in future updates like Responsive styling

---

@BrandexPublishing

I support the feedback on the breadcrumbs being down at the bottom - I can’t seem to move that bar either. The smallest thing I would do is move that bar to the top at least. It’s too odd to look top left to handle most of the UI interaction then zoom down to the bottom to navigate the sections of the properties. IMO.

Can you try dragging from part of the bar that doesn’t have buttons? We might need to make some adjustments there, but it should definitely be moveable.

@urchindesign

The custom UI CSS isn’t saving. CSS I added in Beta 3 is there but I can’t remove it and new CSS takes effect but doesn’t save so it works until I change work spaces.

Sorry about that - this is fixed for the next patch. The preferences were not flagging that changes were ready to persist to the server.

[BrandexPublishing]

@alexander: I now see I can drag breadcrumbs to the top. Somehow I didn’t see the blue target bar.

[alexander]

Update: We’ve gone back to the drawing board on some of these items today. Here’s what we landed on

First, by default the Navigation Bar will be Breadcrumbs + Control Groups left aligned. It will look like Devin’s screenshot above. There will be a new preference that allows you to flip the order and determine if they are adjacent left/right or spaced out.

Second, clicking “Pro” will still use the Launch behavior that takes you wherever you were last, but we added all the old links back:

If you click one of the Builders, it takes you to an interstitial screen where the manager for you desired builder is already open by default. For example:

While on this screen, the dropdown can’t accidentally be closed by clicking outside of it.

[Misho]

@alexander

by default the Navigation Bar will be Breadcrumbs + Control Groups left aligned

Oh, that’s great. I believe this is the most intuitive layout and many of us won’t have to customize the breadcrumbs anymore.

@alexander

we added all the old links back

Great decision! Was hoping they’ll come back.

Also, I hope those “X” icons that are closing windows will get larger clickable areas to avoid having to click more than once on them. I know that the icon that launches them can also close them, but hitting the “X” is more intuitive.

[alexander]

For the X, the clickable area should be the height of the header bar, and about the same width. There was an issue we fixed where clicking quickly sometimes got registered as “drag intent” and didn’t close the window. Should be resolved now. We also still need to get that Esc key shortcut in to close them.

[urchindesign]

Awesome. The beta 6 update is definitely a step forward.

Having the drop downs back in place, clearly marking what part of the builder we are in, and keeping all the "outline, inspector, settings’ buttons as icons only really works nicely.

I still find the breadcrumbs / customize etc. a bit out of my view… keep struggling to find them even though I know they are there. I guess it just something to get used to.

[urchindesign]

@Misho

Also I had CSS to indicate there is custom CSS on the element, but it stopped working as well:

I updated this for Beta 6. Seems to be working, use this on every site so thanks for originally posting it way back when :

.tco-layer.has-element-css > .tco-layer-content:before {
 content: '*';
 position: absolute;
 color:hsla(101, 34%, 55%, .9)!important;
 left: 0;
 top: 9px;
}

[Misho]

@urchindesign

I updated this for Beta 6. Seems to be working

Thanks @urchindesign! I wasn’t examining the new CSS until the dust settles down. So cs (Cornerstone) in classes are switched for tco (Themeco). Same as the one used in Header and Footer builders. I understand the need to move away from Cornerstone in Pro, and to unifly the class index. At least there is a clear pattern for everybody to follow in case they had extensive customizations.

Btw, that CSS indicator doesn’t work for me anymore aesthetically due to the new blue highlights. So After some playing around, this is going to be my new default:

.tco-layer.has-element-css > .tco-layer-content:before {
 content: '•';
 position: absolute;
 left: -10px;
 top: -4px;
 font-size:1.6em;
}
.tco-layer-content.is-active,
.tco-workspace-nav button:not(.tco-btn).is-active {
  background-color: hsla(203, 100%, 45%, .2)
}

I’m changing the indicator, moving it more to the left to stay outside of highlighted areas, and also my preference is to tone down the highlights.

[urchindesign]

Nice one…

I am still hoping we get a “has-conditional” and a “has-attribute” class so we can target any of the hidden stuff in a similar way.

I was thinking on similar lines but have had limited time for testing and playing around. Just been super busy with work and so far the beta’s haven’t felt ready for a real build. So far I have just cherry picked a few things to look at and mostly very briefly.

I haven’t even looked at the animations, archive builders, etc. and only had a brief look at the conditionals which are looking promising

[Misho]

@urchindesign

I am still hoping we get a “has-conditional” and a “has-attribute” class so we can target any of the hidden stuff in a similar way.

I’m hoping for those as well! If that comes, I’ll create some kind of a traffic-light look, indicating each.

Btw, I cannot wait anymore. I have to start a new build for an art gallery and I need the layout editor to create Image gallery CPT’s that will be segmented into current, future and past exhibitions. Hope I’ll transition into the full version without too much trouble.

[alexander]

I mentioned it on a different thread, but would you guys be interesting in those classes on the breadcrumbs as well? I think I’m going to add some for looper providers/consumers as well as those could be helpful to surface and we’re most likely going to add some indication for them.