Try: Larger drag handles (#10331)

* Try larger drag handles on the spacer block * Move resize styles to mixins, document use of !important, apply to image block * Use BEM-ish/more descriptive names for the mixins * Un-set inline styles on drag handles to avoid !important * Add some full stops, full stop.
WordPress · Oct 4, 2018 · b09005c · b09005c
1 parent fb135fb
commit b09005c
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 26 deletions.
diff --git a/edit-post/assets/stylesheets/_mixins.scss b/edit-post/assets/stylesheets/_mixins.scss
@@ -326,3 +326,29 @@
  // icon standards.
  margin-right: 2px;
 }
+
+
+/**
+ * Styles for resize handles
+ */
+
+@mixin resize-handler__container() {
+ display: none;
+
+ // The handle itself is a pseudo element, and will sit inside this larger
+ // container size.
+ width: $resize-handler-container-size;
+ height: $resize-handler-container-size;
+ padding: $grid-size-small;
+}
+
+@mixin resize-handler__visible-handle() {
+ display: block;
+ content: "";
+ width: $resize-handler-size;
+ height: $resize-handler-size;
+ border: 2px solid $white;
+ border-radius: 50%;
+ background: theme(primary);
+ cursor: inherit;
+}
diff --git a/edit-post/assets/stylesheets/_variables.scss b/edit-post/assets/stylesheets/_variables.scss
@@ -48,6 +48,8 @@ $icon-button-size: 36px;
 $icon-button-size-small: 24px;
 $inserter-tabs-height: 36px;
 $block-toolbar-height: $block-controls-height + $border-width;
+$resize-handler-size: 16px;
+$resize-handler-container-size: $resize-handler-size + ($grid-size-small * 2); // Make the resize handle container larger so there's a larger grabbable area.
 
 // Blocks
 $block-padding: 14px; // padding of nested blocks

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -431,6 +431,16 @@ class ImageEdit extends Component {
  }
  /* eslint-enable no-lonely-if */
 
+ // Removes the inline styles in the drag handles.
+ const handleStylesOverrides = {
+ width: null,
+ height: null,
+ top: null,
+ right: null,
+ bottom: null,
+ left: null,
+ };
+
  return (
  <Fragment>
  { getInspectorControls( imageWidth, imageHeight ) }
@@ -452,6 +462,11 @@ class ImageEdit extends Component {
  bottom: 'block-library-image__resize-handler-bottom',
  left: 'block-library-image__resize-handler-left',
  } }
+ handleStyles={ {
+ right: handleStylesOverrides,
+ bottom: handleStylesOverrides,
+ left: handleStylesOverrides,
+ } }
  enable={ {
  top: false,
  right: showRightHandle,

diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
@@ -25,34 +25,35 @@
 .block-library-image__resize-handler-right,
 .block-library-image__resize-handler-bottom,
 .block-library-image__resize-handler-left {
- display: none;
- border-radius: 50%;
- border: 2px solid $white;
- width: 16px !important;
- height: 16px !important;
- position: absolute;
- background: theme(primary);
+ @include resize-handler__container();
 
  .wp-block-image.is-focused & {
  display: block;
  z-index: z-index(".block-library-image__resize-handlers");
  }
 }
 
+// Draw the visible handle
+.block-library-image__resize-handler-right::before,
+.block-library-image__resize-handler-bottom::before,
+.block-library-image__resize-handler-left::before {
+ @include resize-handler__visible-handle();
+}
+
 /*!rtl:begin:ignore*/
 .block-library-image__resize-handler-right {
- top: calc(50% - 9px) !important;
- right: -8px !important;
+ top: calc(50% - #{$resize-handler-container-size / 2});
+ right: calc(#{$resize-handler-container-size / 2} * -1);
 }
 
 .block-library-image__resize-handler-left {
- top: calc(50% - 9px) !important;
- left: -8px !important;
+ top: calc(50% - #{$resize-handler-container-size / 2});
+ left: calc(#{$resize-handler-container-size / 2} * -1);
 }
 
 .block-library-image__resize-handler-bottom {
- bottom: -8px !important;
- left: calc(50% - 9px) !important;
+ bottom: calc(#{$resize-handler-container-size / 2} * -1);
+ left: calc(50% - #{$resize-handler-container-size / 2});
 }
 /*!rtl:end:ignore*/
 

diff --git a/packages/block-library/src/spacer/editor.scss b/packages/block-library/src/spacer/editor.scss
@@ -1,5 +1,4 @@
 .block-library-spacer__resize-container.is-selected {
- .block-library-spacer__resize-handler-top,
  .block-library-spacer__resize-handler-bottom {
  display: block;
  }
@@ -9,17 +8,15 @@
  background: $light-gray-200;
 }
 
-.block-library-spacer__resize-handler-top,
 .block-library-spacer__resize-handler-bottom {
- display: none;
- border-radius: 50%;
- border: 2px solid $white;
- width: 15px !important;
- height: 15px !important;
+ @include resize-handler__container();
+
+ // Offset the handle container's position.
  position: absolute;
- background: theme(primary);
- padding: 0 3px 3px 0;
- cursor: se-resize;
- left: 50% !important;
- margin-left: -7.5px;
+ bottom: calc(#{$resize-handler-container-size / 2} * -1);
+ left: calc(50% - #{$resize-handler-container-size / 2});
+}
+
+.block-library-spacer__resize-handler-bottom::before {
+ @include resize-handler__visible-handle();
 }
diff --git a/packages/block-library/src/spacer/index.js b/packages/block-library/src/spacer/index.js
@@ -36,6 +36,16 @@ export const settings = {
  const { height } = attributes;
  const id = `block-spacer-height-input-${ instanceId }`;
 
+ // Removes the inline styles in the drag handles.
+ const handleStylesOverrides = {
+ width: null,
+ height: null,
+ top: null,
+ right: null,
+ bottom: null,
+ left: null,
+ };
+
  return (
  <Fragment>
  <ResizableBox
@@ -48,9 +58,11 @@ export const settings = {
  } }
  minHeight="20"
  handleClasses={ {
- top: 'block-library-spacer__resize-handler-top',
  bottom: 'block-library-spacer__resize-handler-bottom',
  } }
+ handleStyles={ {
+ bottom: handleStylesOverrides,
+ } }
  enable={ {
  top: false,
  right: false,