From 7024e02757fcd75d38b28faf37d8c80576e85d68 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Wed, 8 May 2024 18:50:50 +0900
Subject: [PATCH] Add active indictator

---
 .../block-tools/zoom-out-mode-inserters.js    | 52 +++++++++++--------
 1 file changed, 31 insertions(+), 21 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
index 683b06db834308..95826267bf30ee 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -55,9 +55,6 @@ function ZoomOutModeInserters() {
 	}
 
 	return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
-		if ( insertionPoint.insertionIndex === index ) {
-			return null;
-		}
 		return (
 			<BlockPopoverInbetween
 				key={ index }
@@ -65,24 +62,37 @@ function ZoomOutModeInserters() {
 				nextClientId={ blockOrder[ index ] }
 				className="block-editor-button-pattern-inserter"
 			>
-				<Button
-					variant="primary"
-					icon={ plus }
-					size="compact"
-					className="block-editor-button-pattern-inserter__button"
-					onClick={ () => {
-						setInserterIsOpened( {
-							rootClientId: sectionRootClientId,
-							insertionIndex: index,
-							tab: 'patterns',
-							category: 'all',
-						} );
-					} }
-					label={ _x(
-						'Add pattern',
-						'Generic label for pattern inserter button'
-					) }
-				/>
+				{ insertionPoint.insertionIndex === index && (
+					<div
+						style={ {
+							opacity: 1,
+							height: '4px',
+							width: '100%',
+							transform: 'translateY(-50%)',
+						} }
+						className="block-editor-block-list__insertion-point-indicator"
+					/>
+				) }
+				{ insertionPoint.insertionIndex !== index && (
+					<Button
+						variant="primary"
+						icon={ plus }
+						size="compact"
+						className="block-editor-button-pattern-inserter__button"
+						onClick={ () => {
+							setInserterIsOpened( {
+								rootClientId: sectionRootClientId,
+								insertionIndex: index,
+								tab: 'patterns',
+								category: 'all',
+							} );
+						} }
+						label={ _x(
+							'Add pattern',
+							'Generic label for pattern inserter button'
+						) }
+					/>
+				) }
 			</BlockPopoverInbetween>
 		);
 	} );