Certain Buttons Unresponsive in Site Editor on Mobile Browsers and Apps

[kelasante]

Quick summary

Buttons that appear in the top toolbar when editing a Template in the Site Editor are not tappable. Nothing happens when you click on a specific feature like the save or style icon.

Additionally, when you scroll to Patterns, and click to open a pattern, nothing happens.

Steps to reproduce

1. On a mobile app or mobile browser on a site with an FSE theme active, open the Site Editor by clicking the option to update your site's design.
2. Go to templates
3. Click on any of the buttons at the top of the page, like save or the block inserter
4. Similarly, go to Patterns, and click or double-click on a pattern to open it.

What you expected to happen

To be able to access specific functionality by clicking on the button

What actually happened

Nothing happens

Impact

Some (< 50%)

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

No response

Logs or notes

Able to replicate on Safari on iOS, Jetpack app and WordPress app

[kelasante]

Issue first reported in 7677675-zen

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 7677675-zen

[SiobhyB]

The regression appears to come from Gutenberg, the buttons become responsive again after changing the z-index for the following selector locally:

https://github.com/WordPress/gutenberg/blob/21f0fc0a813d8b4ad85a3a255e973567c9e68ce7/packages/edit-site/src/components/layout/style.scss#L38-L48

I wonder if it was introduced following the changes in WordPress/gutenberg#58077 or similar changes to fix other site editor regressions.

[SiobhyB]

I was able to confirm the issue's reproducible on a self-hosted site with version 17.6.3 of the Gutenberg plugin installed. I've copied over this issue to the Gutenberg repo at WordPress/gutenberg#58781.