From a95ca7227055e06a3b0bcad8f65535da3b1bb8df Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Mon, 14 Oct 2024 18:35:58 -0700
Subject: [PATCH 1/2] Hide overflow; add delay to prompt; revise font scale

---
 .../src/components/block-list/content.scss           |  5 +++--
 .../src/components/block-list/zoom-out-separator.js  | 12 +++++++-----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
index 6a88813b0c6049..b42ebe349d5997 100644
--- a/packages/block-editor/src/components/block-list/content.scss
+++ b/packages/block-editor/src/components/block-list/content.scss
@@ -404,14 +404,15 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	overflow: hidden;
 	font-size: $default-font-size;
 	font-family: $default-font;
 	color: $black;
 	font-weight: normal;
 
 	.is-zoomed-out & {
-		// Scale the font size based on the zoom level.
-		font-size: calc(#{$default-font-size} * ( 2 - var(--wp-block-editor-iframe-zoom-out-scale)  ));
+		// Maintains an absolute font-size by counter-scaling based on the zoom level.
+		font-size: calc(#{$default-font-size} / var(--wp-block-editor-iframe-zoom-out-scale));
 	}
 
 	&.is-dragged-over {
diff --git a/packages/block-editor/src/components/block-list/zoom-out-separator.js b/packages/block-editor/src/components/block-list/zoom-out-separator.js
index 9e0d087c2267cd..98f03838a3cb3f 100644
--- a/packages/block-editor/src/components/block-list/zoom-out-separator.js
+++ b/packages/block-editor/src/components/block-list/zoom-out-separator.js
@@ -101,14 +101,15 @@ export function ZoomOutSeparator( {
 		<AnimatePresence>
 			{ isVisible && (
 				<motion.div
-					as="button"
-					layout={ ! isReducedMotion }
 					initial={ { height: 0 } }
-					animate={ { height: '120px' } }
+					animate={ {
+						// Use a height equal to that of the zoom out frame size.
+						height: 'calc(1 * var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale)',
+					} }
 					exit={ { height: 0 } }
 					transition={ {
 						type: 'tween',
-						duration: 0.2,
+						duration: isReducedMotion ? 0 : 0.2,
 						ease: [ 0.6, 0, 0.4, 1 ],
 					} }
 					className={ clsx(
@@ -124,10 +125,11 @@ export function ZoomOutSeparator( {
 					<motion.div
 						initial={ { opacity: 0 } }
 						animate={ { opacity: 1 } }
-						exit={ { opacity: 0 } }
+						exit={ { opacity: 0, transition: { delay: 0 } } }
 						transition={ {
 							type: 'tween',
 							duration: 0.1,
+							delay: 0.1,
 						} }
 					>
 						{ __( 'Drop pattern.' ) }

From c3c002ab3984097894ddad790683591059e8627f Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Mon, 14 Oct 2024 19:33:20 -0700
Subject: [PATCH 2/2] Tweak prompt text transition

---
 .../src/components/block-list/zoom-out-separator.js         | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/zoom-out-separator.js b/packages/block-editor/src/components/block-list/zoom-out-separator.js
index 98f03838a3cb3f..f2e6d050141fb5 100644
--- a/packages/block-editor/src/components/block-list/zoom-out-separator.js
+++ b/packages/block-editor/src/components/block-list/zoom-out-separator.js
@@ -125,11 +125,11 @@ export function ZoomOutSeparator( {
 					<motion.div
 						initial={ { opacity: 0 } }
 						animate={ { opacity: 1 } }
-						exit={ { opacity: 0, transition: { delay: 0 } } }
+						exit={ { opacity: 0, transition: { delay: -0.125 } } }
 						transition={ {
-							type: 'tween',
+							ease: 'linear',
 							duration: 0.1,
-							delay: 0.1,
+							delay: 0.125,
 						} }
 					>
 						{ __( 'Drop pattern.' ) }