From e3a9b75ce21753c9b3c3ba5cc0eae2c2029de84b Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 17 Apr 2019 10:46:23 -0400 Subject: [PATCH 1/7] 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 cbd3098e765d6e..8801267efb2956 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -406,7 +406,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; @@ -420,22 +420,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; } } @@ -452,7 +452,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; } } @@ -494,7 +494,7 @@ } // Position mover - > .block-editor-block-mover { + > .block-editor-block-list__block-edit > .block-editor-block-mover { left: $border-width; } } @@ -904,7 +904,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 eb4febf785d5e2ab89bdd82b43548bdc82227dcd Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 17 Apr 2019 10:46:47 -0400 Subject: [PATCH 2/7] 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 8801267efb2956..049cf950ed287e 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -427,6 +427,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 @@ -459,11 +460,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 21bc7334aea133633cdeee97713cb67e636aefd5 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 17 Apr 2019 17:23:43 +0200 Subject: [PATCH 3/7] 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 5910de04cd026c..8b46a1f9dfc8a4 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: calc(100% - 1px); // -1px to account for inner element left: 1px value causing overflow-x scrollbars From f43a6390e1d9401a32a2407af9b006874a47efca Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 17 Apr 2019 17:35:56 +0200 Subject: [PATCH 4/7] 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 049cf950ed287e..3074f8bb11aeda 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -413,7 +413,6 @@ min-height: 0; height: auto; width: auto; - z-index: inherit; &::before { content: none; From 93bdae689be5395ec42e91d3f64dfe8ad3bcf382 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 17 Apr 2019 11:40:11 -0400 Subject: [PATCH 5/7] 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 3074f8bb11aeda..2471c7ee34e57e 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -426,7 +426,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 @@ -459,6 +458,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 c2086aa4c797afef0b08ac6d9e4172d1e03ba862 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 17 Apr 2019 11:41:17 -0400 Subject: [PATCH 6/7] 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 2471c7ee34e57e..302fc429556fc3 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -423,11 +423,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 2b2e556902252f7b4fb2cdc246303c6b5e4bb875 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 17 Apr 2019 11:51:10 -0400 Subject: [PATCH 7/7] 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 302fc429556fc3..cac92988dc9602 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -406,6 +406,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; @@ -419,16 +420,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; } @@ -446,6 +450,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; } @@ -488,6 +493,7 @@ } // Position mover + &.is-multi-selected > .block-editor-block-mover, > .block-editor-block-list__block-edit > .block-editor-block-mover { left: $border-width; }