Try: Make it easier to select the Separator

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?
WordPress · Feb 8, 2019 · d205733 · d205733
1 parent 8ba4a20
commit d205733
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git 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
@@ -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);
+}