Navigation editor: it's very difficult to unselect items

[javierarce]

If I click on an item to edit it, clicking outside the menu won't unselect it unless I click the space above or below the menu twice.

In the video, clicking above the menu doesn't work because instead of the content area, I'm interacting with the navigation header.

menu.mp4

WordPress information

• WordPress version: 5.8
• Gutenberg version: 11.1.0
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? Yes

Device information

• Device: Desktop
• Operating system: Big Sur 11.4
• Browser: Latest versions of Chrome, Firefox & Safari

[talldan]

Spent some time looking into this. This seems to be a block editor change in general. The same also happens in the post editor.

To test it - add two paragraph blocks with content, select the first one, and then click underneath the last block at the bottom of the document.

It used to be that clicking at the bottom would select the 'document', but now instead selection is often moved to the last paragraph.

Rich Text's useInputAndSelection hook now seems to be intercepting these events and changing the selection:

gutenberg/packages/rich-text/src/component/use-input-and-selection.js

Line 200 in 0be70f3

onSelectionChange( start, end );

[talldan]

☝️ Seems I was not quite right about the previous comment. There's a specific feature in the post editor that causes the last block to be selected when clicking at the bottom.

I also tested clicking to the sides of the paragraph blocks in the post editor and couldn't reproduce an issue, but using the navigation block in the post editor the problem could be reproduced. That might imply it's something specific to the navigation block that causes this problem.

[talldan]

From what I can tell, this seems to happen in specific browsers. Clicking at the bottom of the nav editor to deselect blocks works in Firefox, but not in Chrome or Safari. Clicking at the sides doesn't work in any browser, so it may be a separate issue.

It also happens for blocks where a RichText element is styled as inline-block. In the post editor I can also reproduce with the Buttons block:

1. Add a buttons block with two button blocks
2. Move the caret to the second button
3. Click in the empty space to the left of the first button, the first block is selected (instead of blocks being deselected)

Changing a block to display: block resolves things, so it may be that there's a CSS workaround. But it would still be good to identify the root cause.

[ndiego]

Since the Navigation Editor experiment is no longer being worked on and was removed, I am going to close this issue.