Add active indictator

WordPress · May 8, 2024 · b0f5bb9 · b0f5bb9
1 parent 2b72322
commit b0f5bb9
Showing 1 changed file with 31 additions and 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
@@ -55,34 +55,44 @@ function ZoomOutModeInserters() {
 	}
 
 	return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
-		if ( insertionPoint.insertionIndex === index ) {
-			return null;
-		}
 		return (
 			<BlockPopoverInbetween
 				key={ index }
 				previousClientId={ clientId }
 				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>
 		);
 	} );