From 9acc41965d19611c086821c2652eac988628afdc Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Tue, 15 Oct 2024 07:49:40 -0700
Subject: [PATCH] Polish zoom out inserter (#66110)

* Hide overflow; add delay to prompt; revise font scale

* Tweak prompt text transition
---
 .../src/components/block-list/content.scss         |  5 +++--
 .../components/block-list/zoom-out-separator.js    | 14 ++++++++------
 2 files changed, 11 insertions(+), 8 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..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
@@ -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.125 } } }
 						transition={ {
-							type: 'tween',
+							ease: 'linear',
 							duration: 0.1,
+							delay: 0.125,
 						} }
 					>
 						{ __( 'Drop pattern.' ) }