Add style for appender drop target

WordPress · Jan 10, 2020 · 9d3667b · 9d3667b
1 parent 3868c40
commit 9d3667b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js
@@ -30,7 +30,7 @@ function BlockListAppender( {
 	renderAppender: CustomAppender,
 } ) {
 	const ref = useRef();
-	const { position } = useBlockDropZone( {
+	const { isDraggingOverElement } = useBlockDropZone( {
 		element: ref,
 		rootClientId,
 	} );
@@ -79,8 +79,7 @@ function BlockListAppender( {
 			onFocus={ stopPropagation }
 			ref={ ref }
 			className={ classnames( 'block-list-appender', {
-				'is-dragging-close-to-top': position && position.y === 'top',
-				'is-dragging-close-to-bottom': position && position.y === 'bottom',
+				'is-dragging-over': isDraggingOverElement,
 			} ) }
 		>
 			{ appender }

diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss
@@ -10,6 +10,16 @@
 	}
 }
 
+.block-list-appender.is-dragging-over > div::before {
+	content: "";
+	position: absolute;
+	right: -$block-padding;
+	left: -$block-padding;
+	top: -$block-padding;
+	bottom: -$block-padding;
+	border: 3px solid theme(primary);
+}
+
 .block-list-appender > .block-editor-inserter {
 	display: block;
 }