From 32d56780405851e5d9dfe56cea85dd4fd2750e6c Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Wed, 2 Oct 2024 20:56:00 +0900
Subject: [PATCH] Fix: Shadow/Font size preset panel crashes the editor
 (#65765)

* Fix: Shadow/Font size preset panel crashes the editor

* Refactor logic

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
---
 .../global-styles/font-sizes/font-size.js     | 23 +++++++++----------
 .../global-styles/shadows-edit-panel.js       |  4 ++++
 2 files changed, 15 insertions(+), 12 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 ef520a0163c03..63310203ef05b 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
@@ -51,6 +51,17 @@ function FontSize() {
 	// Get the font size by slug.
 	const fontSize = sizes.find( ( size ) => size.slug === slug );
 
+	// Navigate to the font sizes list if the font size is not available.
+	useEffect( () => {
+		if ( ! fontSize ) {
+			goTo( '/typography/font-sizes/', { isBack: true } );
+		}
+	}, [ fontSize, goTo ] );
+
+	if ( ! origin || ! slug || ! fontSize ) {
+		return null;
+	}
+
 	// 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;
@@ -121,18 +132,6 @@ 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
diff --git a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
index f12f960f6a36b..61bed62cff3d6 100644
--- a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
+++ b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
@@ -96,6 +96,10 @@ export default function ShadowsEditPanel() {
 	const [ isRenameModalVisible, setIsRenameModalVisible ] = useState( false );
 	const [ shadowName, setShadowName ] = useState( selectedShadow.name );
 
+	if ( ! category || ! slug ) {
+		return null;
+	}
+
 	const onShadowChange = ( shadow ) => {
 		setSelectedShadow( { ...selectedShadow, shadow } );
 		const updatedShadows = shadows.map( ( s ) =>