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 <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: ciampo <[email protected]> Co-authored-by: ramonjd <[email protected]>
WordPress · Oct 2, 2024 · 32d5678 · 32d5678
1 parent 79e6643
commit 32d5678
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 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
@@ -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
@@ -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 ) =>