Site Editor: "Edit Template" links unresponsive on mobile browsers (iPhone & Android)

[mrfoxtalbot]

Description

Using the plugin (18.6.1) ellipsis buttons are unresponsive .

This happens with various mobile browsers but only on iPhone. Android works fine.

Step-by-step reproduction instructions

1. Go to Appearance > Editor on an iPhone
2. Try clicking on any of the ellipsis buttons ⋮ and notice how they do not work.
3. On the Templates section, the drop-down menu does show, but the Edit button does nothing.

Environment info

Gutenberg 18.6.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[priethor]

Thanks for reporting, @mrfoxtalbot!

Unfortunately, I don't have an iPhone to further test.

• Can you name other browsers that experience this issue?
• Can you reproduce it with WP 6.6-rc1 without the Gutenberg plugin?

[annezazu]

Thanks for reporting! I think this is related to the following: #62649 & #62878 The edit button does nothing because it can't properly load things as per #62649

[ironprogrammer]

I was able to reproduce this issue with the Edit links, in addition to the template selection and navigation issues cited above.

WP nightly (6.7-alpha-58585) without GB is also affected.

Reproduction Report

Environment

• Hardware: iPhone 14 Pro, MacBook Pro Apple M1 Pro
• OS: iOS 17.5.1, macOS 14.5
• WordPress: 6.5.5 (+ Gutenberg), 6.7-alpha-58585
• Browser: Safari, Chrome
• Theme: Twenty Twenty-Three, Twenty Twenty-Four
• Active Plugins:
  • Gutenberg 18.3.0 - 18.6.1

Actual Results

• ✅ On mobile-width viewports (on device or with a narrow desktop browser window), in Appearance > Editor > Templates, tapping the Edit link under each template's "kabob" menu has no effect.

Supplemental Artifacts

6.7-alpha-58585 (without Gutenberg) - iPhone

wp-nightly.mp4

6.5.5 + Gutenberg 18.6.1 - iPhone

gb-18-6-1.mp4

[mrfoxtalbot]

@priethor, it looks like we can reproduce this, yes.

[ramonjd]

I think I have a fix here:

• Site Editor: patterns and templates cannot be edited from sidebar mobile view #63002

Just confirming, if the fix is kosher, it should be backported to WP 6.6 RC?

[ramonjd]

Just confirming, if the fix is kosher, it should be backported to WP 6.6 RC?

Just checked WP 6.6 RC 1 and "yes" - it's currently broken there 😄

[annezazu]

Yes please let's fix for 6.6 :D

[ramonjd]

This bug has revealed that the site editor is pretty unusable in mobile viewport widths.

1. Editing templates/patterns doesn't work. We know this and can fix it, but navigating back to the Site Editor sidebar using the WP logo crashes the browser.
2. Aside from the browser back button, there's no way to return to the main menu, and therefore it's difficult for users to switch between templates, patterns, styles etc
3. The patterns sidebar is inaccessible. Mobile users will land on the "All patterns" page, but from there, can't access template parts.

Edit: I'll try to fix point 1 so that it's not as broken, but I think it would be helpful to look at the UI/UX for 2 and 3.

[ramonjd]

Aside from the browser back button, there's no way to return to the main menu, and therefore it's difficult for users to switch between templates, patterns, styles etc

I hacked together a quick fix for this. It's not as important as #63002 I think.

Kapture.2024-07-02.at.12.29.47.mp4

I can throw it up later to get some design eyes on it.

Edit: Oh! I see there's an issue for it #62878

[mrfoxtalbot]

I can still reproduce this on mobile browsers with 6.6-RC3 if I have the Gutenberg plugin active (18.7.1)

This affects these two other bugs (they are essentially the same):

• Site Editor: Unable to select specific template on mobile #62649
• Navigational dead end on smaller viewports #62878

Record_2024-07-15-14-49-38.mp4

@ramonjd, could we review this and/or clarify if this is intended? Thank you!

[jartes]

I'm able to reproduce this as well with:

• WordPress 6.5 and 6.6-RC3
• Gutenberg 18.7.1 plugin active.

Screen recording on an iPhone 13, with 6.6-RC3 and GB 18.7.1:

WP.6.6-RC3.GB.18.7.1.480.mov

[andrewserong]

Hi folks! The fix for this was in #63002 which is part of Gutenberg 18.8 which will get released tomorrow. I'll close this issue again, but please do reopen it if you're encountering the issue with GB 18.8.

[ironprogrammer]

Following the reports that came in just before 6.6 dropped, I just wanted to add a note confirming that this is resolved in my testing of WP 6.6 + GB 18.8, as well as WP 6.6 and 6.7-alpha without GB installed (follow up to earlier testing on #62932 (comment)).

BIG ❤️ for the updated header on mobile and the W icon going "back" instead of to the dashboard!