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 using left borders for hover + selection states #14145

Merged
merged 38 commits into from
Mar 15, 2019
Merged

Try using left borders for hover + selection states #14145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
7441319
Add thick borders to the left of blocks when they're hovred + selected.
kjellr Feb 27, 2019
583223c
Add thick left border to the page title.
kjellr Feb 27, 2019
021232b
Turn off block toolbar centering for alignwide blocks.
kjellr Feb 27, 2019
3723174
Move block breadcrump to the left side, position it on top of the block.
kjellr Feb 27, 2019
56a8edb
Clean up the block toolbar's left border.
kjellr Feb 27, 2019
77cf04b
Use inset borders on mobile.
kjellr Feb 27, 2019
65fafa4
Prevent inset borders from overlapping with full-bleed content.
kjellr Feb 27, 2019
b9c6259
Use a gray border instead of a blue one on hover.
kjellr Mar 1, 2019
5a076a1
Use a sass variable to define the left block border width
youknowriad Mar 5, 2019
bfa8039
Fix breadcrumb potision for alignfull blocks.
kjellr Mar 5, 2019
8b927e2
Clean up breadcrumb position for left & right-aligned blocks.
kjellr Mar 5, 2019
b958f40
Sync block mover animation up with the hover state.
kjellr Mar 6, 2019
bf457e9
Merge branch 'master' into try/left-block-borders
kjellr Mar 6, 2019
2009f9c
Merge branch 'master' into try/left-block-borders
kjellr Mar 11, 2019
4024095
Darken focused block borders slightly.
kjellr Mar 11, 2019
c1de2bd
Switch to using border instead of outline for block borders.
kjellr Mar 11, 2019
f4468b2
Make this work better with Windows High Contrast Mode
kjellr Mar 11, 2019
7f52808
Adjust z-index of border + breadcrumb for child blocks.
kjellr Mar 12, 2019
a658491
Remove extra z-index rule from the block border.
kjellr Mar 12, 2019
2b41bb8
Remove extra z-index rule from the block border. Minor description cl…
kjellr Mar 12, 2019
bdcedbc
Ensure these styles are compatible with Top Toolbar mode.
kjellr Mar 12, 2019
ea4e64e
Use the new gray value for the mobile toolbar border.
kjellr Mar 12, 2019
130d84f
Add a matching left border to the post permalink area above the title.
kjellr Mar 12, 2019
047e1e4
Improve border position for mobile screens, especially for elements t…
kjellr Mar 12, 2019
8109dfa
Remove a couple unnecessary border updates from 047e1e4.
kjellr Mar 12, 2019
147f151
Clean up bugs related to the hover + focus states of the classic edit…
kjellr Mar 13, 2019
95ae7d9
Classic Block toolbar icon cleanup.
kjellr Mar 13, 2019
30a2801
Reusable Block border cleanup.
kjellr Mar 13, 2019
82560f9
Keeping a light border on the classic block when it's inactive.
kjellr Mar 13, 2019
f6da176
Clean up borders on warning blocks.
kjellr Mar 13, 2019
36b0441
Merge branch 'master' into try/left-block-borders
kjellr Mar 14, 2019
11489aa
Switch to a solid color border color for the permalink box.
kjellr Mar 14, 2019
023dc6c
Merge branch 'master' into try/left-block-borders
kjellr Mar 15, 2019
e0ae429
Update z-index rule name to match the one used in the latest merge.
kjellr Mar 15, 2019
12e5368
Combine full-wide toolbar centering rules.
kjellr Mar 15, 2019
c3b6c3b
Add a darker hover state for dark themes.
kjellr Mar 15, 2019
9b5325f
Remove the left toolbar border on mobile screens.
kjellr Mar 15, 2019
3c744b6
Merge branch 'master' into try/left-block-borders
kjellr Mar 15, 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
1 change: 1 addition & 0 deletions assets/stylesheets/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ $resize-handler-size: 16px;
$resize-handler-container-size: $resize-handler-size + ($grid-size-small * 2); // Make the resize handle container larger so there's a larger grabbable area.

