From 2fc00b8dea792666ac20a5b67392c74aabf70e97 Mon Sep 17 00:00:00 2001
From: Matias Benedetto <matias.benedetto@gmail.com>
Date: Wed, 2 Oct 2024 05:23:16 -0300
Subject: [PATCH] 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 <mmaattiiaass@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: firoz2456 <firoz2456@git.wordpress.org>
Co-authored-by: nith53 <nithins53@git.wordpress.org>
Co-authored-by: benniledl <benniledl@git.wordpress.org>
---
 .../global-styles/font-sizes/font-size.js     | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 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
index 25ff6812d583c..9970e7354fc38 100644
--- 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