WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#32002 closed enhancement (fixed)

Theme Switcher: Missing back button and marking active theme

Reported by: pavelevap Owned by: ocean90
Milestone: 4.2 Priority: normal
Severity: normal Version: 4.2
Component: Customize Keywords: has-patch commit
Focuses: Cc:

Description

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...

Attachments (10)

theme_switcher_current.jpg (148.7 KB) - added by DrewAPicture 4 years ago.
32002.1.patch (2.3 KB) - added by ocean90 4 years ago.
32002.2.patch (3.2 KB) - added by ocean90 4 years ago.
32002.3.diff (4.9 KB) - added by valendesigns 4 years ago.
32002.4.diff (4.7 KB) - added by valendesigns 4 years ago.
32002.5.diff (4.7 KB) - added by valendesigns 4 years ago.
32002.6.diff (5.2 KB) - added by valendesigns 4 years ago.
32002.7.diff (4.9 KB) - added by ocean90 4 years ago.
32002.7.diff.png (273.1 KB) - added by ocean90 4 years ago.
32002.8.diff (5.3 KB) - added by ocean90 4 years ago.

Download all attachments as: .zip

Change History (37)

#1 @SergeyBiryukov
4 years ago

  • Milestone changed from Awaiting Review to 4.2

#2 @ocean90
4 years ago

  • Keywords needs-patch added
  • Type changed from defect (bug) to enhancement

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?

#3 @folletto
4 years ago

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. :)

#4 @pavelevap
4 years ago

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...

#5 follow-up: @celloexpressions
4 years ago

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.

#6 in reply to: ↑ 5 ; follow-up: @DrewAPicture
4 years ago

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)

This ticket was mentioned in Slack in #core by ocean90. View the logs.


4 years ago

#8 @folletto
4 years ago

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). :)

#9 in reply to: ↑ 6 @pavelevap
4 years ago

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.

#11 @DrewAPicture
4 years ago

  • Owner set to ocean90
  • Status changed from new to assigned

#12 @helen
4 years ago

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.

#13 @folletto
4 years ago

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)

#14 @DrewAPicture
4 years ago

@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

This ticket was mentioned in Slack in #core by helen. View the logs.


4 years ago

This ticket was mentioned in Slack in #core-customize by ocean90. View the logs.


4 years ago

@ocean90
4 years ago

@ocean90
4 years ago

#17 follow-up: @valendesigns
4 years ago

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 ) );

#18 in reply to: ↑ 17 ; follow-up: @ocean90
4 years ago

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.

#19 in reply to: ↑ 18 @valendesigns
4 years ago

@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
4 years ago

#20 @valendesigns
4 years ago

  • Keywords has-patch needs-testing added; needs-patch removed

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

Last edited 4 years ago by valendesigns (previous) (diff)

@valendesigns
4 years ago

#21 @valendesigns
4 years ago

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

@valendesigns
4 years ago

@valendesigns
4 years ago

@ocean90
4 years ago

#22 @stephdau
4 years ago

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

This ticket was mentioned in Slack in #core by drew. View the logs.


4 years ago

#24 @folletto
4 years ago

Screenshots? ;)

@ocean90
4 years ago

@ocean90
4 years ago

#25 @helen
4 years ago

  • Keywords commit added; needs-testing removed

#26 @ocean90
4 years ago

In 32264:

Don't return empty themes in wp_prepare_themes_for_js().

see #32002.

#27 @ocean90
4 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

Note: See TracTickets for help on using tickets.