Theme Switcher: Improve mobile experience

[ocean90]

@ryan spotted some issues on mobile devices, let's fix them.

• https://core.trac.wordpress.org/ticket/31289#comment:16
• ​https://wordpress.slack.com/archives/core/p1427472548000863
• ​https://wordpress.slack.com/archives/core/p1427391330000663
• ​https://wordpress.slack.com/archives/core/p1427504927001095

[ocean90]

In 31912:

Theme Switcher: Don't hide action buttons on narrow screens.

see #31794.

[ocean90]

In 31913:

Customizer: Use responsive button styles if screen is max-width 640px.

see #31794, #28784.

[ocean90]

In 31914:

Theme Switcher: Opening themes details modal shouldn't require two clicks on touch devices.

Inspired by [26838].

see #31794.

[ocean90]

In 31916:

Customizer: Fix selector for container which includes the controls. Broken since [30102].

see #31794, #31014.

[ocean90]

In 31917:

Customizer: Increase size of search field and disable text size adjustment to prevent auto zooming.

see #31794.

[ocean90]

In 31918:

Theme Switcher: Use the global panel back button instead of adding a new one.

This ensures the back button is visible on iOS devices. Same as in [29610].

see #31794.

[ocean90]

In 31920:

Customizer: Fix calculation of panel positions when accessing via deep-links.

Make sure that the parent li is shown before attempting to calculate its position.
Improve also the logic for focusing on a panel to prevent focusing hidden elements.

props westonruter.
fixes #31014.
see #31794.

[ocean90]

In 31921:

Customizer: Increase initial-scale viewport specification to 1.0.

see #31794, #28784.

[ocean90]

Remaining issues:

• iOS: Each button/input field requires two taps as soon as the themes panel is visbile. We could bind the events to touchend too which makes them work on the first tap, but it's hacky. It works on other screens, so why not in the Customizer?
• iOS: After clicking the button "Live Preview" of a theme the theme switcher doesn't work when trying to open the section again. CSS classes are added, but the panel doesn't slide. (​https://cloudup.com/iQXjUTQ7IZj)

Help appreciated!

[helen]

Replying to ocean90:

• iOS: After clicking the button "Live Preview" of a theme the theme switcher doesn't work when trying to open the section again.

I got stuck in this issue the other day even after reloading the customizer, noticed that the theme switcher panel would appear if I went to preview and then back to customize. Paint issue? Position issue?

[iseulde]

For the second issue, the preview-only class is not added, so you end up in the customize section instead of the preview section?

[ocean90]

Replying to iseulde:

For the second issue, the preview-only class is not added, so you end up in the customize section instead of the preview section?

The class is only added if you click on the Preview button. There is currently now way to toggle the preview mode after a page refresh. We can create a new ticket for this, but the main issues are in comment:10.

[iseulde]

I suspect the problem is the animation. The widget panel is also broken sometimes on iOS. Removing the animation seems to fix it.

[iseulde]

Above a screenshot of the problem for the widgets panel.

[iseulde]

Please test the last patch, works well here.

[ryan]

Widgets seems back to rights on my iPhone 6+ with 31794.5.patch.

The theme switcher has some issues. Tap Change. Next, tap Customize. Customize requires two taps to actuate. Tap Change again. The theme images do not load. They loaded the first time Change was tapped, but not the second time.

[helen]

Yeah, there still seem to be some issues with iOS Safari not recognizing a given area as actionable/active - I wonder if the double tap and disappearing screenshots may be related in a way. I'm going to go ahead and commit the removal of animation on iOS, and we will continue to investigate the other issues.

[iseulde]

@boren: patch is to fix the panels not moving, the rest is still a mystery. :)

[helen]

In 32103:

Customizer theme switcher: Fix some esoteric breakage in iOS Safari.

This manifested in only being able to switch your theme once in the customizer before the "Change" button would appear to stop responding, though a switch to "Preview" and back to "Customize" would reveal the theme switcher after all. Animated positioning appears to be the problem here. The animations are not critical to the experience, particularly on touch+smaller screen devices.

props iseulde.
see #31794.

[iseulde]

The problem with the missing screenshots is that, the second time, there's only data-src, not src...

[DrewAPicture]

Any progress here on diagnosing the double-tab issue? Is that and the disappearing screenshots the last remaining issues?

[ocean90]

Replying to iseulde:

The problem with the missing screenshots is that, the second time, there's only data-src, not src...

See ticket:31793:13.

[ocean90]

31794.6.patch​ fixes the double tap issue for Preview and Customize buttons… Doesn't fix buttons in theme details modal.

[ryan]

On an iPhone 6+ with .6.patch, double tap issues for Preview and Customize are resolved. I don't see any widgets regressions. That leaves, as mentioned above, the screenshots issue and double tap of the dismiss button in the theme details modal (the dismiss button is misaligned on iPhone5 and 6+, correctly aligned on Nexus 5).

[ocean90]

Replying to ryan:

the theme details modal (the dismiss button is misaligned on iPhone5 and 6+, correctly aligned on Nexus 5).

Moved to #31963.

[ocean90]

In 32127:

Customizer Theme Switcher: Use text input for the search field to prevent double tap issues for Preview and Customize buttons on iOS.

see #31794.

[DrewAPicture]

@ocean90 @helen Following the last commit here, the experience seems to finally meet with expectations in iPhone 5 and 6 for me. Can we call we this fixed?

[helen]

Still have double tap buttons in the theme details modal header (previous/next/close) when within the theme switcher/customizer. I think it's okay to split that out and fix in point release or even 4.3 - it's definitely frustrating and I do not like to make users think that their first tap was "wrong", but I don't consider it a blocker. I drilled down into a reproducible test case for what the previous commit seems to be working around, but we can leave it the way it is now as I haven't tested the fix within the customizer and it's not inherently terrible to have it as a text input instead.

[DrewAPicture]

Replying to helen:

Still have double tap buttons in the theme details modal header (previous/next/close) when within the theme switcher/customizer. I think it's okay to split that out and fix in point release or even 4.3 - it's definitely frustrating and I do not like to make users think that their first tap was "wrong", but I don't consider it a blocker. I drilled down into a reproducible test case for what the previous commit seems to be working around, but we can leave it the way it is now as I haven't tested the fix within the customizer and it's not inherently terrible to have it as a text input instead.

Opened #31980 for the double tap issue.

Calling this fixed for 4.2. Thanks for the work everbody!