Javascript error when resetting Font Size Presets

[benniledl]

Description

Hello all!

I've got a javascript error and the editor crashed when doing the following:

Step-by-step reproduction instructions

1. opening global styles
2. typography
3. font size presets
4. add a new individual font size preset
5. click on the new individual preset
6. next to the revisions button click on the 3 dots
7. click reset styles

Screenshots, screen recording, code snippet

TypeError: f is undefined
Kh https://hostingtools.at/wordpress/wp-includes/js/dist/edit-site.min.js?ver=5a21c7ca87b2d5588902:11
ht https://hostingtools.at/wordpress/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1:10
vr https://hostingtools.at/wordpress/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1:10
Qs https://hostingtools.at/wordpress/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1:10
wl https://hostingtools.at/wordpress/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1:10
bl https://hostingtools.at/wordpress/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1:10
yl https://hostingtools.at/wordpress/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1:10
il https://hostingtools.at/wordpress/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1:10
fl https://hostingtools.at/wordpress/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1:10
Nn https://hostingtools.at/wordpress/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1:10
ul https://hostingtools.at/wordpress/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1:10
[react-dom.min.js:10:53523]

Blog-Startseite.Template.Testsite.Editor.WordPress.Mozilla.Firefox.2024-10-01.09-57-40.mp4

Environment info

Firefox,
completely fresh and unmodified WordPress 6.7-beta1

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

[firoz2456]

Yes, I am getting the same error with fresh installation of WordPress 6.7-beta1
Google Chrome
PHP 8.1.29
nginx
LocalWP

[nith53]

I was also able to replicate it.

[t-hamano]

Thanks for the report. The error log when SCRIPT_DEBUG is enabled is as follows:

Uncaught TypeError: Cannot read properties of undefined (reading 'fluid') at FontSize (font-size.js:57:12)

Resetting the global styles discards any custom font size presets. This would cause a critical error, as the font size preset panel is built around the assumption that the font preset exists.

Perhaps the ideal solution would be to switch back from the specific preset panel to the previous screen, i.e. the preset list panel, when the global styles are reset.

cc @matiasbenedetto @mikachan

[benniledl]

Remove the "Reset styles" button

I think the reset styles button should be removed from the specific preset panel (clicking on a preset) and moved to the overview of all presets.

Because having a reset styles button on this specific preset panel could imply that you are only resetting this one (currently selected) preset and not every preset.

Remove from here (since it implies that reset is only affecting currently selected preset):

Only leave it here:

[matiasbenedetto]

I think the reset styles button should be removed from the specific preset panel (clicking on a preset) and moved to the overview of all presets.

Because having a reset styles button on this specific preset panel could imply that you are only resetting this one (currently selected) preset and not every preset.

Remove from here (since it implies that reset is only affecting currently selected preset):

I think this makes sense, but it's out of the scope of this particular bug because it will impact all the styles / presets.

[t-hamano]

@matiasbenedetto I have filed #65765 to resolve a different issue with font size presets (and shadow presets). #65765 does not need to be backported to WP 6.7, but the fix for this issue does need to be backported to WP 6.7, so it might be better to fix this issue before merging #65765.

[matiasbenedetto]

A potential fix for this particular bug: #65791