Avoid the types view transitions as it's not supported in all browser…

…s that support view transitions
WordPress · Jun 4, 2024 · fa43174 · fa43174
1 parent 01ce00e
commit fa43174
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
@@ -128,10 +128,8 @@
 }
 
 /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
-html:active-view-transition-type(canvas-mode-edit) {
-	&::view-transition-group(toggle) {
-		animation-delay: 255ms;
-	}
+html.canvas-mode-edit-transition::view-transition-group(toggle) {
+	animation-delay: 255ms;
 }
 /* stylelint-enable  */
 

diff --git a/packages/edit-site/src/store/private-actions.js b/packages/edit-site/src/store/private-actions.js
@@ -56,11 +56,16 @@ export const setCanvasMode =
 		if ( ! document.startViewTransition ) {
 			switchCanvasMode();
 		} else {
-			document.startViewTransition( {
-				update: () => {
-					switchCanvasMode();
-				},
-				types: [ 'canvas-mode-' + mode ],
+			document.documentElement.classList.add(
+				`canvas-mode-${ mode }-transition`
+			);
+			const transition = document.startViewTransition( () =>
+				switchCanvasMode()
+			);
+			transition.finished.finally( () => {
+				document.documentElement.classList.remove(
+					`canvas-mode-${ mode }-transition`
+				);
 			} );
 		}
 	};