// Blocks
$block-left-border-width: $border-width * 3;
$block-padding: 14px; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size.
$block-spacing: 4px; // Vertical space between blocks.
$block-side-ui-width: 28px; // Width of the movers/drag handle UI.
Expand Down
1 change: 1 addition & 0 deletions assets/stylesheets/_z-index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ $z-layers: (
".block-library-classic__toolbar": 10,
".block-editor-block-list__layout .reusable-block-indicator": 1,
".block-editor-block-list__breadcrumb": 2,
".editor-inner-blocks .block-editor-block-list__breadcrumb": 22,
".components-form-toggle__input": 1,
".components-panel__header.edit-post-sidebar__panel-tabs": -1,
".edit-post-sidebar .components-panel": -2,
Expand Down
155 changes: 115 additions & 40 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 @@ -11,7 +11,7 @@
// While block is being dragged, dim the slot dragged from, and hide some UI.
&.is-dragging {
.block-editor-block-list__block-edit::before {
outline: none;
border: none;
}

> .block-editor-block-list__block-edit > * {
Expand Down Expand Up @@ -105,7 +105,7 @@
}

/**
* Block outline layout
* Block border layout
*/

.block-editor-block-list__block-edit {
Expand All @@ -115,10 +115,15 @@
z-index: z-index(".block-editor-block-list__block-edit::before");
content: "";
position: absolute;
outline: $border-width solid transparent;
transition: outline 0.1s linear;
border: $border-width solid transparent;
border-left: none;
box-shadow: none;
transition: border-color 0.1s linear, box-shadow 0.1s linear;
pointer-events: none;

// Include a transparent outline for Windows High Contrast mode.
outline: $border-width solid transparent;

// Go edge-to-edge on mobile.
right: -$block-padding;
left: -$block-padding;
Expand All @@ -128,18 +133,36 @@
}

// Selected style.
&.is-selected > .block-editor-block-list__block-edit::before {
// Use opacity to work in various editor styles.
outline: $border-width solid $dark-opacity-light-500;
&.is-selected {

.is-dark-theme & {
outline-color: $light-opacity-light-500;
> .block-editor-block-list__block-edit::before {
// Use opacity to work in various editor styles.
border-color: $dark-opacity-light-800;
box-shadow: inset $block-left-border-width 0 0 0 $dark-gray-500;

.is-dark-theme & {
border-color: $light-opacity-light-800;
box-shadow: inset $block-left-border-width 0 0 0 $light-gray-600;
}

// Switch to outset borders on larger screens.
@include break-small() {
box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;

.is-dark-theme & {
box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
}
}
}
}

// Hover style.
&.is-hovered > .block-editor-block-list__block-edit::before {
outline: $border-width solid theme(outlines);
box-shadow: -$block-left-border-width 0 0 0 $light-gray-500;

.is-dark-theme & {
box-shadow: -$block-left-border-width 0 0 0 $dark-gray-600;
}
}

// Spotlight mode.
Expand Down Expand Up @@ -213,12 +236,23 @@
}
}

&.has-warning:not(.is-hovered) .block-editor-block-list__block-edit::before {
&.has-warning .block-editor-block-list__block-edit::before {
// Use opacity to work in various editor styles.
border-color: $dark-opacity-light-500;
border-left: $border-width solid $dark-opacity-light-500;

.is-dark-theme & {
border-color: $light-opacity-light-600;
}
}

&.has-warning.is-selected .editor-block-list__block-edit::before {
// Use opacity to work in various editor styles.
outline-color: $dark-opacity-light-500;
border-color: $dark-opacity-light-800;
border-left-color: transparent;

.is-dark-theme & {
outline-color: $light-opacity-light-500;
border-color: $light-opacity-light-800;
}
}

Expand Down Expand Up @@ -260,11 +294,21 @@

// Reusable blocks
&.is-reusable > .block-editor-block-list__block-edit::before {
border: $border-width dashed $dark-opacity-light-500;

.is-dark-theme & {
border-color: $light-opacity-light-600;
}
}

&.is-reusable.is-selected > .block-editor-block-list__block-edit::before {
// Use opacity to work in various editor styles.
outline: $border-width dashed $dark-opacity-light-500;
border-color: $dark-opacity-light-800;
border-left-color: transparent;

.is-dark-theme & {
outline-color: $light-opacity-light-500;
border-color: $light-opacity-light-800;
border-left-color: transparent;
}
}

Expand All @@ -278,7 +322,7 @@
// When images are floated, the block itself should collapse to zero height.
height: 0;

// Hide block outline when an image is floated.
// Hide block border when an image is floated.
.block-editor-block-list__block-edit {
&::before {
content: none;
Expand All @@ -296,7 +340,7 @@
// Position toolbar better on mobile.
.block-editor-block-contextual-toolbar {
width: auto;
border-bottom: $border-width solid $light-gray-500;
border-bottom: $border-width solid $light-gray-800;
bottom: auto;
}
}
Expand Down Expand Up @@ -424,9 +468,9 @@

// Full-wide
&[data-align="full"] {
// Position hover label on the right for the top level block.
// Position hover label on the left for the top level block.
Copy link
Member

@aduth aduth Apr 17, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

Should it be on the left, or on the right?

There are still existing styles which assume right-placement for the wide/full hover label:

gutenberg/packages/block-editor/src/components/block-list/style.scss

Lines 427 to 430 in e209cfb

// Position hover label on the right
> .block-editor-block-list__breadcrumb {
right: -$border-width;
}

I'm supposing that left placement is reasonable only in part due to the regression of #14817

Fixing #14817 introduces an undesirable overlap:

image

Copy link
Member

Choose a reason for hiding this comment

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

Fixing #14817 introduces an undesirable overlap:

Follow-up: #15022 (proposes moving to the right)

> .block-editor-block-list__block-edit > .block-editor-block-list__breadcrumb {
right: 0;
left: 0;
}

// Compensate for main container padding and subtract border.
Expand Down Expand Up @@ -595,13 +639,16 @@
margin-top: $block-toolbar-height;
margin-right: -$block-padding;
margin-left: -$block-padding;
border-top: $border-width solid $light-gray-500;
border-top: $border-width solid $light-gray-800;
height: $block-toolbar-height;

@include break-small() {
display: none;
}

// Add a white background to prevent the block's left border from showing through.
background-color: $white;

// Show a shadow below the selected block to imply separation.
box-shadow: $shadow-below-only;
@include break-small() {
Expand Down Expand Up @@ -707,7 +754,7 @@

// Hide both the button until hovered.
opacity: 0;
transition: opacity 0.1s linear 0.1s;
transition: opacity 0.1s linear;

&:hover,
&.is-visible {
Expand Down Expand Up @@ -791,12 +838,12 @@

// Position toolbar below the block on mobile.
position: absolute;
bottom: $block-toolbar-height - $block-padding;
bottom: $block-toolbar-height - $block-padding - $border-width;
left: -$block-padding;
right: -$block-padding;

// Paint the borders on the toolbar itself on mobile.
border-top: $border-width solid $light-gray-500;
border-top: $border-width solid $light-gray-800;
.components-toolbar {
border-top: none;
border-bottom: none;
Expand All @@ -805,17 +852,31 @@
@include break-small() {
border-top: none;
.components-toolbar {
border-top: $border-width solid $light-gray-500;
border-bottom: $border-width solid $light-gray-500;
border-top: $border-width solid $light-gray-800;
border-bottom: $border-width solid $light-gray-800;
}
}
}

// Floated items have special needs for the contextual toolbar position.
// Floated items have special needs for the contextual toolbar position + the thicker left border.
&[data-align="left"] .block-editor-block-contextual-toolbar,
&[data-align="right"] .block-editor-block-contextual-toolbar {
margin-bottom: $border-width;
margin-top: -$block-toolbar-height;

// Display the box-shadow on the parent element.
box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
.is-dark-theme & {
box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
}

@include break-small() {
box-shadow: none;
}

.editor-block-toolbar {
border-left: none;
}
}

// Make block toolbar full width on mobile.
Expand Down Expand Up @@ -903,7 +964,8 @@

// This prevents floats from messing up the position of the block toolbar on floats-adjacent blocks when selected.
position: absolute;
left: 0;
left: $border-width;
top: $border-width;
}
}

Expand All @@ -917,20 +979,24 @@
line-height: 1;
z-index: z-index(".block-editor-block-list__breadcrumb");

// Position in the top right of the border.
right: -$block-padding;
top: -$block-padding - $border-width;
// 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 {
padding: 0;
border: none;
background: transparent;
line-height: 1;
font-family: $default-font;
font-size: 11px;
padding: 4px 4px;
background: theme(outlines);
color: $white;
background: $light-gray-500;
color: $dark-gray-900;

.is-dark-theme & {
background: $dark-gray-600;
color: $white;
}

// Animate in
.block-editor-block-list__block:hover & {
Expand All @@ -939,11 +1005,20 @@
}
}

// Position the breadcrumb closer on mobile.
[data-align="left"] &,
// Position this above the toolbar of parent blocks.
.editor-inner-blocks & {
z-index: z-index(".editor-inner-blocks .block-editor-block-list__breadcrumb");
}

// 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;
top: 0;
}
}

Expand Down Expand Up @@ -992,12 +1067,12 @@
.block-editor-block-list__block .block-editor-warning {
z-index: z-index(".block-editor-warning");
position: relative;
margin-right: -$block-padding - $border-width;
margin-left: -$block-padding - $border-width;
margin-right: -$block-padding;
margin-left: -$block-padding;

// Pull the warning upwards to the edge, and add a negative bottom margin to compensate.
margin-bottom: -$block-padding - $border-width;
transform: translateY(-$block-padding - $border-width);
margin-bottom: -$block-padding;
transform: translateY(-$block-padding);

// Bigger padding on mobile where blocks are edge to edge.
padding: 10px $block-padding;
Expand Down
32 changes: 25 additions & 7 deletions packages/block-editor/src/components/block-toolbar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,40 @@
width: 100%;
overflow: auto; // Allow horizontal scrolling on mobile.
position: relative;
transition: border-color 0.1s linear, box-shadow 0.1s linear;
border-left: $border-width solid $light-gray-800;

// Allow overflow on desktop.
@include break-small() {
// Allow overflow on desktop.
overflow: inherit;
}

// Show a left border on the parent container.
border-left: $border-width solid $light-gray-500;
// Show a left border on the parent container.
border-left: none;
box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;

// Show a lighter version for dark themes.
.is-dark-theme & {
box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
}
}

// The component is born with a border, but we only need some of them.
.components-toolbar {
border: 0;
border-top: $border-width solid $light-gray-500;
border-bottom: $border-width solid $light-gray-500;
border-top: $border-width solid $light-gray-800;
border-bottom: $border-width solid $light-gray-800;

// Add a right border to show as separator in the block toolbar.
border-right: $border-width solid $light-gray-500;
border-right: $border-width solid $light-gray-800;
}

// Add a left border and adjust the color for Top Toolbar mode.
.has-fixed-toolbar & {
box-shadow: none;
border-left: $border-width solid $light-gray-500;

.components-toolbar {
border-color: $light-gray-500;
}
}
}
10 changes: 10 additions & 0 deletions packages/block-editor/src/components/warning/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,16 @@
background-color: transparent;
}

.is-selected & {
// Use opacity to work in various editor styles.
border-color: $dark-opacity-light-800;
border-left-color: transparent;

.is-dark-theme & {
border-color: $light-opacity-light-800;
}
}

.block-editor-warning__message {
line-height: $default-line-height;
font-family: $default-font;
Expand Down
Loading