Navigation block: requires double clicking to select/edit when using page list

[annezazu]

Description

The "click to edit" overlay #35079 seems to be broken causing one to have to double click in quick succession in order to edit a navigation block. This seems specific to a post theme switch from a classic theme when the page list fallback is in place as I can't replicate when a "regular" navigation block is in place. cc @getdave

Step-by-step reproduction instructions

1. Use 6.1 RC2 on a site.
2. Convert from a classic theme to block with one menu in place.
3. Try to select and edit the navigation block.

If you need a test site to make it easier, you can spin up a site with https://app.instawp.io/launch?t=fse-call-for-testing-17 from the last call for testing for the FSE Outreach Program. This will give a classic site. Uninstall Gutenberg, update to 6.1 RC2 via beta tester, then switch to TT3.

Screenshots, screen recording, code snippet

Here's a video showing the problem just after switching from a classic to block theme and needing to convert the page list links to blocks:

click.to.edit.needing.double.click.mov

I can't replicate after converting to links:

Uploading click to edit post conversion.mov…

Environment info

• WordPress 6.1 RC2
• TT2
• No Gutenberg
• Chrome

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

[getdave]

Tested and confirmed this is a bug on RC2. You cannot select the Page List at all without double click.

[getdave]

I can confirm that turning off Overlay causes this issue to disappear. Therefore I believe this is the overlay interfering.

[getdave]

Removing the pointer-events from the wrapper fixes this. We'll need to be aware of consequences of doing this. I'll spin up a PR.

[getdave]

Ok here I am testing on Gutenberg trunk.

• initially I cannot click on the Page List in the canvas to select it
• then I toggle the overlay to off.
• now I can click in the canvas to select.
• now I toggle the overlay back to Mobile again.
• now I can click in the canvas to select (this is in contrast to the initial experience).

Why is this happening? What changes? Diving deeper....

Screen.Capture.on.2022-10-19.at.12-08-02.mp4

[getdave]

I can observe the same behaviour using the following markup:

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:page-list /--></div>
<!-- /wp:group -->

Therefore I don't think this is specific to the Navigation block but rather the Page List block.