Site Editor: Selecting different fonts in Styles causes Editor to crash in certain themes

[Imran92]

Description

Quick summary

Site editor crashes when selecting different font for Headings in Styles

What you expected to happen

I expected the font to change to the selected font, and be usable.

What actually happened

Editor crashed. Unable to continue.

Step-by-step reproduction instructions

Steps to reproduce

1. Any site
2. installed Pendant theme
3. Browse to Site Editor, then Styles.
4. Select a style
5. Drilled down into Styles to Headings.
6. Selected H1.
7. I will crash, if not, take the next step
8. Fonts, select any other font.
9. Editor crashed with error: The editor has encountered an unexpected error.

Screenshots, screen recording, code snippet

Screen.Recording.2024-08-31.at.3.01.18.AM.mov

Environment info

• Latest WP, latest Gutenberg

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

[annezazu]

Hi! Created a playground to test this that uses WP 6.6.1 and GB 19.1 and the pendant theme. Anyone can use this to help with debugging -- just click the link.

From there, I can replicate and the following error is shown:

Error: Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at ul (https://playground.wordpress.net/scope:0.1588404803993277/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=18:1:82317)
at Object.enqueueForceUpdate (https://playground.wordpress.net/scope:0.1588404803993277/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=18:1:116796)
at t.forceUpdate (https://playground.wordpress.net/scope:0.1588404803993277/wp-content/plugins/gutenberg/build/vendors/react.min.js?ver=18:1:4673)
at My.forceUpdate (https://playground.wordpress.net/scope:0.1588404803993277/wp-content/plugins/gutenberg/build/components/index.min.js?ver=e03094f0be2011fc42d5:1:328110)
at https://playground.wordpress.net/scope:0.1588404803993277/wp-content/plugins/gutenberg/build/components/index.min.js?ver=e03094f0be2011fc42d5:1:327495
at Vr (https://playground.wordpress.net/scope:0.1588404803993277/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=18:1:73191)
at el (https://playground.wordpress.net/scope:0.1588404803993277/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=18:1:80392)
at Jr (https://playground.wordpress.net/scope:0.1588404803993277/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=18:1:80248)
at Zr (https://playground.wordpress.net/scope:0.1588404803993277/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=18:1:79788)
at https://playground.wordpress.net/scope:0.1588404803993277/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=18:1:91168

@jffng might you have a sense here of what's going on and whether this is theme dependent?

[annezazu]

Can anyone replicate this with other themes? @WordPress/outreach

[Imran92]

Hi @annezazu 👋 I've published a PR with fixes for the errors here - #64953. But I can't assign any reviewer there as I don't have access. I have explained in my PR why it was happening as well, which may help looking for other potential themes where this issue may also exist.

Thank you so much for cross-connecting it! Please let me know if it fixes the issue for you, or in case you notice anything else, maybe a regression or something I may've missed.