Nav Unification: Update Masterbar/Toolbar

[obenland]

Visual unification of Calypso's Masterbar and wp-admin's toolbar. Let's update sizes and colors to reflect the way the toolbar looks in wp-admin.

Resources

• Masterbar styles: https://github.com/Automattic/wp-calypso/blob/373e83ea618f51b9b60c8e1b0685f87293a634f6/client/layout/masterbar/style.scss

See 211-gh-dotcom-manage

[cpapazoglou]

I have created a feature flag https://github.com/Automattic/wp-calypso/pull/45452 which by default is enabled only in development. We can force enable it by appending ?flags=nav-unification in the URL and use it

import config from 'config';
if ( config.isEnabled( 'nav-unification' ) ) {
    alert( "nav-unification feature: Enabled");
}

Just a heads up, it seems we have 2 masterbars https://github.com/Automattic/wp-calypso/blob/e274a99df8de65a90625e1e28c4a744f020ef32a/client/layout/index.jsx#L122

[frontdevde]

@sfougnier @davemart-in I can't find links to the design exploration files anywhere (outside the couple of screens on the WHY post). For now, unless advised otherwise, I'll use wp-admin as the source of truth for sizes and colors for this issue.

Edit: 1.) Before I fine tune every pixel of the spacing, I wanted to double check whether we want the masterbar in Calypso to 1:1 match the current state of the masterbar in wp-admin? Do we make all adjustments just to the Calypso side or is there anything that needs changing on the wp-admin side as well? 2.) What do we want the new active state for masterbar items to be in Calypso? When clicking the notification bell in wp-admin, the background is white and the color dark grey. I’m not sure this works well in Calypso given that My Sites is always active (see picture in PR or live in calypso.live)? 3.) In Calypso the My Sites link is active while in wp-admin it is not. While it makes sense now, it will feel inconsistent once the bar looks visually the same in both environments. Do we leave it that way?

[ghost]

1.) Before I fine tune every pixel of the spacing, I wanted to double check whether we want the masterbar in Calypso to 1:1 match the current state of the masterbar in wp-admin? Do we make all adjustments just to the Calypso side or is there anything that needs changing on the wp-admin side as well?

2.) What do we want the new active state for masterbar items to be in Calypso? When clicking the notification bell in wp-admin, the background is white and the color dark grey. I’m not sure this works well in Calypso given that My Sites is always active (see picture in PR or live in calypso.live)?

It's still being worked through but currently, the masterbar maintains a height of 32px, the background color #101517, and the active states to be #23282D. This is the latest exploration.

3.) In Calypso the My Sites link is active while in wp-admin it is not. While it makes sense now, it will feel inconsistent once the bar looks visually the same in both environments. Do we leave it that way?

Good question. I think we should make this treatment consistent with the active state in the screenshot above.

cc @lcollette

[cpapazoglou]

👋 @sfougnier! In this exploration it seems that we have made the sidebar wider than the wp-admin. Is that on purpose? In that case, the two interfaces will be different visually, except only if we are expected to make changes to the wp-admin itself which is something that it is not clear now. It would certainly make things more complex though.

Good question. I think we should make this treatment consistent with the active state in the screenshot above.

Adds to my confusion above.

[frontdevde]

It's still being worked through

Not ideal given that we're already supposed to be working on this. 🙈

but currently, the masterbar maintains a height of 32px, the background color #101517, and the active states to be #23282D. This is the latest exploration.

The current background color in wp-admin is #23282d and the active state is #ffffff. Can you confirm that the intention of design is to make changes on the wp-admin side as well and not just Calypso?

Good question. I think we should make this treatment consistent with the active state in the screenshot above.

What I hear you saying is make the My Sites link active in wp-admin as well, is that correct?

This is the latest exploration.

Looking at the designs, I noticed the following: the active state of a menu item in the masterbar has the same color as the inactive state of a menu item in the sidebar. Wondering whether that might be confusing from a user perspective?

From the Figma file it's also unclear to me what we want the notification indicator color to be. In wp-calyso it's currently orange, but that doesn't really go well with the pink buttons:

cc @sfougnier @lcollette

[frontdevde]

Current work-in-progress state in Calypso:

[ghost]

In this exploration it seems that we have made the sidebar wider than the wp-admin. Is that on purpose? In that case, the two interfaces will be different visually, except only if we are expected to make changes to the wp-admin itself which is something that it is not clear now. It would certainly make things more complex though.

@cpapazoglou The sidebar in this latest design is 200px, whereas the current wp-admin sidebar is 160px. I spoke with @obenland about this, and the idea would be that we would maintain that 200px within the wp-admin screens as well.

The current background color in wp-admin is #23282d and the active state is #ffffff. Can you confirm that the intention of design is to make changes on the wp-admin side as well and not just Calypso?

Yes

What I hear you saying is make the My Sites link active in wp-admin as well, is that correct?

Yes, I am saying this for the sake of consistency.

Looking at the designs, I noticed the following: the active state of a menu item in the masterbar has the same color as the inactive state of a menu item in the sidebar. Wondering whether that might be confusing from a user perspective?

The idea is that the masterbar item looks visually connected to the sidebar it is related to.

From the Figma file it's also unclear to me what we want the notification indicator color to be. In wp-calyso it's currently orange, but that doesn't really go well with the pink buttons:

I agree that orange conflicts with the Calypso palette. I think keeping it pink close to what the current color is in Calypso makes sense.

cc @lcollette

[frontdevde]

@sfougnier Thanks for getting back to us!

Are there any exploration screens I can look at for mobile?

This is what the navigation looks like in wp-admin and the current work-in-progress:

wp-admin	WIP in Calypso

Questions:

a) The spacing on wp-admin in production looks off. I assume we wouldn't want to replicate that in Calypso. What should the spacing look like?

b) The mobile navigation works differently in wp-admin where we currently don't have to account for site icon and title. wp-admin on the other hand has additional option dropdowns at the top. How do we plan to merge the two?

[obenland]

the idea would be that we would maintain that 200px within the wp-admin screens as well.

That is already part of D49204-code.

@sfougnier Can you help me understand what the active state for "My Sites" in wp-admin should look like?

[ghost]

Are there any exploration screens I can look at for mobile?

Yes, I have some options here but these need to be tweaked a bit for mobile sizing. I was unaware of the way the hamburger icon is currently being implemented within the Calypso masterbar in wp-admin. I understand the need to retain the logo, but the fact that it becomes the only non-actionable icon in the bar is odd. I'm curious if we can find the best of both worlds with a solution like this?

Can you help me understand what the active state for "My Sites" in wp-admin should look like?

Within wp-admin, the active state would appear consistent with how it looks in Calypso. The background color of the masterbar is #101517, and the active state is #23282D to match the sidebar.

cc @lcollette

[frontdevde]

Noting that the corresponding diff for wp-admin is code-D49342.

Current WIP state of Calypso compared to wp-admin: