Crash when trying to type something in commands after editing blocks

[okmttdhr]

Description

The Site Editor crashes when trying to type something in commands after editing blocks. You'll see the black screen. See the instructions below.

Step-by-step reproduction instructions

1. Go to the Site Editor
2. Edit some blocks, such as changing the text, adding a block, and moving a block
3. Open commands

4. Start tying and see the crash
   

Screenshots, screen recording, code snippet

Screen.Recording.2023-08-22.at.15.27.08.mov

Environment info

• Gutenberg v16.5.0-rc.1
• WordPress 6.3

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

Related

• Gutenberg release - 16.5 #53633

[ntsekouras]

👋 I can't reproduce.. Can you share a bit more info on the reproduction steps or share a small video? Thanks!

[okmttdhr]

Hi, @ntsekouras! I included the video in the description and note that this only happens on v16.5.0-rc.1.
I am aware that sometimes the crash does not happen, and not sure what the cause is exactly.

[liviopv]

I ran into this and ended up creating a duplicate in #53898

What I found:

• It's present in 16.5 stable, so it's out in the wild now.
• Only happens if the Command Palette is triggered when a block is selected. Triggering it without selecting any block works.
• Only happens in the Site Editor, the Post/Page Editor is fine
• The console logs:

Uncaught TypeError: Cannot read properties of null (reading 'toString')
    at index.js:261:14
    at Array.map (<anonymous>)
    at AI (index.js:249:4)
    at un (command-menu.js:36:39)
    at St (react-dom.min.js?ver=18:1:47627)
    at $s (react-dom.min.js?ver=18:1:120574)
    at Sl (react-dom.min.js?ver=18:1:88649)
    at kl (react-dom.min.js?ver=18:1:88577)
    at bl (react-dom.min.js?ver=18:1:88440)
    at sl (react-dom.min.js?ver=18:1:85264)

CleanShot.2023-08-23.at.17.58.36.mp4

[jordesign]

Tested and confirmed in WP6.3 and GB16.5

[liviopv]

Only happens in the Site Editor, the Post/Page Editor is fine

I tested again and I was able to reproduce it in the Post Editor as well:

CleanShot.2023-08-24.at.10.17.05.mp4

TypeError: Cannot read properties of null (reading 'toString')
    at http://localivio.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=af7c44e3d3ac232a7bfc:145:63
    at Array.map (<anonymous>)
    at AI (http://localivio.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=af7c44e3d3ac232a7bfc:143:1361)
    at un (http://localivio.local/wp-content/plugins/gutenberg/build/commands/index.min.js?ver=837a8c80dd33e3db66e1:1:42581)
    at St (http://localivio.local/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=18:1:47627)
    at $s (http://localivio.local/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=18:1:120574)
    at Sl (http://localivio.local/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=18:1:88649)
    at kl (http://localivio.local/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=18:1:88577)
    at bl (http://localivio.local/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=18:1:88440)
    at sl (http://localivio.local/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=18:1:85264)

[draganescu]

I can repro with the latest releases but I can't repro on Gutenberg trunk. The error clearly comes from the block commands hook but unclear as to why so far.

[draganescu]

I cannot reproduce this w/ trunk no matter what I do. The code that seems to trigger the error

https://github.com/WordPress/gutenberg/pull/52509/files#diff-a768f5465e6bc9bcf20a278d4bc127f719d2d3c2d6f2eb633c71cf787167a853R258

seems all right since it's never supposed to be null or undefined being in a map on an array with hardcoded values.