Certain Buttons Unresponsive in Site Editor on Mobile Browsers and Apps

[SiobhyB]

Description

As reported in Automattic/wp-calypso#87247 by @kelasante, 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.

Step-by-step reproduction instructions

1. On a mobile app or mobile browser on a site with an FSE block 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.

Screenshots, screen recording, code snippet

No response

Environment info

This is a new regression that's reproducible with 17.6.3 of the Gutenberg plugin.

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

[SiobhyB]

Noting that the buttons become responsive again after changing the z-index for the following selector locally:

gutenberg/packages/edit-site/src/components/layout/style.scss

Lines 38 to 48 in 21f0fc0

	.edit-site-layout__header {
	height: $header-height;
	display: flex;
	z-index: z-index(".edit-site-layout__header");
	// This is only necessary for the exit animation
	.edit-site-layout:not(.is-full-canvas) & {
	position: fixed;
	width: 100vw;
	}
	}

There appear to have been a number of changes related to the site editor which may have contributed.

[afercia]

I noticed this regression as well and mentioned in another PR, see #58740

Note: the layout suffers from an unrelated bug where some transparent elements overlap the top bar button. As such it's not possible to click these buttons. Use the keyboard to move to them.

I don't think this is related to the Block buttons and not even to the Button component. It's the SIte editor top bar layout that needs some adjustments

[t-hamano]

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

This issue is also mentioned in this comment: #58044 (comment)

[getdave]

I confirmed this Issue is happening. I believe this selector is responsible:

gutenberg/packages/edit-site/src/components/layout/style.scss

Lines 38 to 41 in f20a238

	.edit-site-layout__header {
	height: $header-height;
	display: flex;
	z-index: z-index(".edit-site-layout__header");

Specifically the z-index (which resolved to 2). If I bump that up to 3 I can click on the buttons but the site logo becomes obscured:

Screen.Capture.on.2024-02-08.at.16-44-53.mp4

[jeryj]

I have a bugfix ready for review: #58852