Nav Unification: Color Schemes #45675
Comments
cpapazoglou
added
[Feature] Calypso & wp-admin Navigation
|
@sixhours @sfougnier I saw you're looking at color schemes (pc6Vrl-6j-p2#comment-113). Is there another ticket where this is already tracked? |
|
@obenland I don't believe so. I asked Kurt to get some data about dashboard color scheme usage in Calypso and I have that in a spreadsheet. Lynn and/or Saul may have additional context to add from a design perspective. |
|
@obenland To my knowledge, this is not being tracked in another ticket. Lynn had taken this on earlier in the week, but I am not sure about any progress on that. |
|
Great! Feel free to use this one as need to consolidate discussions/experiments around it |
obenland
added
the
[Status] Needs Design
|
I apologize for missing this earlier and the slow response! The systems used for our admin color schemes are different in terms of robustness. While My understanding is that we will need to expand and maintain both systems independently, is that correct? Is there a more efficient manner in which we can share our color schemes? Here's a visual of all color schemes currently available within
|
|
Thanks @lcollette! Yeah, we probably just need to create a 1:1 relationship so that you see all of the color scheme options no matter whether you got to the wp-admin or the Calypso settings screen. Maybe we just need to make sure that both a 3-4 color swatch and a 15+ color swatch exist for every admin color scheme across both wp-admin and Calypso? That way if you're viewing a wp-admin screen the 3-4 color swatch is used, and if you're viewing a Calypso screen, you'd be using the 15+ color swatch? Definitely open to ideas on this one. cc @obenland |
This seems ideal, because it means maintaining one repository of color schemes instead of 2, but there's probably a heavier technical lift upfront. We could:
The difficulty comes in matching which color value applies to which selector, since they're not always going to line up. That's going to be a manual process no matter how we accomplish this, though. |
|
@davemart-in Two questions that came to mind when looking into this:
|
|
These are good questions. @lcollette and @sfougnier I'd love to hear your thoughts.
If we plan to use https://wordpress.com/me/account as the combined home for color schemes moving forward, then the changes should probably apply account-wide, since the me section is account-wide, not site-wide.
From my perspective, the Calypso color scheme should be the baseline, meaning that for wp-admin color schemes we'll have to select colors for these additional variables like button color. On Calypso screen we can then use these color variations since they will be available on all admin color schemes. On wp-admin screens we won't have coverage for things like button color in the v1 launch, but we could certainly consider updating wp-admin to use these additional colors in a v2. |
I believe so. Setting the colors of my admin panels once for all of my sites makes more sense, to me, than independently on each site. What is the use-case for setting a color scheme at the site level?
I agree with @davemart-in. Calypso's color schemes are a bit more robust and should be the baseline. At a base, we're looking at the following variables for our merged schemes:
@sixhours Does this look right to you? |
I guess mainly Jetpack support where all sites can already be preconfigured in different ways (as we don't block the settings screen for them like we do for dotcom) and the user might manage multiple sites, each with a different color scheme. This could be messy. Account-wide option makes more sense but might be trickier to pull off with non-dotcom sites. |
I remember some discussion around this when color schemes were introduced in Calypso. IIRC one argument for color schemes on a site level from the user's perspective was that multi-site admins would use it to clearly distinguish which site they are on based on the color of the admin interface i.e. to prevent posting / changing settings on the wrong site. |
Just to double check: does that mean we'd remove the ability to set color schemes anywhere else in wp-admin?
What I hear you saying is that in Calypso we'd want to keep color schemes affecting more than main nav / sidebar. For v1 we'd accept the difference that in wp-admin less parts of the UI are affected by the same color scheme. For a v2 in wp-admin we might consider color schemes impacting more than main nav / sidebar (rather than reducing the impact of color schemes in Calypso). Is that correct? |
This sounds like the cleanest option to me. Moving forward if someone wants to set a color scheme, they'll need to do it within Calypso and it would apply account-wide.
Yep! That's what I'm proposing. |
|
As per the discussion so far in this thread, going forward the color schemes setting would: Given that the Calypso setting would be the single source of truth going forward, we were wondering the following on our planning call yesterday: Should existing admin color scheme be completely disregarded i.e. starting with this change should wp-admin show the default color scheme until a color scheme is set via Calypso? While we could look at the existing wp-admin admin color scheme selection initially, the issue we'd face would be that currently a user could have set multiple different admin color schemes for different sites. |
|
I do worry that we may be overcomplicating things here. I also worry about hiding Core WP functionality. Here's one alternate proposal to what you've outlined above @frontdevde. What if:
Here's how I envisions this working:
So wp-admin always overrides calypso, which always overrides the default color scheme. As an example, if someone has 2 sites (Site A, Site B), they have the Calypso color scheme set to Midnight, and Site B has it's wp-admin color scheme set to Coffee, then Site A would use Midnight and Site B would use the primary colors from Coffee and fallback to default color scheme colors for things like button color. This way we don't have to deprecate anything and the nav change should be pretty seamless for everyone. If someone has a wp-admin color scheme set, they'll see that across all screens. Thoughts on this approach? @rickybanister, @lcollette, @sfougnier, @obenland, @frontdevde |
|
Thanks for your input here!
I agree we shouldn't, sorry if I did. Personally, I don't hold strong opinions on any of this. All I was trying to do here was for us to get to a shared understanding of what Ajax needs to implement for the v1 of nav unification. To that end, I just tried to summarise the input in this thread from y'all (not mine) so far and in addition state the question that came up in the planning meeting.
Apologies if I misunderstood! I might have misinterpreted your reply here. I have to admit that now I'm a bit unsure as to what we do keep or don't keep in terms of Core WP functionality?
What I hear you saying is the Calypso selection applies account wide unless the user has a wp-admin color scheme selected for a specific site. Given the way color schemes work in Calypso right now (account wide), wouldn't this mean for site B, wp-admin would show Coffee and Calypso would show Midnight? And in turn with a unified nav the user interface switching colors between navigation items?
What I hear you saying is we retain their existing wp-admin selection. Do we also retain/reintroduce the option for users to switch color schemes within wp-admin? |
Sorry if my comment came off directed at you. That wasn't my intention! If anything, I was suggesting that my original proposal was starting to feel overly complicated.
Yep, I very much appreciate that! I went and messed things up by presenting a different option. :-P Sorry to add confusion to the mix! I think we're after the same thing - to make sure that the plan we settle on is the best possible long-term solution.
Nope, again that is what I had proposed originally, but then I started to have second thoughts about it. That's on me, not you.
That's correct.
We'd need to figure out a way to signal to the Calypso Nav to use the Coffee color scheme so that both Calypso screens and wp-admin screens use the same color scheme.
Yep, we'd leave both the existing Calypso color options (which would apply account-wide and override the default color scheme) and the wp-admin color options (which would apply site-wide and would override the Calypso color scheme). |
Thanks for your reply, that clarifies things a lot! Just to double check (😅), what I hear you saying we implement is:
Are these assumptions correct? Anything missing?
At the moment Calypso color schemes apply account wide. What I hear you saying is that for instances where a site has a wp-admin color scheme set that differs from the Calypso setting, we'd need to deviate from that pattern? Which means we'd need to look into / solve applying Calypso color schemes on a per site basis? -- Another question that comes to mind: In the current setup as I understand this, both settings continue to exist independent of each other. Meaning that similar to how it works right now, changing one doesn't affect the other. Is that assumption correct? I guess they can't be connected as one is account wide and the other is site specific. To stay with your example above changing the color scheme of site B in wp-admin or Calypso to any theme other than Coffee or Midnight would only change said setting and not the setting in the other interface. If I understand correctly, this would mean that if you only have one site with a color scheme set in wp-admin, changing the color scheme in Calypso wouldn't have any visual impact for you because the wp-admin setting overrides the Calypso setting. This could be quite confusing to the user. |
|
Another issue I discovered that would need to be solved for nav unification: Calypso color schemes only apply once the site is loaded. This means app shell as well as the site in general appear in the default color first then switching to the selected color scheme colors when the page has loaded. Currently this is less obvious because it only appears once when opening wp.com. With the unified nav we'll be switching between interfaces though, which would result in flashes of default colors frequently. So we'll definitely need to address this too for nav unification. |
|
With all the above in mind, thinking out loud here: What if we go all the way and make color schemes a site specific setting in Calypso too? There's never a good time to introduce changes like this to our users. Maybe though this would be the best opportunity we get to unify this setting given that we're introducing significant changes to the visual appearance anyway. The main advantage would be that it'd be consistent between wp-admin and Calypso, it could be unified. The disadvantage that it'd have to be set per site (but that's already the case in wp-admin). We could move it out of the /me section. To alleviate the initial confusion we could leave a notice in /me account settings to explain where the setting went and why. Again, just thinking out loud here. Not sure this would be a viable option. |
Nope. I'm proposing we just keep the Calypso color schemes we have now and keep the wp-admin color schemes we have now. No need to merge anything.
Yep.
Yep
Yep
Yep.
Yep!
I didn't know this. Yes, this would be great to remedy, but it's probably not a blocker. Let's play with it once we have everything coded up and see how it feels.
Unfortunately we can't do this. Calypso color schemes are located within the Me section which is all account specific. When you make changes in Me they apply to all of your sites. There is no site selection mechanism.
Happy to consider this as a separate project after the v1 ships. It sounds like it has the potential to be a rabbit hole of a project and we can't really risk adding to the scope of this already XL project for the v1 launch. |
Unless I'm missing something, this would mean things staying more or less as they are now? If that suffices for the v1 that's completely fine by me, just double checking! Applying this to your example from above:
Given that we keep color schemes as they are, Coffee wouldn't be present in Calypso. For Site B this would result in Calypso being themed in Midnight and wp-admin being themed in Coffee. That is the case right now. It's less of an issue at the moment because the two interfaces are clearly distinct, the color difference just being one more difference. With the nav unification though, we're aiming to remove most of the differences and make the two interfaces match each other. So with the unified nav, switching from e.g. "Posts" to "Feedback" would result in a sudden color change while the rest of the UI stays (mostly) the same. Could you confirm whether that experience is OK for v1? |
Yep, that is the goal! Reduce scope. :-) The thing we'll need to focus on is somehow communicating to Calypso screens if a wp-admin color scheme is set.
That is NOT okay for the v1. :-) What I'm suggesting is that whenever a Calypso screen is loaded, we'll need to figure out a way to check to see if a wp-admin color scheme is set. It it is, it should override any Calypso or default color scheme that is set. In that sense, with the Site B scenario above, you'd see the Coffee color scheme despite whether you are on a Calypso screen or a wp-admin screen. Does that make sense? |
|
I haven't followed all of this closely, but I'm curious why we need to retain any part of the wp-admin per site color scheme UI? We override or extend lots of parts of wp-admin/WordPress within WordPress.com, couldn't we consider the multisite nature of WordPress.com as the system of record and extend a single color scheme across a person's entire network of sites? Are there any benefits to per-site color scheme variations? If there were, wouldn't we have implemented Calypso's color schemes the same way? I see this as a 'user preference' not a site preference. We could at least confirm that with a couple of users that have actually set a color scheme preference in either place. |
I caught the drift and I'm glad we're looking to reduce scope for a v1 of the overall complex project. 👍
I understand! I might be missing something but what I'm trying to say is that if we don't reproduce all color schemes on both ends, there is no point in Calypso knowing whether a wp-admin color scheme is set or not. Looking at the following state in the example you outlined:
IIUC this wouldn't work if we don't also introduce the Coffee color scheme in Calypso. Even if we make Calypso aware of the Coffee selection in wp-admin there wouldn't be any Coffee color scheme to apply in Calypso. The color schemes work differently between the two interfaces, it's not just a case of applying the same styles from one interface in the other. In order to do what you've described, I don't see a way around replicating all themes on either end. Again, this is based on my current understanding of how color schemes work in both interfaces and I could definitely be missing something here! |
|
From a user perspective, Option 2 is less ideal for this reason:
As it is, going between Calypso and WP-admin UI feels weird. If we introduce color variation on top of that, it may feel like a bug to our users. If site-specific color schemes are a necessary user feature, perhaps as a fast-follow project, we can explore adding that functionality into Calypso?
@sixhours should be included as well. |
|
@davemart-in @rickybanister @lcollette @sfougnier @sixhours @obenland On a sync call, @getdave and I just tried to summarise all existing decisions and amendments in the issue description above. We also added a FAQ section where we can continue to add answers to commonly asked questions. This effort aims to create a single source of truth for Color Schemes, collecting all decisions in one place. In the future, it will also allow folks to get the complete picture without reading the whole thread. The scope outlined in the description above reflects the decisions made on our Sync Call on Oct 22nd and mostly equates to Option 1 outlined by @davemart-in minus the one-time script (see FAQ above). It'd be amazing if you all could take a look at the issue description and a) sign off on the scope or b) suggest changes now. With a defined scope agreed on, @Automattic/ajax will then be able to work towards a clear target for v1. Thank you! |
|
@frontdevde, @getdave, @rickybanister @lcollette @sfougnier @sixhours @obenland I reviewed your proposed amendments and agree that Option1 is the best path forward. 👍 |
Proposed Amendment - Renaming Calypso schemes to avoid name conflictBoth Calypso and WP-Admin have schemes named ocean and midnight.
|
|
My votes: aquatic and nightfall |
Nightfall unfortunately already exists as a color scheme in Calypso. @marekhrabe suggested Moonlight? |
|
The two But for the |
|
Midnight on Calypso vs wp-admin:
|
|
Based on the above, I'd suggest the following amendments:
To get an idea of how many users would be impacted by either change, @kurt213 was so kind to provide us with the relevant data in slack-CJS75TX3R/p1604940116113100?thread_ts=1604935409.097600&cid=CJS75TX3R For the Edit: implementation details here #47256 (comment) |
|
I'd ship |
|
Recently there's been some confusion around which design we should be aiming for with v1. Our efforts so far have been mainly focussed on making the visual look reflect the Most recently a new design exploration With all this in mind, @Automattic/ajax discussed that for v1 of nav unification we will continue to focus on To surface this decision prominently and make sure we're all on the same page, I'm adding the decision as follows to the issue description above (as well as to the Nav Unification main issue):
I hope I captured the discussions well and in everyone's interest. Please let me know in case I got anything wrong here. |
lcollette
removed
the
[Status] Needs Design
|
@cpapazoglou @frontdevde Can this one be closed now? |
|
I just added one last PR Automattic/jetpack#18150 and we should revisit 554-gh-Automattic/wpcomsh |
Summary of decisions and agreed on v1 scope - Tue, Oct 22:
Color schemes are managed via Calypso only - Moving forward, admin color schemes are managed exclusively via the Account Settings in the Calypso /me section.
Color schemes apply account wide; site specific admin color schemes effectively no longer exist - Both wp-admin and Calypso screens will always have a 1:1 match when it comes to color schemes - either the default, or a preference they choose in the Calypso me section which applies to all (!) of their sites.
Existing wp-admin color scheme selections will be disregarded - Moving forward, existing wp-admin color schemes selections will be disregarded in favor of either the default, or a chosen Calypso preference (for reasoning see FAQ below).
Hide color scheme selector in wp-admin - We'll replace the existing color scheme selector UI in wp-admin with a link pointing to the Calypso admin color scheme settings.
Port Calypso color schemes to wp-admin - In order to show Calypso color schemes on wp-admin screens, we'll need to bring them over and make them available within wp-admin.
Port wp-admin color schemes to Calypso - To reduce friction for users who want to keep the color scheme they were using from wp-admin, we will port wp-admin color schemes to Calypso.
For v1 the visual appearance will be guided by "Nav Unification Project Design i2" - We aim to implement the "Nav Unification Project Design i2" which closely resembles core wp-admin. Future design explorations will be addressed in a v2 and/or will likely involve a core-first approach.
Amendments
Any amendments after Tue, Oct 22 to the agreed scope above are to be listed in this section:
Make new colors available to customers ahead of nav unification launch - We will allow customers to get familiar with the new colours ahead of the nav unification launch by introducing a new non-default Classic Dark color scheme using the nav unification colors (Decision: stakeholder decision in Ajax backlog grooming meeting on Thu Nov 5th.).
Change Calypso Midnight color scheme to match Midnight in wp-admin - There are two very similar themes that share the same color scheme name:
Midnight. As they are too close to be distinct color schemes, we will reduce them to the same color scheme. Staying consistent with core, we will change the Calypso Midnight color schemes to match the Midnight scheme in wp-admin.Rename Calypso Ocean color scheme to Aquatic and add wp-admin Ocean to Calypso color scheme options - There are two quite distinct themes that are share the same color scheme name:
Ocean. To resolve this conflict we will rename the Calypso color scheme toAquatic. We will update existing selections by running a one-time script. Staying consistent with core, we will keep the name for the wp-admin color scheme and will add it to Calypso under the Ocean name.List of known tasks (continuously updated)
Out-of-scope / v2
Any out-of-scope / v2 tasks and features are to be listed in this section:
Make new Classic Dark color scheme the default ahead of Nav unification launch- @rickybanister proposed the idea to introduce the new colours ahead of the nav unification launch by introducing a new default color scheme using the nav unification colors. In the Ajax backlog grooming meeting on Thu Nov 5th @davemart-in made the call that we will not go ahead with this idea due to the additional communication & HE overhead this would likely introduce.Respect wp-admin selection if user has opted into using wp-admin links only In a v2 we could respect existing wp-admin selections for users that have opted into using wp-admin links only (as they would only ever see wp-admin when switching between menu items). This is out of scope for v1 though because the feature won't be available yet at the point we're launching the color scheme changes.
FAQ / Other
Frequently asked questions and other ideas are to be listed in this section:
Why are we disregarding existing wp-admin color scheme selections? With nav unification in place the user will more frequently switch from wp-admin to Calypso and vice versa when navigating between menu items. With this in mind we need to ensure the same colors are showing on either interface, otherwise it would be a pretty jarring experience. Here the fact that the legacy wp-admin color preference applies on a per site basis while the Calypso color schemes setting applies account wide becomes an issue. As a user can have a lot of sites all set to use different wp-admin color schemes, we have decided to disregard existing selections for the sake of consistency with the Calypso account wide setting.
Could we write a one-time script to merge their wp-admin color preferences to Calypso? This is not really an option as the color scheme setting in Calypso applies account wide while the legacy wp-admin color preference applies on a per site basis. A user can have a lot of sites all set to use different wp-admin color schemes. We haven't found a good way to determine which of these to keep for an account wide setting.
Will this affect Jetpack sites? The changes discussed here will only apply to sites on our infrastructure i.e. Simple and WoA sites. Other Jetpack connected sites will not be affected by these changes.
Reference Links
The text was updated successfully, but these errors were encountered: