From 0517bba19c7dbddba6dd67325cb1875bae82d9ca Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 1 Oct 2024 15:44:05 +0200
Subject: [PATCH] Global Styles: fix screens crashing on exit animation

---
 .../global-styles/font-sizes/font-size.js      | 17 ++++++++++++++++-
 .../global-styles/shadows-edit-panel.js        | 18 +++++++++++++++++-
 2 files changed, 33 insertions(+), 2 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 80b1ea55c405bc..65a5c5c27cb924 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
@@ -14,6 +14,7 @@ import {
 	FlexItem,
 	ToggleControl,
 } from '@wordpress/components';
+import { usePrevious } from '@wordpress/compose';
 import { moreVertical } from '@wordpress/icons';
 import { useState } from '@wordpress/element';
 
@@ -35,11 +36,25 @@ function FontSize() {
 	const [ isRenameDialogOpen, setIsRenameDialogOpen ] = useState( false );
 
 	const {
-		params: { origin, slug },
+		params: { origin: originParam, slug: slugParam },
 		goBack,
 		goTo,
 	} = useNavigator();
 
+	// When the screen animates out, the params become undefined. The following
+	// code retains the previous value around, to avoid the screen from crashing
+	// or removing its contents during the animation.
+	const previousOrigin = usePrevious( originParam );
+	const previousSlug = usePrevious( slugParam );
+	const origin =
+		previousOrigin !== undefined && originParam === undefined
+			? previousOrigin
+			: originParam;
+	const slug =
+		previousSlug !== undefined && slugParam === undefined
+			? previousSlug
+			: slugParam;
+
 	const [ fontSizes, setFontSizes ] = useGlobalSetting(
 		'typography.fontSizes'
 	);
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 f12f960f6a36bb..633c651ffbde78 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
@@ -27,6 +27,7 @@ import {
 	Modal,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+import { usePrevious } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import {
@@ -73,9 +74,24 @@ const presetShadowMenuItems = [
 
 export default function ShadowsEditPanel() {
 	const {
-		params: { category, slug },
+		params: { category: categoryParam, slug: slugParam },
 		goTo,
 	} = useNavigator();
+
+	// When the screen animates out, the params become undefined. The following
+	// code retains the previous value around, to avoid the screen from crashing
+	// or removing its contents during the animation.
+	const previousCategory = usePrevious( categoryParam );
+	const previousSlug = usePrevious( slugParam );
+	const category =
+		previousCategory !== undefined && categoryParam === undefined
+			? previousCategory
+			: categoryParam;
+	const slug =
+		previousSlug !== undefined && slugParam === undefined
+			? previousSlug
+			: slugParam;
+
 	const [ shadows, setShadows ] = useGlobalSetting(
 		`shadow.presets.${ category }`
 	);