Avoid errors when a fontSize preset is not available (#65791)

* Avoid errors when the fontSize is not available * remove goBack * Update packages/edit-site/src/components/global-styles/font-sizes/font-size.js --- Co-authored-by: matiasbenedetto <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: ciampo <[email protected]> Co-authored-by: ramonjd <[email protected]> Co-authored-by: firoz2456 <[email protected]> Co-authored-by: nith53 <[email protected]> Co-authored-by: benniledl <[email protected]>
WordPress · Oct 2, 2024 · 2fc00b8 · 2fc00b8
1 parent 6b0e5db
commit 2fc00b8
Showing 1 changed file with 15 additions and 7 deletions.
diff --git a/packages/edit-site/src/components/global-styles/font-sizes/font-size.js b/packages/edit-site/src/components/global-styles/font-sizes/font-size.js
@@ -15,7 +15,7 @@ import {
 	ToggleControl,
 } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
-import { useState } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -36,7 +36,6 @@ function FontSize() {
 
 	const {
 		params: { origin, slug },
-		goBack,
 		goTo,
 	} = useNavigator();
 
@@ -54,10 +53,10 @@ function FontSize() {
 
 	// Whether the font size is fluid. If not defined, use the global fluid value of the theme.
 	const isFluid =
-		fontSize.fluid !== undefined ? !! fontSize.fluid : !! globalFluid;
+		fontSize?.fluid !== undefined ? !! fontSize.fluid : !! globalFluid;
 
 	// Whether custom fluid values are used.
-	const isCustomFluid = typeof fontSize.fluid === 'object';
+	const isCustomFluid = typeof fontSize?.fluid === 'object';
 
 	const handleNameChange = ( value ) => {
 		updateFontSize( 'name', value );
@@ -107,9 +106,6 @@ function FontSize() {
 	};
 
 	const handleRemoveFontSize = () => {
-		// Navigate to the font sizes list.
-		goBack();
-
 		const newFontSizes = sizes.filter( ( size ) => size.slug !== slug );
 		setFontSizes( {
 			...fontSizes,
@@ -125,6 +121,18 @@ function FontSize() {
 		setIsRenameDialogOpen( ! isRenameDialogOpen );
 	};
 
+	// Navigate to the font sizes list if the font size is not available.
+	useEffect( () => {
+		if ( ! fontSize ) {
+			goTo( '/typography/font-sizes/', { isBack: true } );
+		}
+	}, [ fontSize, goTo ] );
+
+	// Avoid rendering if the font size is not available.
+	if ( ! fontSize ) {
+		return null;
+	}
+
 	return (
 		<>
 			<ConfirmDeleteFontSizeDialog