From 187428c6b7872503e175db91ac69e8423b86b3d8 Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Thu, 1 Aug 2024 14:32:20 -0400
Subject: [PATCH 1/8] add transition to transitioning properties

---
 packages/block-editor/src/components/iframe/content.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index 8c03d4224745af..a539b5d4f640cf 100644
--- a/packages/block-editor/src/components/iframe/content.scss
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -21,9 +21,13 @@
 	margin-left: calc(-1 * (#{$prev-container-width} - #{$container-width}) / 2);
 }
 
+$beizer: cubic-bezier(0.65, 0, 0.45, 1);
+$duration: 0.5s;
+
 .block-editor-iframe__html {
+	border: 0 solid $gray-300;
 	transform-origin: top center;
-	transition: transform 0.3s;
+	transition: transform $duration $beizer, background $duration $beizer, border $duration $beizer, margin $duration $beizer;
 	@include reduce-motion("transition");
 }
 
@@ -54,6 +58,7 @@
 		display: flex;
 		flex-direction: column;
 
+
 		> .is-root-container:not(.wp-block-post-content) {
 			flex: 1;
 			display: flex;

From 91738e831f9a8fe5213810cf2a106198b10e4da2 Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Thu, 1 Aug 2024 14:36:35 -0400
Subject: [PATCH 2/8] remove border and radius from tablet/mobile

---
 packages/block-editor/src/components/use-resize-canvas/index.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/block-editor/src/components/use-resize-canvas/index.js b/packages/block-editor/src/components/use-resize-canvas/index.js
index a843f160056367..27c898735e1df1 100644
--- a/packages/block-editor/src/components/use-resize-canvas/index.js
+++ b/packages/block-editor/src/components/use-resize-canvas/index.js
@@ -62,8 +62,6 @@ export default function useResizeCanvas( deviceType ) {
 					marginLeft: marginHorizontal,
 					marginRight: marginHorizontal,
 					height,
-					borderRadius: '2px 2px 2px 2px',
-					border: '1px solid #ddd',
 					overflowY: 'auto',
 				};
 			default:

From b337f95a44cc4a672cb3f905f35e098b0f50b68f Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Thu, 1 Aug 2024 14:37:52 -0400
Subject: [PATCH 3/8] zoom out a little more

---
 packages/block-editor/src/components/iframe/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 669e2fe25a9fbb..eca805f2f2aab0 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -305,7 +305,7 @@ function Iframe( {
 
 		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
 
-		const maxWidth = 800;
+		const maxWidth = 750;
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-scale',
 			scale === 'default'

From 1b5ff108a3b38a3e7df1aed9cafdc2faadc5cfa0 Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Thu, 1 Aug 2024 14:44:40 -0400
Subject: [PATCH 4/8] scope properties

---
 packages/block-editor/src/components/iframe/content.scss | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index a539b5d4f640cf..3593edf2a4be57 100644
--- a/packages/block-editor/src/components/iframe/content.scss
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -21,10 +21,9 @@
 	margin-left: calc(-1 * (#{$prev-container-width} - #{$container-width}) / 2);
 }
 
-$beizer: cubic-bezier(0.65, 0, 0.45, 1);
-$duration: 0.5s;
-
 .block-editor-iframe__html {
+	$beizer: cubic-bezier(0.65, 0, 0.45, 1);
+	$duration: 0.5s;
 	border: 0 solid $gray-300;
 	transform-origin: top center;
 	transition: transform $duration $beizer, background $duration $beizer, border $duration $beizer, margin $duration $beizer;

From 0bd50c95588f784d6b1bf99e4b262ff5f43ba55f Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Thu, 1 Aug 2024 15:09:02 -0400
Subject: [PATCH 5/8] update mobile/tablet transition

---
 packages/block-editor/src/components/iframe/index.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index eca805f2f2aab0..b0d1c872a9d586 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -378,10 +378,9 @@ function Iframe( {
 			<iframe
 				{ ...props }
 				style={ {
-					border: 0,
 					...props.style,
 					height: props.style?.height,
-					transition: 'all .3s',
+					transition: 'all 0.5s cubic-bezier(0.65, 0, 0.45, 1)', // Maps to the .block-editor-iframe__html transition.
 				} }
 				ref={ useMergeRefs( [ ref, setRef ] ) }
 				tabIndex={ tabIndex }

From f24afa217db348f9a3492dd0846dd524dbffb113 Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Thu, 1 Aug 2024 15:18:55 -0400
Subject: [PATCH 6/8] move mobile/tablet up a little

---
 packages/block-editor/src/components/use-resize-canvas/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/use-resize-canvas/index.js b/packages/block-editor/src/components/use-resize-canvas/index.js
index 27c898735e1df1..7243b0f1b0b82f 100644
--- a/packages/block-editor/src/components/use-resize-canvas/index.js
+++ b/packages/block-editor/src/components/use-resize-canvas/index.js
@@ -43,7 +43,7 @@ export default function useResizeCanvas( deviceType ) {
 		return deviceWidth < actualWidth ? deviceWidth : actualWidth;
 	};
 
-	const marginValue = () => ( window.innerHeight < 800 ? 36 : 72 );
+	const marginValue = () => ( window.innerHeight < 800 ? 36 : 64 );
 
 	const contentInlineStyles = ( device ) => {
 		const height = device === 'Mobile' ? '768px' : '1024px';

From 274108e56981b2acddf9ac8d4fb0d17ab8addbfc Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Thu, 1 Aug 2024 15:22:51 -0400
Subject: [PATCH 7/8] use all transition

---
 packages/block-editor/src/components/iframe/content.scss | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index 3593edf2a4be57..ff9d186be6e541 100644
--- a/packages/block-editor/src/components/iframe/content.scss
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -22,11 +22,9 @@
 }
 
 .block-editor-iframe__html {
-	$beizer: cubic-bezier(0.65, 0, 0.45, 1);
-	$duration: 0.5s;
 	border: 0 solid $gray-300;
 	transform-origin: top center;
-	transition: transform $duration $beizer, background $duration $beizer, border $duration $beizer, margin $duration $beizer;
+	transition: all  0.5s cubic-bezier(0.65, 0, 0.45, 1);
 	@include reduce-motion("transition");
 }
 
@@ -57,7 +55,6 @@
 		display: flex;
 		flex-direction: column;
 
-
 		> .is-root-container:not(.wp-block-post-content) {
 			flex: 1;
 			display: flex;

From c66a8d985d51fcaa4100fbfbbc8e423d0c8c2d1c Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Fri, 2 Aug 2024 13:03:05 -0500
Subject: [PATCH 8/8] Move editor canvas and iframe sizing transitions to
 shared mixin

---
 packages/base-styles/_animations.scss                        | 5 +++++
 packages/block-editor/src/components/block-canvas/style.scss | 1 +
 packages/block-editor/src/components/iframe/content.scss     | 3 +--
 packages/block-editor/src/components/iframe/index.js         | 1 -
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/base-styles/_animations.scss b/packages/base-styles/_animations.scss
index b5e6655e660cbb..bdfd7595da8e44 100644
--- a/packages/base-styles/_animations.scss
+++ b/packages/base-styles/_animations.scss
@@ -3,3 +3,8 @@
 	animation-fill-mode: forwards;
 	@include reduce-motion("animation");
 }
+
+@mixin editor-canvas-resize-animation() {
+	transition: all 0.5s cubic-bezier(0.65, 0, 0.45, 1);
+	@include reduce-motion("transition");
+}
diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss
index 9e924cb79bace1..1395b5c0a437d3 100644
--- a/packages/block-editor/src/components/block-canvas/style.scss
+++ b/packages/block-editor/src/components/block-canvas/style.scss
@@ -4,4 +4,5 @@ iframe[name="editor-canvas"] {
 	height: 100%;
 	display: block;
 	background-color: transparent;
+	@include editor-canvas-resize-animation;
 }
diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index ff9d186be6e541..90b887993bf6db 100644
--- a/packages/block-editor/src/components/iframe/content.scss
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -24,8 +24,7 @@
 .block-editor-iframe__html {
 	border: 0 solid $gray-300;
 	transform-origin: top center;
-	transition: all  0.5s cubic-bezier(0.65, 0, 0.45, 1);
-	@include reduce-motion("transition");
+	@include editor-canvas-resize-animation;
 }
 
 .block-editor-iframe__html.is-zoomed-out {
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index b0d1c872a9d586..3b0bce6d56b403 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -380,7 +380,6 @@ function Iframe( {
 				style={ {
 					...props.style,
 					height: props.style?.height,
-					transition: 'all 0.5s cubic-bezier(0.65, 0, 0.45, 1)', // Maps to the .block-editor-iframe__html transition.
 				} }
 				ref={ useMergeRefs( [ ref, setRef ] ) }
 				tabIndex={ tabIndex }