Site editor crashes when opening styles Typography or Colors and theme variations aren't fully loaded yet

[afercia]

Description

The editor may crash when quickly opening the Styles > Typography or Styles > Color panel.

This is about timing so it's more evident on a local development environment, which is much slower than the built production release. Still, it appears threre's something to fix as at some point the underlying code attemps to get the length property of an object that is (I guess) null.

Error messages when opening Typography or Colors panel:

TypeError: Cannot read properties of undefined (reading 'length')
    at ScreenTypography 
...


TypeError: Cannot read properties of undefined (reading 'length')
    at ScreenColors 
    ...

See also this animated GIF to better illustrate:

Step-by-step reproduction instructions

• Set Twenty Twenty-Four as active theme: it adds 7 theme global styles 'variations'.
• Go to the Site editor > edit mode.
• Refresh the page.
• As soon as the 'Styles' button in the top bar appears, click on it.
• The quicly click either Typography or Colors.
• Observe the editor crashes.

Screenshots, screen recording, code snippet

No response

Environment info

No response

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 tried clicking as fast as possible, but I couldn't reproduce the problem 😅 Does this issue occur with the latest Gutenberg? Or can it be reproduced with WP6.5 Beta3?

[annezazu]

I have the same questions as Aki :D

[peterwilsoncc]

I'm able to reproduce this with the following environment:

• WordPress 6.4
• Multi site install
• Main site
• WordPress running in a sub directory, eg https://github.com/markjaquith/WordPress-Skeleton
• Gutenberg trunk @ 0f37efd

These are the reproduction steps I am using:

1. Ensure either the developer tools are closed or the "disable cache" option is unchecked on the network tab
2. Load the site editor
3. Press the reload button in your browser (this makes the issue less intermittent)
4. As soon as it appears, click the style editor icon above the sidebar
5. Click typography
6. Observe the editor crash

I've got script debug set to true on my environment but am still getting compressed function names in the console, sorry

Debug log.

I've got SCRIPT_DEBUG set to true but still getting minimized function names for some reason:

Uncaught TypeError: t is undefined

----

Eg@http://gb-dev.local/content/plugins/gutenberg/build/edit-site/index.min.js?ver=8644c5a5dc8e36eb8f22:119:1765
Mh@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:140133
cg/<@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:183544
cg@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:184889
cw@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:241936
Kb@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:233385
$b@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:233269
qb@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:233029
Ib@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:230510
Mb@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:231001
wd@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:97938
Nb/<@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:227731
VoidFunction*Nb@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:227697
Db@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:226996
Im@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:150529
_A</b<@http://gb-dev.local/content/plugins/gutenberg/build/components/index.min.js?ver=f5adf06d1f0775205ae5:61:7784
TA</n.onClick<@http://gb-dev.local/content/plugins/gutenberg/build/components/index.min.js?ver=f5adf06d1f0775205ae5:61:10518
g@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:49663
wr@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:49988
Pr@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:50949
is/<@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:81116
is@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:81171
ls@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:81511
us@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:81594
ms/</<@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:83469
ms/<@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:83477
Ob@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:231282
mr@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:47620
ms@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:83400
hl/<@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:62265
hl@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:62898
fl@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:62019
EventListener.handleEvent*ps/<@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:82866
ps@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:82891
cs@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:82124
fs/<@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:82290
fs@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:82234
e.createRoot/<@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:265204
e.createRoot@http://gb-dev.local/content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:265249
Zx@http://gb-dev.local/content/plugins/gutenberg/build/edit-site/index.min.js?ver=8644c5a5dc8e36eb8f22:189:593
@http://gb-dev.local/wp-admin/site-editor.php?canvas=edit:2377:16
EventListener.handleEvent*d@http://gb-dev.local/content/plugins/gutenberg/build/dom-ready/index.min.js?ver=222ad38e3e5e302c8bbf:1:307
@http://gb-dev.local/wp-admin/site-editor.php?canvas=edit:2376:4

[torounit]

The problem was reproduced using throttling.

1. Run wp-env start.
2. Go to site-editor.
3. Open Developer tools and Network tab.
4. Select "Fast 3G" or "Slow 3G" and reload browser.