From 9097405755a7a9749d22ea90c276808fdace686f Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 19 Jun 2024 22:59:30 +0200
Subject: [PATCH] Site Editor: Improve the frame animation (#62676)

---
 .../src/components/block-editor/style.scss          | 11 -----------
 packages/edit-site/src/style.scss                   | 13 +++++++++++++
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
index 2e6e7f95b715f3..3849eed24a4ea3 100644
--- a/packages/edit-site/src/components/block-editor/style.scss
+++ b/packages/edit-site/src/components/block-editor/style.scss
@@ -1,15 +1,4 @@
-/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
-::view-transition-old(frame),
-::view-transition-new(frame) {
-  animation-duration: 0;
-}
-/* stylelint-enable */
-
 .edit-site-visual-editor__editor-canvas {
-	/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
-	view-transition-name: frame;
-	/* stylelint-enable */
-
 	&.is-focused {
 		outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
 		outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 6203c24196592b..36029fc1c51c4f 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -36,6 +36,19 @@
 @import "./components/pagination/style.scss";
 @import "./components/global-styles/variations/style.scss";
 
+/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+::view-transition-image-pair(root) {
+	isolation: auto;
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+	animation: none;
+	mix-blend-mode: normal;
+	display: block;
+}
+/* stylelint-enable */
+
 body.js #wpadminbar {
 	display: none;
 }