Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Try: Remove hover styles #18862

Merged
merged 2 commits into from
Dec 3, 2019
Merged

Try: Remove hover styles #18862

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
79c8a5f
Remove breadcrumb from hover.
jasmussen Dec 2, 2019
075719f
Remove hover style entirely.
jasmussen Dec 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 7 additions & 62 deletions packages/block-editor/src/components/block-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -451,11 +442,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() {
Expand Down Expand Up @@ -486,11 +472,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;
Expand Down Expand Up @@ -945,60 +926,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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now, this is only rendered in navigation mode right? we could simplify the block.js code to do this and avoid doing it in CSS. Fine to do it later though.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this would be shown only in navigation/select mode.


// 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;
Expand Down
5 changes: 0 additions & 5 deletions packages/block-library/src/classic/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 1 addition & 3 deletions packages/block-library/src/navigation/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
4 changes: 1 addition & 3 deletions packages/block-library/src/social-links/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand Down
10 changes: 0 additions & 10 deletions packages/editor/src/components/post-title/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down