From 1a78cd219728f07e29b70f6cb4a7fae5aca3114f Mon Sep 17 00:00:00 2001 From: Jorge Date: Fri, 8 Jun 2018 10:45:15 +0100 Subject: [PATCH 1/3] Don't allow to start dragging blocks if a locking lock all exists --- components/draggable/README.md | 8 ++++++++ components/draggable/index.js | 4 ++-- editor/components/block-list/block.js | 3 +++ editor/components/block-list/style.scss | 7 ++++--- 4 files changed, 17 insertions(+), 5 deletions(-) diff --git a/components/draggable/README.md b/components/draggable/README.md index 974f1eab06db6..8752607dadbcd 100644 --- a/components/draggable/README.md +++ b/components/draggable/README.md @@ -6,6 +6,14 @@ The component accepts the following props: +### draggable + +If the component is in a draggable state or not. If false, the component is rendered but it is not possible to drag it. Defaults to true. + +- Type: `boolean` +- Required: No +- Default: `true` + ### elementId The HTML id of the element to clone on drag diff --git a/components/draggable/index.js b/components/draggable/index.js index ec0ac57464c2d..586432c882545 100644 --- a/components/draggable/index.js +++ b/components/draggable/index.js @@ -152,13 +152,13 @@ class Draggable extends Component { } render() { - const { children, className } = this.props; + const { children, draggable = true, className } = this.props; return (
{ children }
diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js index fb03d7b7d0c4a..bcb5a19293cb8 100644 --- a/editor/components/block-list/block.js +++ b/editor/components/block-list/block.js @@ -387,6 +387,7 @@ export class BlockListBlock extends Component { hoverArea, isLargeViewport, isEmptyDefaultBlock, + isMovable, isPreviousBlockADefaultEmptyBlock, hasSelectedInnerBlock, } = this.props; @@ -480,6 +481,7 @@ export class BlockListBlock extends Component { onDragEnd={ this.onDragEnd } isDragging={ dragging } elementId={ blockElementId } + draggable={ isMovable } // only in locking all moving blocks is totally impossible /> ) } { shouldShowInsertionPoint && ( @@ -620,6 +622,7 @@ const applyWithSelect = withSelect( ( select, { uid, rootUID } ) => { initialPosition: getSelectedBlocksInitialCaretPosition(), isEmptyDefaultBlock: block && isUnmodifiedDefaultBlock( block ), isPreviousBlockADefaultEmptyBlock: previousBlock && isUnmodifiedDefaultBlock( previousBlock ), + isMovable: 'all' !== templateLock, isLocked: !! templateLock, previousBlockUid, block, diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index 0bcaac46b62a4..7a03d7d8cff37 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -74,9 +74,10 @@ } } - - cursor: move; // Fallback for IE/Edge < 14 - cursor: grab; + &[draggable=true]{ + cursor: move; // Fallback for IE/Edge < 14 + cursor: grab; + } } From 627beeadeee5a615393110f89dfcbc13fe90adb5 Mon Sep 17 00:00:00 2001 From: Jorge Date: Fri, 22 Jun 2018 15:53:10 +0100 Subject: [PATCH 2/3] Refact block hover and select css --- components/draggable/README.md | 8 ------- components/draggable/index.js | 4 ++-- editor/components/block-list/block.js | 3 +-- editor/components/block-list/style.scss | 32 +++++++++++++++++++++---- 4 files changed, 31 insertions(+), 16 deletions(-) diff --git a/components/draggable/README.md b/components/draggable/README.md index 8752607dadbcd..974f1eab06db6 100644 --- a/components/draggable/README.md +++ b/components/draggable/README.md @@ -6,14 +6,6 @@ The component accepts the following props: -### draggable - -If the component is in a draggable state or not. If false, the component is rendered but it is not possible to drag it. Defaults to true. - -- Type: `boolean` -- Required: No -- Default: `true` - ### elementId The HTML id of the element to clone on drag diff --git a/components/draggable/index.js b/components/draggable/index.js index 586432c882545..ec0ac57464c2d 100644 --- a/components/draggable/index.js +++ b/components/draggable/index.js @@ -152,13 +152,13 @@ class Draggable extends Component { } render() { - const { children, draggable = true, className } = this.props; + const { children, className } = this.props; return (
{ children }
diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js index bcb5a19293cb8..9a1db98f9dad0 100644 --- a/editor/components/block-list/block.js +++ b/editor/components/block-list/block.js @@ -471,7 +471,7 @@ export class BlockListBlock extends Component { ] } { ...wrapperProps } > - { ! isMultiSelected && ( + { ! isMultiSelected && isMovable && ( ) } { shouldShowInsertionPoint && ( diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index 7a03d7d8cff37..f400f5f02e6fd 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -74,10 +74,9 @@ } } - &[draggable=true]{ - cursor: move; // Fallback for IE/Edge < 14 - cursor: grab; - } + + cursor: move; // Fallback for IE/Edge < 14 + cursor: grab; } @@ -935,3 +934,28 @@ content: '←'; } } + +.editor-block-list__block { + @include break-small { + // Increases the hover and selection area around blocks. + // This makes the blue hover line, and the settings button appear even if the mouse, + // is still some pixels outside the block. + // It is also possible to click some pixels outside the block and select it. + &:before { + content: ''; + position: absolute; + right: -$parent-block-padding - $block-padding; + left: -$parent-block-padding - $block-padding; + + bottom: 0; + top: 0; + } + + // Removes the effect of the previous rule on nested blocks, + // so it only applies to top-level blocks. + & &:before { + left: 0; + right: 0; + } + } +} From 379ed22eaf68d00ebeb1998d79d130d17ac365f0 Mon Sep 17 00:00:00 2001 From: "Matthew Riley MacPherson (tofumatt)" Date: Tue, 26 Jun 2018 19:23:07 +0100 Subject: [PATCH 3/3] docs: Clarify docs and fix whitespace --- editor/components/block-list/style.scss | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index f400f5f02e6fd..9676ead1f1cfe 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -937,22 +937,24 @@ .editor-block-list__block { @include break-small { - // Increases the hover and selection area around blocks. - // This makes the blue hover line, and the settings button appear even if the mouse, - // is still some pixels outside the block. - // It is also possible to click some pixels outside the block and select it. + // Increase the hover and selection area around blocks. + // This makes the blue hover line and the settings button appear even if + // the mouse cursor is technically outside the block. + // This improves usability by making it possible to click somewhat outside + // the block and select it. (eg. A fuzzy click target.) &:before { + bottom: 0; content: ''; + left: -$parent-block-padding - $block-padding; position: absolute; right: -$parent-block-padding - $block-padding; - left: -$parent-block-padding - $block-padding; - - bottom: 0; top: 0; } - // Removes the effect of the previous rule on nested blocks, - // so it only applies to top-level blocks. + // Remove the fuzzy click area effect set above on nested blocks. + // It should only applies to top-level blocks; applying this rule to + // nested blocks will result in difficult-to-use and possibly overlapping + // click targets. & &:before { left: 0; right: 0;