From bfe6dd8114a09cb8213a100b5532aea9f130e1c2 Mon Sep 17 00:00:00 2001
From: Ankit Kumar Shah <ankit.shah@rtcamp.com>
Date: Fri, 31 Jan 2025 13:37:47 +0530
Subject: [PATCH] Fix: Additional CSS button not working after back navigation
 (#68954)

* Reset editor canvas view when navigating away from CSS screen

* Added effect to reset editorCanvasContainerView when navigating away from CSS screen
* Added tracking of previous path using usePrevious hook to detect navigation changes
* Added comparison of current and previous paths to determine when to reset the view
* Reset view to undefined to ensure clean state for next CSS screen activation

* Reset editor canvas view when navigating back from CSS screen

* Added onBack handler to ScreenCSS component
* Added setEditorCanvasContainerView to reset view state
* Added missing dependencies for view state management
* Fixed Additional CSS button not working after navigation

Co-authored-by: Infinite-Null <ankitkumarshah@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
---
 .../edit-site/src/components/global-styles/screen-css.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/edit-site/src/components/global-styles/screen-css.js b/packages/edit-site/src/components/global-styles/screen-css.js
index 7d67bac28824f..570ac7abef269 100644
--- a/packages/edit-site/src/components/global-styles/screen-css.js
+++ b/packages/edit-site/src/components/global-styles/screen-css.js
@@ -4,11 +4,13 @@
 import { __ } from '@wordpress/i18n';
 import { ExternalLink } from '@wordpress/components';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
 import ScreenHeader from './header';
 
 const { useGlobalStyle, AdvancedPanel: StylesAdvancedPanel } = unlock(
@@ -26,6 +28,10 @@ function ScreenCSS() {
 		shouldDecodeEncode: false,
 	} );
 
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
+
 	return (
 		<>
 			<ScreenHeader
@@ -44,6 +50,9 @@ function ScreenCSS() {
 						</ExternalLink>
 					</>
 				}
+				onBack={ () => {
+					setEditorCanvasContainerView( undefined );
+				} }
 			/>
 			<div className="edit-site-global-styles-screen-css">
 				<StylesAdvancedPanel