WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#31794 closed defect (bug) (fixed)

Theme Switcher: Improve mobile experience

Reported by: ocean90 Owned by: ocean90
Milestone: 4.2 Priority: normal
Severity: normal Version: 4.2
Component: Customize Keywords:
Focuses: Cc:

Attachments (7)

31794.patch (462 bytes) - added by iseulde 4 years ago.
IMG_1804.PNG (71.8 KB) - added by iseulde 4 years ago.
31794.2.patch (1.1 KB) - added by iseulde 4 years ago.
31794.3.patch (1.1 KB) - added by iseulde 4 years ago.
31794.4.patch (812 bytes) - added by iseulde 4 years ago.
31794.5.patch (1.1 KB) - added by iseulde 4 years ago.
31794.6.patch (771 bytes) - added by ocean90 4 years ago.

Download all attachments as: .zip

Change History (42)

#1 @ocean90
4 years ago

In 31912:

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

see #31794.

#2 @ocean90
4 years ago

In 31913:

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

see #31794, #28784.

#3 @ocean90
4 years ago

In 31914:

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

Inspired by [26838].

see #31794.

#4 @ocean90
4 years ago

  • Description modified (diff)
  • Owner set to ocean90
  • Status changed from new to assigned

#5 @ocean90
4 years ago

In 31916:

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

see #31794, #31014.

#6 @ocean90
4 years ago

In 31917:

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

see #31794.

#7 @ocean90
4 years ago

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.

#8 @ocean90
4 years ago

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.

#9 @ocean90
4 years ago

In 31921:

Customizer: Increase initial-scale viewport specification to 1.0.

see #31794, #28784.

#10 follow-up: @ocean90
4 years ago

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!

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

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


4 years ago

#12 @DrewAPicture
4 years ago

  • Keywords needs-patch added; has-patch removed

#13 in reply to: ↑ 10 @helen
4 years ago

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?

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


4 years ago

#15 follow-up: @iseulde
4 years ago

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

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


4 years ago

#17 in reply to: ↑ 15 @ocean90
4 years ago

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

#18 @iseulde
4 years ago

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

@iseulde
4 years ago

#19 @iseulde
4 years ago

Above a screenshot of the problem for the widgets panel.

@iseulde
4 years ago

@iseulde
4 years ago

@iseulde
4 years ago

@iseulde
4 years ago

#20 @iseulde
4 years ago

Please test the last patch, works well here.

#21 @ryan
4 years ago

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.

#22 @helen
4 years ago

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.

#23 @iseulde
4 years ago

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

#24 @helen
4 years ago

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.

#25 follow-up: @iseulde
4 years ago

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

#26 @DrewAPicture
4 years ago

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

#27 in reply to: ↑ 25 @ocean90
4 years ago

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

#28 @ocean90
4 years ago

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

#29 follow-up: @ryan
4 years ago

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

#30 in reply to: ↑ 29 @ocean90
4 years ago

Replying to ryan:

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

Moved to #31963.

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


4 years ago

#32 @ocean90
4 years ago

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.

#33 @DrewAPicture
4 years ago

  • Keywords needs-patch removed

@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?

#34 follow-up: @helen
4 years ago

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.

#35 in reply to: ↑ 34 @DrewAPicture
4 years ago

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

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!

Note: See TracTickets for help on using tickets.