diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js index fb03d7b7d0c4a..9a1db98f9dad0 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; @@ -470,7 +471,7 @@ export class BlockListBlock extends Component { ] } { ...wrapperProps } > - { ! isMultiSelected && ( + { ! isMultiSelected && isMovable && ( { 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..9676ead1f1cfe 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -934,3 +934,30 @@ content: '←'; } } + +.editor-block-list__block { + @include break-small { + // 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; + top: 0; + } + + // 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; + } + } +}