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 a pill-shaped block mover #17216

Merged
merged 9 commits into from
Sep 3, 2019
Merged

Try a pill-shaped block mover #17216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3f7cb62
Try a pill-shaped block mover.
kjellr Aug 27, 2019
1714a6f
Remove unnecessary nested block styles.
kjellr Aug 29, 2019
1001794
Try showing move controls only on hover.
kjellr Aug 29, 2019
3ed594b
Try darker "Overlay" style movers.
kjellr Aug 30, 2019
6b6d7f1
Revert "Try darker "Overlay" style movers."
kjellr Aug 30, 2019
f0480b2
Revert "Try showing move controls only on hover."
kjellr Aug 30, 2019
16a08e7
Implement white, rounded mover container.
kjellr Aug 30, 2019
e633dca
Fix position on wide/full items.
kjellr Aug 30, 2019
0e00f94
Mobile, focus, dark mode cleanup.
kjellr Aug 30, 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
3 changes: 0 additions & 3 deletions assets/stylesheets/_z-index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,6 @@ $z-layers: (
".wp-block-cover.has-background-dim::before": 1, // Overlay area inside block cover need to be higher than the video background.
".wp-block-cover__video-background": 0, // Video background inside cover block.

// Side UI active buttons
".block-editor-block-mover__control": 1,

// Active pill button
".components-button.is-button {:focus or .is-primary}": 1,

Expand Down
8 changes: 2 additions & 6 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 @@ -495,7 +495,7 @@
&.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;
top: -$block-side-ui-width - $block-padding - $block-side-ui-clearance - ( $border-width * 2 );
bottom: auto;
min-height: 0;
height: auto;
Expand Down Expand Up @@ -667,10 +667,6 @@
> .block-editor-block-list__block-edit > .block-editor-block-mover {
position: absolute;
width: $block-side-ui-width + $block-side-ui-clearance;

// Stretch to fill half of the available space to increase hoverable area.
height: 100%;
max-height: $block-side-ui-width * 4;
}

// Position depending on whether selected or not.
Expand All @@ -696,7 +692,7 @@
padding-right: $block-side-ui-clearance;

// Position for top level blocks.
left: -$block-side-ui-width - $block-side-ui-clearance - $block-padding - $border-width;
left: -$block-side-ui-width - $block-side-ui-clearance - $block-padding - $border-width - $grid-size;

// Hide on mobile, as mobile has a separate solution.
display: none;
Expand Down
96 changes: 34 additions & 62 deletions packages/block-editor/src/components/block-mover/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,26 @@
.block-editor-block-mover {
min-height: $empty-paragraph-height;
opacity: 0;

&.is-visible {
@include edit-post__fade-in-animation;
}

// 24px is the smallest size of a good pressable button.
// With 3 pieces of side UI, that comes to a total of 72px.
// To vertically center against a 56px paragraph, move upwards 72px - 56px / 2.
// Don't do this for wide, fullwide, or mobile.
@include break-small() {
min-height: $empty-paragraph-height;
opacity: 0;
background: $white;
border: 1px solid $dark-opacity-light-800;
border-radius: $radius-round-rectangle;
transition: box-shadow 0.2s ease-out;
@include reduce-motion("transition");

&.is-visible {
@include edit-post__fade-in-animation;
}

&:hover {
box-shadow: $shadow-toolbar;
}

// 24px is the smallest size of a good pressable button.
// With 3 pieces of side UI, that comes to a total of 72px.
// To vertically center against a 56px paragraph, move upwards 72px - 56px / 2.
// Don't do this for wide, fullwide, or mobile.
.block-editor-block-list__block:not([data-align="wide"]):not([data-align="full"]) & {
margin-top: -$grid-size;
}
Expand All @@ -24,6 +34,8 @@
justify-content: center;
cursor: pointer;
padding: 0;
border: none;
box-shadow: none;

// Carefully adjust the size of the side UI to fit one paragraph of text (56px).
width: $block-side-ui-width;
Expand All @@ -35,55 +47,39 @@
padding: #{ ($block-side-ui-width - $icon-button-size-small) / 2 } #{ ($block-side-ui-width - 18px) / 2 }; // This makes the SVG fill the whole available area, without scaling the artwork.
}

// Use opacity to work in various editor styles
color: $dark-opacity-300;

.is-dark-theme & {
color: $light-opacity-300;
&[aria-disabled="true"] {
cursor: default;
pointer-events: none;
color: $dark-opacity-300;
}

// Nested movers have a background, so don't invert the colors there.
.is-dark-theme .wp-block .wp-block &,
.wp-block .is-dark-theme .wp-block & {
@include break-small() {
color: $dark-opacity-300;
}

&[aria-disabled="true"] {
cursor: default;
pointer-events: none;
color: $dark-opacity-light-300; // Use opacity to work in various editor styles.
&:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {
background-color: transparent;
box-shadow: none;
}

.is-dark-theme & {
color: $light-opacity-light-300;
&:focus:not(:disabled) {
background-color: transparent;
}
}

}

.block-editor-block-mover__control-drag-handle {
cursor: move; // Fallback for IE/Edge < 14
cursor: grab;
fill: currentColor;
border-radius: $radius-round-rectangle;

&,
&:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover,
&:not(:disabled):not([aria-disabled="true"]):not(.is-default):active,
&:not(:disabled):not([aria-disabled="true"]):not(.is-default):focus {
box-shadow: none;
background: none;

// Use opacity to work in various editor styles.
color: $dark-opacity-500;

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

// Nested movers have a background, so don't invert the colors there.
.is-dark-theme .wp-block .wp-block &,
.wp-block .is-dark-theme .wp-block & {
color: $dark-opacity-500;
}
}

&:not(:disabled):not([aria-disabled="true"]):not(.is-default):active {
Expand All @@ -94,27 +90,3 @@
.block-editor-block-mover__description {
display: none;
}

// Apply a background in nested contexts, only on desktop.
.block-editor-block-mover__control-drag-handle:not(:disabled):not([aria-disabled="true"]):not(.is-default),
.block-editor-block-mover__control {
@include break-small() {
.block-editor-block-list__layout [data-align="right"] &,
.block-editor-block-list__layout [data-align="left"] &,
.block-editor-block-list__layout .block-editor-block-list__layout & {
background: $white;
box-shadow: inset 0 0 0 1px $light-gray-500;

&:nth-child(-n+2) {
margin-bottom: -1px;
}

&:hover,
&:active,
&:focus {
// Buttons are stacked with overlapping border to look like a unit, so elevate on interactions.
z-index: z-index(".block-editor-block-mover__control");
}
}
}
}