Animate on route change

WordPress · Apr 2, 2024 · 8358622 · 8358622
1 parent 7f00034
commit 8358622
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -115,9 +115,9 @@ export default function Layout() {
 	const isEditorLoading = useIsSiteEditorLoading();
 	const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
 		useState( false );
-	const { areas, widths } = useLayoutAreas();
+	const { key: routeKey, areas, widths } = useLayoutAreas();
 	const animationRef = useMovingAnimation( {
-		triggerAnimationOnChange: canvasMode,
+		triggerAnimationOnChange: canvasMode + '__' + routeKey,
 	} );
 
 	// This determines which animation variant should apply to the header.

diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js
@@ -33,6 +33,7 @@ export default function useLayoutAreas() {
 	if ( path === '/page' ) {
 		const isListLayout = layout === 'list' || ! layout;
 		return {
+			key: 'pages-list',
 			areas: {
 				content: <PagePages />,
 				preview: isListLayout && (
@@ -62,6 +63,7 @@ export default function useLayoutAreas() {
 	// Regular other post types
 	if ( postType && postId ) {
 		return {
+			key: 'page',
 			areas: {
 				preview: <Editor isLoading={ isSiteEditorLoading } />,
 				mobile:
@@ -76,6 +78,7 @@ export default function useLayoutAreas() {
 	if ( path === '/wp_template' ) {
 		const isListLayout = isCustom !== 'true' && layout === 'list';
 		return {
+			key: 'templates-list',
 			areas: {
 				content: (
 					<PageTemplatesTemplateParts
@@ -101,6 +104,7 @@ export default function useLayoutAreas() {
 	if ( path === '/wp_template_part/all' ) {
 		const isListLayout = isCustom !== 'true' && layout === 'list';
 		return {
+			key: 'template-parts',
 			areas: {
 				content: (
 					<PageTemplatesTemplateParts
@@ -125,6 +129,7 @@ export default function useLayoutAreas() {
 	// Patterns
 	if ( path === '/patterns' ) {
 		return {
+			key: 'patterns',
 			areas: {
 				content: <PagePatterns />,
 				mobile: <PagePatterns />,
@@ -134,6 +139,7 @@ export default function useLayoutAreas() {
 
 	// Fallback shows the home page preview
 	return {
+		key: 'default',
 		areas: {
 			preview: <Editor isLoading={ isSiteEditorLoading } />,
 			mobile: