Top Bar Alignment and Color Issues

[noahtallen]

Steps to reproduce the behavior

There are some CSS alignment differences when viewing the topbar in Calypso vs on the front-end of a site (all logged-in views). Some are very significant, and some are pretty slight. I would say the mobile front-end view has the most jarring difference, and the desktop differences are more slight.

The difference in color is very obvious though.

1. In calypso, the shade of gray for the top-bar background color is darker than the shade of gray on a site frontend.
2. On front end views, on desktop viewports, there is significantly more left margin on the "reader" button than there is in the Calypso view.
3. On front-end views, on mobile viewports, there is significantly more left margin beside the "my sites" button than there is in the calypso view.
4. On front-end views, on mobile viewports, there is more margin between all buttons than there is in calypso.
5. On front-end views, on desktop viewports, there is more right margin on the profile icon than there is in calypso.
6. On front-end views, there is no "write" button. This is probably deliberate, unlike the other problems, but it is still a difference.

Desktop Calypso:

Desktop Front-End:

Mobile Calypso:

Mobile Front-End:

Browser / OS version

All

Is this specific to the applied theme? Which one?

No

Does this happen on simple or atomic sites or both?

All sites

Is there any console output or error text?

Level of impact (Does it block purchases? Does it affect more than just one site?)

All user logged-in views

Screenshot / Video: If applicable, add screenshots to help explain your problem.

See above

[sixhours]

It looks like the front-end spacing weirdness issue on desktop is specific to P2; my normal simple sites and atomic sites are fine:

On P2, there's an additional invisible menu item in that space, #wp-admin-bar-menu-toggle, that does not exist on normal sites. I'm not sure where it's coming from or what it does (I would have thought it was a mobile menu toggle, but it's invisible on mobile screens, too). In P2's CSS there's a reference to it that seems to suggest even P2 folks don't know what it is:

        // Prevent this invisible toggle from interfering with our
	// mobile menu toggle button when hovering near the edge of the window.
	// (What is this even?)
	#wp-admin-bar-menu-toggle {
		pointer-events: none;
	}

Confirmed this is happening on both internal P2 as well as non-internal P2:

[sixhours]

Aha, it's the core menu toggle for /wp-admin:

I'm not sure why it's showing on P2 sites' front-end but it should be safe to display: none it at the bare minimum.

[sixhours]

In calypso, the shade of gray for the top-bar background color is darker than the shade of gray on a site frontend.

I think this is the expected behavior. In Calypso, the top bar color will change depending on your color scheme, and those won't be reflected on the front end. We could update the default color scheme top bar color to match the front end for closer visual parity, but I don't think we should set the expectation that the front end will match Calypso.

[sixhours]

Related issue: #47386

[sixhours]

Started a PR for the extra left-hand padding in D59796-code

[noahtallen]

I don't think we should set the expectation that the front end will match Calypso

I think my personal expectation would be for that bar to match my color scheme (especially if wp-admin/calypso are being kept in sync now) because it's part of the logged-in management UI

Thank you for looking into this! Glad it's not as wide-spread as it seemed at first.

[sixhours]

I think my personal expectation would be for that bar to match my color scheme (especially if wp-admin/calypso are being kept in sync now) because it's part of the logged-in management UI

@noahtallen That's fair! I've opened a new issue in #51757 since I can see it going both ways and it's not technically a bug.

[sixhours]

Just breaking this out into checkboxes so I can keep track of what's shipped:

• In calypso, the shade of gray for the top-bar background color is darker than the shade of gray on a site frontend. (TBD in Top bar: Should front-end match Calypso color scheme? #51757)
• On front end views, on desktop viewports, there is significantly more left margin on the "reader" button than there is in the Calypso view. (P2 only, reported in Automattic/p2#2443)
• On front-end views, on mobile viewports, there is significantly more left margin beside the "my sites" button than there is in the calypso view - D59796-code
• On front-end views, on mobile viewports, there is more margin between all buttons than there is in calypso (Addressed in Top bar: Spacing tweaks to match front end #51720)
• On front-end views, on desktop viewports, there is more right margin on the profile icon than there is in calypso. (Addressed in Top bar: Spacing tweaks to match front end #51720)
• On front-end views, there is no "write" button. This is probably deliberate, unlike the other problems, but it is still a difference. (Deliberately hidden on P2 only, asked about it here: Top Bar Alignment and Color Issues #49154 (comment))

[sixhours]

The absence of a Write button on the front end is also specific to the new P2 (not older versions); normal site:

P2:

This was introduced by @mirka about a year ago in Automattic/p2#115, maybe they know why we're hiding it for P2?

[mirka]

This was introduced by @mirka about a year ago in Automattic/p2#115, maybe they know why we're hiding it for P2?

Right, this was a deliberate design choice to encourage use of the front-end editor. And also to not confuse those who are unfamiliar to WP with two different editors.

[kwight]

All of the user-facing issues have been fixed – there's one remaining P2-specific issue being tracked and handled by that team. Closing.