From e85dce86a236cff6721d922acc31607e30d8bc09 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Fri, 8 Jun 2018 09:52:34 +0200 Subject: [PATCH 1/5] Try sibling inserter tweaks This PR is based on feedback in #7168. It does this: - It doesn't show the sibling inserter when hovering before the selected block. - It shows the separator line when hovering the plus, never before. This PR is a "try", and if we like it we'd want to make a few further improvements. Like we might actually want to allow showing the sibling inserter _before_ the selected block, if the user has chosen to dock the block toolbar to the top. We might also want to look at improving it further by fading out hover outlines if you're hovering the sibling inserter. We'd need someone like @aduth or @youknowriad's help here. --- .../components/block-list/insertion-point.js | 1 + editor/components/block-list/style.scss | 37 +++++++++++++++---- 2 files changed, 30 insertions(+), 8 deletions(-) diff --git a/editor/components/block-list/insertion-point.js b/editor/components/block-list/insertion-point.js index f205d6812dd68..fdea1af4b609f 100644 --- a/editor/components/block-list/insertion-point.js +++ b/editor/components/block-list/insertion-point.js @@ -64,6 +64,7 @@ class BlockInsertionPoint extends Component { onFocus={ this.onFocusInserter } onBlur={ this.onBlurInserter } /> +
) } diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index 0b2c228fc836c..4adc68ede8be7 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -682,7 +682,7 @@ height: $block-padding * 2; // Matches the whole empty space between two blocks justify-content: center; - // Show a clickable plus + // Show a clickable plus. .editor-block-list__insertion-point-button { margin-top: -4px; border-radius: 50%; @@ -695,25 +695,46 @@ box-shadow: none; } + // Show the sibling inserter indicator when hovering the plus button. + &:hover + .editor-block-list__insertion-point-sibling-indicator { + left: $block-padding; + right: $block-padding; + opacity: 1; + } } - // Show a line indicator when hovering, but this is unclickable - &:before { + // This is the indicator shown when using the Sibling Inserter. + .editor-block-list__insertion-point-sibling-indicator { + transition: all 0.1s ease-out 0.1s; position: absolute; + z-index: -1; top: calc( 50% - #{ $border-width } ); height: 2px; - left: 0; - right: 0; - background: $dark-gray-100; + left: 50%; + right: 50%; + background: $dark-gray-500; content: ''; + opacity: 0; } - // Hide both the line and button until hovered + // Hide both the line and button until hovered. opacity: 0; transition: opacity 0.1s linear 0.1s; - &:hover, &.is-visible { + &:hover, + &.is-visible { + opacity: 1; + } +} + +// Don't show the sibling inserter before the selected block. +.edit-post-layout:not( .has-fixed-toolbar ) .is-selected .editor-block-list__insertion-point-inserter { + opacity: 0; + pointer-events: none; + + &.is-visible { opacity: 1; + pointer-events: auto; } } From 7cabdf6ee59df9ea0e2163de620a2da9008a458c Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 13 Jun 2018 13:00:34 +0200 Subject: [PATCH 2/5] Remove the line that appeared on hover. Since it only appears on hover, it doesn't help discovery, and although the point is to show where you will insert things, it adds clutter next to the hovered outlines. --- .../components/block-list/insertion-point.js | 1 - editor/components/block-list/style.scss | 23 +------------------ 2 files changed, 1 insertion(+), 23 deletions(-) diff --git a/editor/components/block-list/insertion-point.js b/editor/components/block-list/insertion-point.js index fdea1af4b609f..f205d6812dd68 100644 --- a/editor/components/block-list/insertion-point.js +++ b/editor/components/block-list/insertion-point.js @@ -64,7 +64,6 @@ class BlockInsertionPoint extends Component { onFocus={ this.onFocusInserter } onBlur={ this.onBlurInserter } /> -
) } diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index 4adc68ede8be7..fa717015a8065 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -694,30 +694,9 @@ &:not(:disabled):not([aria-disabled="true"]):hover { box-shadow: none; } - - // Show the sibling inserter indicator when hovering the plus button. - &:hover + .editor-block-list__insertion-point-sibling-indicator { - left: $block-padding; - right: $block-padding; - opacity: 1; - } - } - - // This is the indicator shown when using the Sibling Inserter. - .editor-block-list__insertion-point-sibling-indicator { - transition: all 0.1s ease-out 0.1s; - position: absolute; - z-index: -1; - top: calc( 50% - #{ $border-width } ); - height: 2px; - left: 50%; - right: 50%; - background: $dark-gray-500; - content: ''; - opacity: 0; } - // Hide both the line and button until hovered. + // Hide both the button until hovered. opacity: 0; transition: opacity 0.1s linear 0.1s; From 63082790af8b18ea31d97a6349908c2d9c988de6 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 14 Jun 2018 09:44:48 +0200 Subject: [PATCH 3/5] Fix sibling inserter in nested contexts. --- editor/components/block-list/style.scss | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index fa717015a8065..69a9fde0fbe07 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -707,13 +707,16 @@ } // Don't show the sibling inserter before the selected block. -.edit-post-layout:not( .has-fixed-toolbar ) .is-selected .editor-block-list__insertion-point-inserter { - opacity: 0; - pointer-events: none; +.edit-post-layout:not( .has-fixed-toolbar ) { + // The child selector is necessary for this to work properly in nested contexts. + .is-selected > .editor-block-list__insertion-point > .editor-block-list__insertion-point-inserter { + opacity: 0; + pointer-events: none; - &.is-visible { - opacity: 1; - pointer-events: auto; + &.is-visible { + opacity: 1; + pointer-events: auto; + } } } From 17556403b15de3f8970a0327ea5050785671ea89 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 20 Jun 2018 09:45:07 +0200 Subject: [PATCH 4/5] Make plus blue. --- editor/components/block-list/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index 69a9fde0fbe07..3584c26626524 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -686,7 +686,7 @@ .editor-block-list__insertion-point-button { margin-top: -4px; border-radius: 50%; - color: $dark-gray-100; + color: $blue-medium-focus; background: $white; height: $block-padding * 2 + 8px; width: $block-padding * 2 + 8px; From de4ae74e609d8c64b65426b503eeac49fbaf6ebd Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 20 Jun 2018 10:45:39 +0100 Subject: [PATCH 5/5] Hide the outline when we click the in between inserter --- editor/components/block-list/block.js | 1 + editor/components/block-list/insertion-point.js | 3 +++ 2 files changed, 4 insertions(+) diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js index 9bd750672ccbc..6a7b1f78a4b8c 100644 --- a/editor/components/block-list/block.js +++ b/editor/components/block-list/block.js @@ -510,6 +510,7 @@ export class BlockListBlock extends Component { rootUID={ rootUID } layout={ layout } canShowInserter={ canShowInBetweenInserter } + onInsert={ this.hideHoverEffects } /> ) }