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.

[annezazu]

FYI to @tellthemachines and @ramonjd for 6.3.2 possible inclusion!

[t-hamano]

Interesting, I found the cause. This problem can be reproduced by building the latest trunk 😅

This is probably due to the fact that the callback value of the array is compressed by the build and the callback.name cannot be retrieved correctly at the point mentioned by @draganescu.

gutenberg/packages/block-editor/src/components/use-block-commands/index.js

Lines 250 to 252 in 2aa67f6

	const action = callback.name
	.replace( 'on', '' )
	.replace( /([a-z])([A-Z])/g, '$1 $2' );

Furthermore, since command labels are generated by the replace method, there will be localization problems.

Either way, #52509, to which this issue relates, is part of Gutenberg 16.5 and does not ship with WordPress 6.3, so I think it can be excluded from the 6.3.x editor task.