From d205733aaa20207e3ac50f6360c78bf5470f5776 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Wed, 6 Feb 2019 12:30:16 +0100
Subject: [PATCH] Try: Make it easier to select the Separator
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The separator is usually very thin, almost by definition. This makes it hard to select.

This PR tries to make the hit area for the block bigger, therefore easier to select.

It does so at the cost of a little overlap — but this seems worth it. What are your thoughts?
---
 packages/block-library/src/editor.scss           |  1 +
 packages/block-library/src/separator/editor.scss | 13 +++++++++++++
 2 files changed, 14 insertions(+)
 create mode 100644 packages/block-library/src/separator/editor.scss

diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
index b5778d5b472ff9..2bf5a68097a78b 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -24,6 +24,7 @@
 @import "./quote/editor.scss";
 @import "./rss/editor.scss";
 @import "./search/editor.scss";
+@import "./separator/editor.scss";
 @import "./shortcode/editor.scss";
 @import "./spacer/editor.scss";
 @import "./subhead/editor.scss";
diff --git a/packages/block-library/src/separator/editor.scss b/packages/block-library/src/separator/editor.scss
new file mode 100644
index 00000000000000..d1897dd83cafd1
--- /dev/null
+++ b/packages/block-library/src/separator/editor.scss
@@ -0,0 +1,13 @@
+.wp-block-separator {
+	// Make the separator hit area bigger, to make it more easy to select.
+	&::after {
+		content: "";
+		display: block;
+		padding-bottom: $icon-button-size-small;
+		position: relative;
+		top: ($icon-button-size-small / 2);
+	}
+	margin-top: -($icon-button-size-small / 2);
+	margin-bottom: -$icon-button-size-small / 2;
+	transform: translateY(-$icon-button-size-small / 2);
+}