Try a pill-shaped block mover (#17216)

* Try a pill-shaped block mover. * Remove unnecessary nested block styles. * Try showing move controls only on hover. * Try darker "Overlay" style movers. * Revert "Try darker "Overlay" style movers." This reverts commit 3ed594b. * Revert "Try showing move controls only on hover." This reverts commit 1001794. * Implement white, rounded mover container. * Fix position on wide/full items. * Mobile, focus, dark mode cleanup.
WordPress · Sep 3, 2019 · 6a06143 · 6a06143
1 parent 85eaee3
commit 6a06143
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 71 deletions.
diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss
@@ -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,
 

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -499,7 +499,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;
@@ -671,10 +671,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.
@@ -700,7 +696,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;

diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
@@ -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;
 		}
@@ -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;
@@ -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 {
@@ -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");
-			}
-		}
-	}
-}