From 79c8a5f73fff7b4087ddb0ee2b36e877f23355b6 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 2 Dec 2019 10:54:47 +0100 Subject: [PATCH 1/2] Remove breadcrumb from hover. --- .../src/components/block-list/style.scss | 60 +++---------------- .../block-library/src/classic/editor.scss | 5 -- .../block-library/src/navigation/editor.scss | 4 +- .../src/social-links/editor.scss | 4 +- 4 files changed, 9 insertions(+), 64 deletions(-) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 22a53cd34de81e..88138840f75b7a 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -451,11 +451,6 @@ } } - // If the block movers are visible, push the breadcrumb down to make room for them. - .block-editor-block-mover.is-visible + .block-editor-block-list__breadcrumb { - top: (-$block-padding - $block-left-border-width - ($grid-size-small / 2)); - } - // Align block toolbar to floated content. // Extra specificity is needed to avoid applying this to innerblocks. @include break-small() { @@ -486,11 +481,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; - } - > .block-editor-block-list__block-edit { margin-left: -$block-padding; margin-right: -$block-padding; @@ -945,60 +935,24 @@ /** - * Hover label + * Block Label for Navigation/Selection Mode */ .block-editor-block-list__breadcrumb { - position: absolute; - line-height: 1; - z-index: z-index(".block-editor-block-list__breadcrumb"); - - // Position in the top left of the border. - left: -$block-padding - $block-left-border-width; - top: (($block-padding * -2) - $block-left-border-width); - - .components-toolbar { - border: none; - line-height: 1; - font-family: $default-font; - font-size: 11px; - padding: 4px 4px; - background: $light-gray-500; - color: $dark-gray-900; - transition: box-shadow 0.1s linear; - @include reduce-motion("transition"); - - .components-button { - font-size: inherit; - line-height: inherit; - padding: 0; - } - - .is-dark-theme & { - background: $dark-gray-600; - color: $white; - } - } - - // Remove negative left breadcrumb position for left aligned blocks. - [data-align="left"] & { - left: 0; - } - - // Right-align the breadcrumb for right-aligned blocks. - [data-align="right"] & { - left: auto; - right: 0; - } + display: none; - // In navigation mode, this should appear similarly to the block toolbar. .is-navigate-mode & { + display: block; + position: absolute; + line-height: 1; + z-index: z-index(".block-editor-block-list__breadcrumb"); // Position in the top left of the border. left: -$block-padding; top: -$block-toolbar-height - $block-padding; .components-toolbar { + display: flex; background: $white; border: $border-width solid $blue-medium-focus; border-left: none; diff --git a/packages/block-library/src/classic/editor.scss b/packages/block-library/src/classic/editor.scss index 186523cc549b35..c36f1b96b055a3 100644 --- a/packages/block-library/src/classic/editor.scss +++ b/packages/block-library/src/classic/editor.scss @@ -254,11 +254,6 @@ div[data-type="core/freeform"] { border-left-color: transparent; } - // Don't show block type label for classic block - &.is-hovered .block-editor-block-list__breadcrumb { - display: none; - } - .editor-block-contextual-toolbar + div { margin-top: 0; padding-top: 0; diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index a4f0471878990f..d1afd25a9b721f 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -35,10 +35,8 @@ border-color: transparent !important; // !important used to keep the selector from growing any more complex. } - // Hide the breadcrumb. // Hide the sibling inserter. - .wp-block-navigation .block-editor-block-list__insertion-point, - .wp-block-navigation .block-editor-block-list__breadcrumb { + .wp-block-navigation .block-editor-block-list__insertion-point { display: none; } diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss index f03f35fae3510a..79b036801835cd 100644 --- a/packages/block-library/src/social-links/editor.scss +++ b/packages/block-library/src/social-links/editor.scss @@ -58,11 +58,9 @@ margin-bottom: 0; } - // Hide the breadcrumb. // Hide the mover. // Hide the sibling inserter. - .wp-block-social-links .block-editor-block-list__insertion-point, - .wp-block-social-links .block-editor-block-list__breadcrumb { // Needs specificity. + .wp-block-social-links .block-editor-block-list__insertion-point { // Needs specificity. display: none; } } From 075719fef74de2261d7caed27e0f555f0db71eee Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 2 Dec 2019 10:57:48 +0100 Subject: [PATCH 2/2] Remove hover style entirely. --- .../block-editor/src/components/block-list/style.scss | 9 --------- packages/editor/src/components/post-title/style.scss | 10 ---------- 2 files changed, 19 deletions(-) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 88138840f75b7a..2ac186ba506bc5 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -179,15 +179,6 @@ } } - // Hover style. - &.is-hovered:not(.is-navigate-mode) > .block-editor-block-list__block-edit::before { - box-shadow: -$block-left-border-width 0 0 0 $dark-opacity-light-500; - - .is-dark-theme & { - box-shadow: -$block-left-border-width 0 0 0 $light-opacity-light-400; - } - } - // Spotlight mode. &.is-focus-mode:not(.is-multi-selected) { opacity: 0.5; diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss index 3bf8c5ad9f321d..b3f62b8b591c63 100644 --- a/packages/editor/src/components/post-title/style.scss +++ b/packages/editor/src/components/post-title/style.scss @@ -82,16 +82,6 @@ } } - &:not(.is-focus-mode):not(.has-fixed-toolbar):not(.is-selected) { - .editor-post-title__input:hover { - box-shadow: -$block-left-border-width 0 0 0 $dark-opacity-light-500; - - .is-dark-theme & { - box-shadow: -$block-left-border-width 0 0 0 $light-opacity-light-400; - } - } - } - &.is-focus-mode .editor-post-title__input { opacity: 0.5; transition: opacity 0.1s linear;