Add prompt to zoom out separator (#65392)

* Add prompt to separator * updated the text to be animated too and to have contextual messageing - drop or insert * Fix font size * Scale font size based on zoom scale * Force font weight reset * Remove dynamic text * adds a color to the test which somehow gets the same color as the babacground after rebase on trunk * bogus change for our pipeline * revert bogus change for our pipeline to restart --------- Co-authored-by: getdave <[email protected]> Co-authored-by: draganescu <[email protected]> Co-authored-by: jasmussen <[email protected]>
WordPress · Sep 28, 2024 · ef84f51 · ef84f51
1 parent d26e784
commit ef84f51
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
@@ -461,6 +461,18 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	margin-left: -1px;
 	margin-right: -1px;
 	transition: background-color 0.3s ease;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	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)  ));
+	}
 
 	&.is-dragged-over {
 		background: $gray-400;

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
@@ -13,6 +13,7 @@ import {
 import { useReducedMotion } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -103,7 +104,19 @@ export function ZoomOutSeparator( {
 					data-is-insertion-point="true"
 					onDragOver={ () => setIsDraggedOver( true ) }
 					onDragLeave={ () => setIsDraggedOver( false ) }
-				></motion.div>
+				>
+					<motion.div
+						initial={ { opacity: 0 } }
+						animate={ { opacity: 1 } }
+						exit={ { opacity: 0 } }
+						transition={ {
+							type: 'tween',
+							duration: 0.1,
+						} }
+					>
+						{ __( 'Drop pattern.' ) }
+					</motion.div>
+				</motion.div>
 			) }
 		</AnimatePresence>
 	);