Site Editor: Improve the frame animation (#62676)

WordPress · Jun 19, 2024 · 9097405 · 9097405
1 parent 9da6486
commit 9097405
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git 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
@@ -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;
 }