Customizer: theme switcher navigation streamlining

[folletto]

The upcoming ​customizer theme switcher has the navigation that while works well in term of information hierarchy with a slide in the opposite direction, has the various navigation element a bit mixed in terms of navigation (arrows directions, headers).

This ticket aims to address these issues.

[folletto]

Initial status of the customizer theme switcher

[folletto]

Customizer: Theme Switch i2 concept — Basic

[folletto]

Customizer: Theme Switch i2 concept — Structural

[folletto]

Customizer: Theme Switch i2 concept — Structural, with Screenshots

[folletto]

Source Sketch File

[folletto]

Ok, added two (and an half) concept here:

• Basic — this is a minimal one in terms of impact. Not much clearer, but just changing the arrow to a button has a great impact on clarity, and doesn't mandate any specific direction, allowing us to do the animation we need.
• Structural — this I feel could be way way better, because you see what changed and what toggles the change between the two screens, and also keeps the bar at the top stable. This however also requires a minor change to the "title" to keep the pieces taking less vertical space overall.

Also, a variant of Structural with screenshot. :)

Feedback? :)

[celloexpressions]

I prefer the first concept, although the button styling doesn't really fit with the Customizer. What if we just put the text "change" directly inline in the styling of the panel arrows?

The second two use too much vertical space, since most users won't need to change this frequently and it lives at the top. But I think my preference would be to use the third version for the styling in the panel, with the active theme + screenshot + Customize button highlighted above the search, and not showing the active theme below. The active theme could still link to the details view there, but that's probably unnecessary.

[celloexpressions]

More Customizer-inspired change button on the theme heading

[folletto]

Iteration 3 — Basic approach revised with "Change" button in style.

[folletto]

Iteration 3 — Structural approach, with slimmer footprint

[folletto]

Iteration 3 - Structural With Screenshot, slimmer approach

[folletto]

All good points. Gone for a quick iteration (i3) as the above, to see how they feel.

I have a slight preference for the "Structural Approach i3" without screenshots because feels cleaner and keeps the top customizer bar unchanged, while creating the toggle effect.

[celloexpressions]

[31533] is in, so now we can patch this directly in core.

[celloexpressions]

31289.diff​ seems like the most reasonable approach based on our discussion in #core-customize, see lots of screenshots there.

[johnbillion]

Does the layout handle long theme names (and long translations of "Change", "Preview", and "Previewing") ok?

[celloexpressions]

Remove previewed theme from the grid, remove redundant back arrow button.

[ocean90]

Replying to johnbillion:

Does the layout handle long theme names (and long translations of "Change", "Preview", and "Previewing") ok?

It doesn't, see 31289-long-name.png​.

[celloexpressions]

@sheri had come up with a solution for the long titles I think, want to clean it up and add it to 31289.2.diff​ here? I think forcing ellipsis or just cutting it off at the end of one line will be the best approach, since the button gets weird if it goes over multiple lines.

[designsimply]

Adjusted to accommodate long theme names, left the rest as-is.

[ryan]

31289.3.diff on iPhone 6+

[ryan]

31289.3.diff on Nexus 5

[ryan]

Figuring out the Change/Customize toggle took me awhile, even though I've looked at all of the mockups on this and other tickets and knew it was in the works.

The ride is pretty rough on my iPhone 6+, with or without the patch. I did some live feedback in #core-customize. Some stuck scrolling and buttons that require multiple taps.

​https://wordpress.slack.com/archives/core-customize/p1426712697000223

[designsimply]

Fixes the "Customize" button heigh problem from Ryan's iPhone 6+ screenshot.

[designsimply]

I think this experience is improved compared to trunk and the updates here should go in with 4.2. I think 31289.4.diff is ready for commit.

[ocean90]

31289.4.diff​ adds ellipsis to #customize-controls h3 but I don't get these, see 31289-no-ellipsis.png​. The button label is also not vertically aligned.

[DrewAPicture]

Running pretty short on time at this stage in the cycle. Seems like we still need a patch refresh to get this over the finish line. Any takers?

[ocean90]

The current patches doesn't convinced me, basically because of a missing back button. I think the only thing we should do is the "Change" button, see customizer-themeswitcher-i3.png​.

See also a comment by @helen: ticket:31791:10.

[ocean90]

#31838 was marked as a duplicate.

[ocean90]

In 31975:

Customizer Theme Switcher: Navigation streamlining.

• Detach Themes section from other controls
• Move to buttons to navigate back and forth
• Change titles based on current theme status, active/previewing
• Hide the active/previewing theme from the list of available themes

props folletto for the design concepts.
props designsimply, celloexpressions for initial patches.
props Team Gandalf.
see #31289.

[ocean90]

In 31976:

Customizer Theme Switcher: Update JavaScript template after [31975].

see #31289.

[ocean90]

Closing as fixed for 4.2.

[ocean90]

In 32087:

Customizer Theme Switcher: Fix tabbing order if section is open.

see #31289.