Theme Switcher: Missing back button and marking active theme

[pavelevap]

1) Missing back button

• Go to Customizer, current active theme is Twenty Fifteen.
• I want to test another theme, so clicking "Change" button.
• Select another theme, click Preview.
• I do not like this new theme and want to go back to customize active theme (Twenty Fifteen). But there is no way to do it? There should be a "Back" button or any other easy way. I can click "Change" and once again select active theme, but it is one more click and maybe I will have to scroll down and find which theme was active. I am a little bit lost and I have to close Customizer and go back from admin menu. Not very user friendly...

2) Active theme is not highlighted

• I can click "Change" and once again select active theme, but there is no indication which theme is really active? I have more than 10 themes installed and I am not sure which is active. It was Twenty Fifteen or one of my child themes? There is "Live Preview" for all of them, but my active theme should have "Customize" message and should be highlighted somehow? I am a little bit lost and I have to close Customizer and go back from admin menu. Not very user friendly...

[ocean90]

Related: #31289

I agree that there should be an easy way to revert to the active theme, which doesn't require searching the active theme first.
There shouldn't be an extra button. What about pushing the theme to the top in the theme browser and change the button label to whatever?

This isn't a critical bug, so making it an enhancement, which probably can be punted too.

@folletto and @celloexpressions: What do you think?

[folletto]

Agree this can be moved to a next version, that said I also feel this pain. I'd have to test this properly, however an approach could be that activating a theme reverts the "Activate" label to "Undo": the benefit is that the scrolling point is preserved in the customizer (if I was at theme 6 out of 100 I'm still there) and I can still undo that change right there. It's also hopefully a low impact change, since the logic to trigger the different "selected" state should already be there. :)

[pavelevap]

I did not thought about special extra button, but classic back button (left arrow) which is used at the top of Customizer (for example navigate from Widgets back to main Customizer). But I am not sure about the best solution, I only wanted to go back and it was not possible...

[celloexpressions]

To get back, just close the Customizer and reopen - unsaved changes would be gone at this point anyway. The only potentially viable thing for 4.2 at this point would be a visual indicator for the active theme I think.

[DrewAPicture]

I agree the "active theme" part of this ticket can be punted.

Replying to celloexpressions:

To get back, just close the Customizer and reopen - unsaved changes would be gone at this point anyway. The only potentially viable thing for 4.2 at this point would be a visual indicator for the active theme I think.

That's not really an acceptable solution, in my opinion. The entire hierarchy argument is that the theme switcher is "above" the Customizer, and that ends up being fairly pointless when you realize you can slide "backward" to the theme switcher but not "forward" back to the Customizer.

I think the experience we should be aiming for is not unlike panels, where the close button is only available in the main Customizer view.

This is crude illustration of the hierarchy as I understand it should work:

|>	Theme Switcher (forward button, no close)
	|x 	Default Customizer view (close button)
		|<	Widgets panel (back button, no close)

[folletto]

This is crude illustration of the hierarchy as I understand it should work

As I detailed in the various proposal to streamline navigation in #31336, I'd avoid if possible that approach because it overloads one UI element to do two things (close and back).

If you see the various mocks in that ticket, the idea would be to keep the × always an ×, while move the navigation for the actual sliding panels somewhere else (i.e. the headers) thus avoiding that oveloading.

To be clear: I'm not saying it's a clear cut thing, overloading isn't super bad, it's just more complicated to understand and prone to errors (i.e. back, back... ops, I lost all the changes). :)

[pavelevap]

Replying to DrewAPicture:

That's not really an acceptable solution, in my opinion. The entire hierarchy argument is that the theme switcher is "above" the Customizer, and that ends up being fairly pointless when you realize you can slide "backward" to the theme switcher but not "forward" back to the Customizer.

Interesting, I tested this feature for the first time in RC1 and I did not think about it in this way. I would expect something like this:

|x 	Default Customizer view (close button)
        |<	Live Preview of selected theme (back button, no close)
	|<	Widgets panel (back button, no close)

For me (as a user) it makes sense, and it is a natural part of current Customizer sections (all buttons are expected and easily used). But anyway, current situation is very misleading for users.

[pavelevap]

I expected something like this (first screenshot): ​https://wordpress.org/plugins/customizer-theme-switcher/screenshots/

[helen]

I think we do need a way to reset back to the current active theme - refreshing the customizer keeps the previewed theme and without the context of the text change from active to preview, it's a little tricky to figure out what's going on.

[folletto]

Can anyone post a screenshot of the current theme switcher sidebar so we can discuss more visually? ;)
(also, in general, let's try to add screenshots in any discussion that is UI related)

[DrewAPicture]

@folletto: Added theme_switcher_current.jpg​ to illustrate the current flow.

From left:

1. View after opening the Customizer
2. View after clicking the "Change" button
3. View after clicking to "Live Preview" the Twenty Eleven theme
4. View after clicking the "Change" button

[valendesigns]

Unfortunately, the latest patch is not working for me. Which seems potentially like a JavaScript issue. When going back to change themes the active theme shows a "Customize" button, but nothing happens when I click it.

Additionally, should the preview URL go back to the active theme and not close the customizer? Seems like this would be the proper UX when the button implies you're going to customize your active theme. If that's the case we should change line 1305 so it adds the theme arg to the preview URL instead of removing it.

$preview_url = esc_url( add_query_arg( 'theme', $this->theme['id'], $current_url ) );

[ocean90]

Replying to valendesigns:

Unfortunately, the latest patch is not working for me. Which seems potentially like a JavaScript issue.

The patches are unfinished, see ​https://wordpress.slack.com/archives/core-customize/p1429648082000486.

[valendesigns]

@ocean90 I missed that thread when I read over the comments. Thanks for pointing it out. Is there anything I can do to help?

[valendesigns]

Just uploaded patch 32002.3.diff​. Please test and let me know if this is a solution that can move us forward. Cheers!

[valendesigns]

Patch 32002.4.diff​ fixes a few things that were discussed in Slack.

[stephdau]

Tested 32002.7.diff. I like the behavior quite a bit.

[folletto]

Screenshots? ;)

[ocean90]

In 32264:

Don't return empty themes in wp_prepare_themes_for_js().

see #32002.

[ocean90]

In 32265:

Theme Switcher: Provide an easier way to reset back to the current active theme.

• Add control for the active theme when doing a theme preview
• Highlight an active theme and move it to the top

props valendesigns, ocean90.
fixes #32002.