Editor crash from block deselection in “Zoom Out” mode

[stokesman]

Description

While zoomed out, deselecting a block crashes the editor. I first happened across this by undoing a pattern insertion. Now I found that just clicking somewhere that doesn’t select a new block but does deselect the currently selected one will crash it too.

Here’s the error from the crash boundary:

TypeError: Cannot destructure property 'name' of 'getBlock(...)' as it is null.
    at http://localhost:8888/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=0739551982adc596213c:28422:7
    at http://localhost:8888/wp-content/plugins/gutenberg/build/data/index.min.js?ver=65dd8ddc0f9260605b50:1705:70
    at __unstableMarkListeningStores (http://localhost:8888/wp-content/plugins/gutenberg/build/data/index.min.js?ver=65dd8ddc0f9260605b50:4402:23)
    at Object.__unstableMarkListeningStores (http://localhost:8888/wp-content/plugins/gutenberg/build/data/index.min.js?ver=65dd8ddc0f9260605b50:4477:30)
    at updateValue (http://localhost:8888/wp-content/plugins/gutenberg/build/data/index.min.js?ver=65dd8ddc0f9260605b50:1705:34)
    at http://localhost:8888/wp-content/plugins/gutenberg/build/data/index.min.js?ver=65dd8ddc0f9260605b50:1746:5
    at useMappingSelect (http://localhost:8888/wp-content/plugins/gutenberg/build/data/index.min.js?ver=65dd8ddc0f9260605b50:1771:7)
    at useSelect (http://localhost:8888/wp-content/plugins/gutenberg/build/data/index.min.js?ver=65dd8ddc0f9260605b50:1855:58)
    at ZoomOutToolbar (http://localhost:8888/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=0739551982adc596213c:28409:78)
    at renderWithHooks (webpack://gutenberg/./node_modules/react-dom/cjs/react-dom.development.js?:15486:18)

Step-by-step reproduction instructions

Via block deselection

1. With the Zoom Out experiment enabled
2. Open a post that has content
3. Open the inserter, select a pattern category
4. Select a block
5. Click somewhere that will deselect the block without selecting another
6. Note the crashed editor

Via Undo

1. With the Zoom Out experiment enabled
2. Go to the Site editor and select a page to edit
3. Open the inserter, select a pattern category and insert a pattern
4. Undo
5. Note the crashed editor

Screenshots, screen recording, code snippet

Via block deselection

zoom-out-deselect-crash.mp4

Via Undo

zoom-out-undo-crash.mp4

Environment info

• WP 6.5 / Gutenberg Trunk / Twenty Twenty-Four
• Chrome
• Desktop macOS

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

[t-hamano]

I was not able to reproduce this issue, but it works differently in the post editor and the site editor, and I discovered some issues. Maybe this is because my machine is running Windows OS 🤔

Post Editor

• I cannot insert a pattern by dragging the mouse.
• I can insert the pattern successfully by clicking on the pattern.
• I need to undo three times to delete an inserted pattern.

post-editor.mp4

Site Editor

• I can insert a pattern by dragging the mouse.
• I can insert the pattern successfully by clicking on the pattern.
• I need to undo three times to delete an inserted pattern.

site-editor.mp4

[stokesman]

Thanks for testing this Aki. I appreciate the detailed report. I had only tested in the Site editor. I just tested again by inserting the pattern by clicking instead of dragging and could still reproduce the crash.

It seems a key thing to reproduce is editing a page instead of a template. I quickly tested on the blog home template and it didn’t crash but it did take two clicks for the undo to work. I’ll add that it’s page specific in the description and instructions.

In the Post editor I also couldn’t reproduce the crash even on a page. It did take two clicks for the undo to work though.

So it seems the extra undo steps required varies by platform.

[t-hamano]

I need to undo three times to delete an inserted pattern.

I reported this issue in #63479, and this issue will be resolved in #63215.

[stokesman]

I’ve updated the title and description (with new screen recording) due to realizing that the crash also happens from simply deselecting a block while zoomed out.

Also now there’s #63642 to fix this but I guess someone needs to reproduce it first 😃.