From 72f3ebc3a7f3318f725d6e954f3a814b3e4618d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Thu, 11 Apr 2019 18:35:07 +0200 Subject: [PATCH 1/8] Input Interaction: restore collapsing selection before edge calc (#14906) * Input Interaction: restore collapsing selection before edge calc * Add e2e test * Fix other e2e test * Clean up * Do not modify live range in getRectangleFromRange --- packages/dom/src/dom.js | 17 ++++++++++++++--- .../__snapshots__/writing-flow.test.js.snap | 10 ++++++++++ packages/e2e-tests/specs/adding-blocks.test.js | 1 - packages/e2e-tests/specs/writing-flow.test.js | 15 +++++++++++++++ 4 files changed, 39 insertions(+), 4 deletions(-) diff --git a/packages/dom/src/dom.js b/packages/dom/src/dom.js index 8be06daaaa3203..aba561f992d593 100644 --- a/packages/dom/src/dom.js +++ b/packages/dom/src/dom.js @@ -93,7 +93,16 @@ function isEdge( container, isReverse, onlyVertical ) { return false; } - const rangeRect = getRectangleFromRange( selection.getRangeAt( 0 ) ); + const range = selection.getRangeAt( 0 ).cloneRange(); + const isForward = isSelectionForward( selection ); + const isCollapsed = selection.isCollapsed; + + // Collapse in direction of selection. + if ( ! isCollapsed ) { + range.collapse( ! isForward ); + } + + const rangeRect = getRectangleFromRange( range ); if ( ! rangeRect ) { return false; @@ -105,9 +114,9 @@ function isEdge( container, isReverse, onlyVertical ) { // Only consider the multiline selection at the edge if the direction is // towards the edge. if ( - ! selection.isCollapsed && + ! isCollapsed && rangeRect.height > lineHeight && - isSelectionForward( selection ) === isReverse + isForward === isReverse ) { return false; } @@ -213,6 +222,8 @@ export function getRectangleFromRange( range ) { // See: https://stackoverflow.com/a/6847328/995445 if ( ! rect ) { const padNode = document.createTextNode( '\u200b' ); + // Do not modify the live range. + range = range.cloneRange(); range.insertNode( padNode ); rect = range.getClientRects()[ 0 ]; padNode.parentNode.removeChild( padNode ); diff --git a/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap b/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap index 0ea51c111b7981..0e41868f3cffa7 100644 --- a/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap +++ b/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap @@ -187,3 +187,13 @@ exports[`adding blocks should not delete surrounding space when deleting a word

1 2 3

" `; + +exports[`adding blocks should not prematurely multi-select 1`] = ` +" +

1

+ + + +

>

+" +`; diff --git a/packages/e2e-tests/specs/adding-blocks.test.js b/packages/e2e-tests/specs/adding-blocks.test.js index 7a790862e831c4..aeafc65cd8cc39 100644 --- a/packages/e2e-tests/specs/adding-blocks.test.js +++ b/packages/e2e-tests/specs/adding-blocks.test.js @@ -66,7 +66,6 @@ describe( 'adding blocks', () => { await page.keyboard.type( 'Foo' ); await page.keyboard.press( 'ArrowUp' ); await page.keyboard.press( 'ArrowUp' ); - await pressKeyTimes( 'ArrowRight', 3 ); await pressKeyTimes( 'Delete', 6 ); await page.keyboard.type( ' text' ); diff --git a/packages/e2e-tests/specs/writing-flow.test.js b/packages/e2e-tests/specs/writing-flow.test.js index c3c4d477e13780..c9ca7bf2021df7 100644 --- a/packages/e2e-tests/specs/writing-flow.test.js +++ b/packages/e2e-tests/specs/writing-flow.test.js @@ -327,4 +327,19 @@ describe( 'adding blocks', () => { expect( await getEditedPostContent() ).toMatchSnapshot(); } ); + + it( 'should not prematurely multi-select', async () => { + await clickBlockAppender(); + await page.keyboard.type( '1' ); + await page.keyboard.press( 'Enter' ); + await page.keyboard.type( '><<' ); + await pressKeyWithModifier( 'shift', 'Enter' ); + await page.keyboard.type( '<<<' ); + await page.keyboard.down( 'Shift' ); + await pressKeyTimes( 'ArrowLeft', '<<\n<<<'.length ); + await page.keyboard.up( 'Shift' ); + await page.keyboard.press( 'Backspace' ); + + expect( await getEditedPostContent() ).toMatchSnapshot(); + } ); } ); From 1aa1d5fe4201b2ee496ead84b814193851a5b319 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 17 Apr 2019 10:46:23 -0400 Subject: [PATCH 2/8] Block Editor: Restore direct descendent style selectors for block --- .../src/components/block-list/style.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index a1a358cbc84e3e..f279c1b623c9f1 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -415,7 +415,7 @@ z-index: z-index(".block-editor-block-list__block {core/image aligned wide or fullwide}"); // Mover and settings above - > .block-editor-block-mover { + > .block-editor-block-list__block-edit > .block-editor-block-mover { // This moves the menu up by the height of the button + border + padding. top: -$block-side-ui-width - $block-padding - $block-side-ui-clearance; bottom: auto; @@ -429,22 +429,22 @@ } } - > .block-editor-block-mover .block-editor-block-mover__control { + > .block-editor-block-list__block-edit > .block-editor-block-mover .block-editor-block-mover__control { float: left; } // Position hover label on the right - > .block-editor-block-list__breadcrumb { + > .block-editor-block-list__block-edit > .block-editor-block-list__breadcrumb { right: -$border-width; } // Hide mover until wide breakpoints, or it might be covered by toolbar - > .block-editor-block-mover { + > .block-editor-block-list__block-edit > .block-editor-block-mover { display: none; } @include break-wide() { - > .block-editor-block-mover { + > .block-editor-block-list__block-edit > .block-editor-block-mover { display: block; } } @@ -461,7 +461,7 @@ // Wide &[data-align="wide"] { // Position mover - > .block-editor-block-mover { + > .block-editor-block-list__block-edit > .block-editor-block-mover { left: -$block-padding + $border-width; } } @@ -503,7 +503,7 @@ } // Position mover - > .block-editor-block-mover { + > .block-editor-block-list__block-edit > .block-editor-block-mover { left: $border-width; } } @@ -913,7 +913,7 @@ } } -.block-editor-block-list__block.is-focus-mode:not(.is-multi-selected) > .block-editor-block-contextual-toolbar { +.block-editor-block-list__block.is-focus-mode:not(.is-multi-selected) > .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar { margin-left: -$block-side-ui-width; } From 5d18177e2124960ccc949a5830f1933763c480f7 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 17 Apr 2019 10:46:47 -0400 Subject: [PATCH 3/8] Block Editor: Show block breadcrumb on right for full align --- packages/block-editor/src/components/block-list/style.scss | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index f279c1b623c9f1..ddc21783100a1c 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -436,6 +436,7 @@ // Position hover label on the right > .block-editor-block-list__block-edit > .block-editor-block-list__breadcrumb { right: -$border-width; + left: auto; } // Hide mover until wide breakpoints, or it might be covered by toolbar @@ -468,11 +469,6 @@ // Full-wide &[data-align="full"] { - // Position hover label on the left for the top level block. - > .block-editor-block-list__block-edit > .block-editor-block-list__breadcrumb { - left: 0; - } - // Compensate for main container padding and subtract border. @include break-small() { margin-left: -$block-side-ui-width - $block-padding - $block-side-ui-clearance - $border-width; From fb2cad71aafb34b4de64b142fab7c4e3f8b9fb32 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 17 Apr 2019 17:23:43 +0200 Subject: [PATCH 4/8] Center the block toolbar on wide alignments. --- packages/edit-post/src/components/visual-editor/style.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss index 1ba9ce38e01139..3000a9cdf557c5 100644 --- a/packages/edit-post/src/components/visual-editor/style.scss +++ b/packages/edit-post/src/components/visual-editor/style.scss @@ -27,8 +27,9 @@ margin-right: -$block-side-ui-width; } - // Center the block toolbar on full-wide blocks. + // Center the block toolbar on wide and full-wide blocks. // Use specific selector to not affect nested block toolbars. + &[data-align="wide"] > .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar, &[data-align="full"] > .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar { height: 0; // This collapses the container to an invisible element without margin. width: 100%; From dba1f43e1b6a2684d94105394f1d1b7c4d196532 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 17 Apr 2019 17:35:56 +0200 Subject: [PATCH 5/8] Make the button clickable. --- packages/block-editor/src/components/block-list/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index ddc21783100a1c..3ad511bd91307c 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -422,7 +422,6 @@ min-height: 0; height: auto; width: auto; - z-index: inherit; &::before { content: none; From e76e7f61554a4e553ba80eb8fe0770e6063d5057 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 17 Apr 2019 11:40:11 -0400 Subject: [PATCH 6/8] Revert "Block Editor: Show block breadcrumb on right for full align" This reverts commit eb4febf785d5e2ab89bdd82b43548bdc82227dcd. --- packages/block-editor/src/components/block-list/style.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 3ad511bd91307c..7f75e747d83c00 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -435,7 +435,6 @@ // Position hover label on the right > .block-editor-block-list__block-edit > .block-editor-block-list__breadcrumb { right: -$border-width; - left: auto; } // Hide mover until wide breakpoints, or it might be covered by toolbar @@ -468,6 +467,11 @@ // Full-wide &[data-align="full"] { + // Position hover label on the left for the top level block. + > .block-editor-block-list__block-edit > .block-editor-block-list__breadcrumb { + left: 0; + } + // Compensate for main container padding and subtract border. @include break-small() { margin-left: -$block-side-ui-width - $block-padding - $block-side-ui-clearance - $border-width; From 961cd2fc2ab6e48d315c7520c472be939acb37ef Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 17 Apr 2019 11:41:17 -0400 Subject: [PATCH 7/8] Block Editor: Remove redundant right-aligned hover label styling --- packages/block-editor/src/components/block-list/style.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 7f75e747d83c00..5b48b65481481e 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -432,11 +432,6 @@ float: left; } - // Position hover label on the right - > .block-editor-block-list__block-edit > .block-editor-block-list__breadcrumb { - right: -$border-width; - } - // Hide mover until wide breakpoints, or it might be covered by toolbar > .block-editor-block-list__block-edit > .block-editor-block-mover { display: none; From 20a29d8c3e78b730ec7d001f97a5b15075bc2d70 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 17 Apr 2019 11:51:10 -0400 Subject: [PATCH 8/8] Block Editor: Restore mover styles for multi-selected wide/full align --- packages/block-editor/src/components/block-list/style.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 5b48b65481481e..80cd0361732b74 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -415,6 +415,7 @@ z-index: z-index(".block-editor-block-list__block {core/image aligned wide or fullwide}"); // Mover and settings above + &.is-multi-selected > .block-editor-block-mover, > .block-editor-block-list__block-edit > .block-editor-block-mover { // This moves the menu up by the height of the button + border + padding. top: -$block-side-ui-width - $block-padding - $block-side-ui-clearance; @@ -428,16 +429,19 @@ } } + &.is-multi-selected > .block-editor-block-mover .block-editor-block-mover__control, > .block-editor-block-list__block-edit > .block-editor-block-mover .block-editor-block-mover__control { float: left; } // Hide mover until wide breakpoints, or it might be covered by toolbar + &.is-multi-selected > .block-editor-block-mover, > .block-editor-block-list__block-edit > .block-editor-block-mover { display: none; } @include break-wide() { + &.is-multi-selected > .block-editor-block-mover, > .block-editor-block-list__block-edit > .block-editor-block-mover { display: block; } @@ -455,6 +459,7 @@ // Wide &[data-align="wide"] { // Position mover + &.is-multi-selected > .block-editor-block-mover, > .block-editor-block-list__block-edit > .block-editor-block-mover { left: -$block-padding + $border-width; } @@ -497,6 +502,7 @@ } // Position mover + &.is-multi-selected > .block-editor-block-mover, > .block-editor-block-list__block-edit > .block-editor-block-mover { left: $border-width; }