From 73c9244ea5c10b4224d4fe15db76713a814eab01 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Mon, 21 Sep 2020 15:19:35 -0700
Subject: [PATCH] allow spacer blocks of 1px yet keep editor accuracy and
 selectability

---
 packages/block-library/src/spacer/edit.js     | 19 ++++++++++++++++++-
 packages/block-library/src/spacer/editor.scss |  4 ++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js
index 445dbd7fc4598..ca8468e25ad63 100644
--- a/packages/block-library/src/spacer/edit.js
+++ b/packages/block-library/src/spacer/edit.js
@@ -13,8 +13,9 @@ import { compose, withInstanceId } from '@wordpress/compose';
 import { withDispatch } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 
-const MIN_SPACER_HEIGHT = 20;
+const MIN_SPACER_HEIGHT = 1;
 const MAX_SPACER_HEIGHT = 500;
+const MIN_SPACER_HEIGHT_EDITOR = 48;
 
 const SpacerEdit = ( {
 	attributes,
@@ -31,6 +32,20 @@ const SpacerEdit = ( {
 		} );
 	};
 
+	const style = {};
+
+	const updateStyle = ( newHeight ) => {
+		const cheat = Math.max( 0, MIN_SPACER_HEIGHT_EDITOR - newHeight ) / 2;
+		style.top = `${ cheat }px`;
+		style.margin = `-${ cheat }px 0`;
+	};
+
+	updateStyle( height );
+
+	const handleOnResize = ( event, direction, elt, delta ) => {
+		updateStyle( parseInt( height + delta.height, 10 ) );
+	};
+
 	const handleOnResizeStart = ( ...args ) => {
 		onResizeStart( ...args );
 		setIsResizing( true );
@@ -58,6 +73,7 @@ const SpacerEdit = ( {
 				size={ {
 					height,
 				} }
+				style={ style }
 				minHeight={ MIN_SPACER_HEIGHT }
 				enable={ {
 					top: false,
@@ -69,6 +85,7 @@ const SpacerEdit = ( {
 					bottomLeft: false,
 					topLeft: false,
 				} }
+				onResize={ handleOnResize }
 				onResizeStart={ handleOnResizeStart }
 				onResizeStop={ handleOnResizeStop }
 				showHandle={ isSelected }
diff --git a/packages/block-library/src/spacer/editor.scss b/packages/block-library/src/spacer/editor.scss
index 7b359a4bb1279..32429c94ba6bd 100644
--- a/packages/block-library/src/spacer/editor.scss
+++ b/packages/block-library/src/spacer/editor.scss
@@ -1,3 +1,7 @@
+.block-editor-block-list__block[data-type="core/spacer"] {
+	min-height: 48px;
+}
+
 .block-library-spacer__resize-container.has-show-handle {
 	background: $gray-100;