Enhance situation in wide blocks.

WordPress · Apr 13, 2018 · 82867b6 · 82867b6
1 parent c2e648b
commit 82867b6
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 45 deletions.
diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
@@ -333,44 +333,42 @@
 			border-right-width: 0;
 		}
 
-		// Adjust how movers behave on the full-wide block, and don't affect children
-		> .editor-block-mover {
-			display: none;
-		}
+		// Mover and settings in wide
+		> .editor-block-mover,
+		> .editor-block-settings-menu {
+			top: -29px;
+			bottom: auto;
+			height: auto;
+			width: auto;
+			z-index: inherit;
 
-		@include break-wide() {
-			> .editor-block-mover {
-				display: block;
-				top: -29px;
-				left: 10px;
-				height: auto;
-				width: auto;
-				z-index: inherit;
-
-				&:before {
-					content: none;
-				}
+			&:before {
+				content: none;
 			}
+		}
 
-			> .editor-block-mover .editor-block-mover__control {
-				float: left;
-			}
+		> .editor-block-mover {
+			left: 10px;
 		}
 
-		// Also adjust block settings menu
 		> .editor-block-settings-menu {
-			top: -41px;
 			right: 10px;
-			height: auto;
-
-			&:before {
-				content: none;
-			}
 		}
 
-		> .editor-block-settings-menu .editor-block-settings-menu__control {
+		> .editor-block-mover .editor-block-mover__control,
+		> .editor-block-settings-menu .components-icon-button {
 			float: left;
 		}
+
+		// Hide mover until wide breakpoints, or it might be covered by toolbar
+		> .editor-block-mover {
+			display: none;
+		}
+		@include break-wide() {
+			> .editor-block-mover {
+				display: block;
+			}
+		}
 	}
 
 	// Clear floats
@@ -399,7 +397,7 @@
 		position: absolute;
 		top: -.9px; // .9px because of the collapsing margins hack, see line 27, @todo revisit when we allow margins to collapse
 		bottom: -.9px; // utilize full vertical space to increase hoverable area
-		padding: 0;
+		padding: .1px 0;
 		width: $block-side-ui-width;
 
 		/* Necessary for drag indicator */
@@ -408,12 +406,14 @@
 	}
 
 	// Elevate when selected or hovered
-	&.is-multi-selected,
-	&.is-selected,
-	&.is-hovered {
-		.editor-block-settings-menu,
-		.editor-block-mover {
-			z-index: z-index( '.editor-block-list__block.is-{selected,hovered} .editor-block-{settings-menu,mover}' );
+	@include break-small() {
+		&.is-multi-selected,
+		&.is-selected,
+		&.is-hovered {
+			.editor-block-settings-menu,
+			.editor-block-mover {
+				z-index: z-index( '.editor-block-list__block.is-{selected,hovered} .editor-block-{settings-menu,mover}' );
+			}
 		}
 	}
 

diff --git a/editor/components/block-mover/arrows.js b/editor/components/block-mover/arrows.js
@@ -1,11 +1,11 @@
 export const upArrow = (
-	<svg tabIndex="-1" width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" aria-hidden role="img" focusable="false">
+	<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" aria-hidden role="img" focusable="false">
 		<polygon points="9,4.5 3.3,10.1 4.8,11.5 9,7.3 13.2,11.5 14.7,10.1 " />
 	</svg>
 );
 
 export const downArrow = (
-	<svg tabIndex="-1" width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" aria-hidden role="img" focusable="false">
+	<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" aria-hidden role="img" focusable="false">
 		<polygon points="9,13.5 14.7,7.9 13.2,6.5 9,10.7 4.8,6.5 3.3,7.9 " />
 	</svg>
 );
diff --git a/editor/components/block-settings-menu/index.js b/editor/components/block-settings-menu/index.js
@@ -69,7 +69,6 @@ export class BlockSettingsMenu extends Component {
 					} );
 
 					return [
-						<BlockRemoveButton key="remove" uids={ uids } role="menuitem" />,
 						<IconButton
 							className={ toggleClassname }
 							onClick={ () => {
@@ -84,7 +83,8 @@ export class BlockSettingsMenu extends Component {
 							focus={ focus }
 							onFocus={ this.onFocus }
 							onBlur={ this.onBlur }
-						/>
+						/>,
+						<BlockRemoveButton key="remove" uids={ uids } role="menuitem" />
 					];
 				} }
 				renderContent={ ( { onClose } ) => (

diff --git a/editor/components/block-settings-menu/style.scss b/editor/components/block-settings-menu/style.scss
@@ -15,7 +15,7 @@
 	height: $block-side-ui-width;
 	border-radius: $button-style__radius-roundrect;
 
-	// Try a background, only for nested situations @todo
+	// Apply a background in nested contexts, only on desktop
 	@include break-small() {
 		.editor-block-list__layout .editor-block-list__layout & {
 			background: $white;
@@ -24,15 +24,12 @@
 			border-width: 1px;
 		}
 	}
-
 }
 
-.editor-block-settings-menu__toggle {
-	.dashicon {
-		transform: rotate( 90deg );
-	}
+.editor-block-settings-menu__toggle .dashicon {
+	transform: rotate( 90deg );
 }
-
+	
 // Popout menu
 .editor-block-settings-menu__popover {
 	z-index: z-index( '.editor-block-settings-menu__popover' );