Refine side UI (WordPress#6141)

* Polish side UI, make arrows bigger. This is initial work to improve the side UI. It fixes WordPress#5400 and WordPress#4223 by making the arrows visually bigger. It also simplifies the hover styles and improves mobile in the process. * Refine mobile block UI, and responsive hover labels. * Add trash button to right side UI. More to come. * Enhance situation in wide blocks. * Remove role from Remove button, and remove Trash from menu. * Editor: Fix Eslint issues in BlockSettingsMenu * Refine collapsing margins hack, fix flickering. * Add some clearance between side UI and block. * Fix z-index issue. * Fix block settings dropdown menu
nuzzio · Apr 25, 2018 · 07f6505 · 07f6505
1 parent 7a51d7a
commit 07f6505
Show file tree

Hide file tree

Showing 9 changed files with 134 additions and 135 deletions.
diff --git a/edit-post/assets/stylesheets/_variables.scss b/edit-post/assets/stylesheets/_variables.scss
@@ -47,6 +47,7 @@ $block-mover-margin: 18px;
 $block-spacing: 4px;
 $block-side-ui-padding: 36px;
 $block-side-ui-width: 28px;		// The side UI max height matches a single line of text, 56px. 28px is half, allowing 2 mover arrows
+$block-side-ui-clearance: 2px;
 
 // Buttons & UI Widgets
 $button-style__radius-roundrect: 4px;

diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss
@@ -23,7 +23,7 @@ $z-layers: (
 	'.editor-block-list__insertion-point': 5,
 	'.blocks-format-toolbar__link-modal': 6,
 	'.blocks-gallery-item__inline-menu': 20,
-	'.editor-block-settings-menu__popover': 20, // Below the header
+	'.editor-block-settings-menu__popover': 21, // Below the header, but above the block toolbar
 	'.blocks-url-input__suggestions': 30,
 	'.edit-post-header': 30,
 	'.wp-block-image__resize-handlers': 1, // Resize handlers above sibling inserter

diff --git a/editor/components/block-list/block-mobile-toolbar.js b/editor/components/block-list/block-mobile-toolbar.js
@@ -7,7 +7,6 @@ import { ifViewportMatches } from '@wordpress/viewport';
  * Internal dependencies
  */
 import BlockMover from '../block-mover';
-import BlockRemoveButton from '../block-settings-menu/block-remove-button';
 import BlockSettingsMenu from '../block-settings-menu';
 import VisualEditorInserter from '../inserter';
 
@@ -16,7 +15,6 @@ function BlockMobileToolbar( { rootUID, uid, renderBlockMenu } ) {
 		<div className="editor-block-list__block-mobile-toolbar">
 			<VisualEditorInserter />
 			<BlockMover uids={ [ uid ] } />
-			<BlockRemoveButton uids={ [ uid ] } small />
 			<BlockSettingsMenu rootUID={ rootUID } uids={ [ uid ] } renderBlockMenu={ renderBlockMenu } />
 		</div>
 	);

diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
@@ -110,9 +110,8 @@
 	}
 
 	// Prevent collapsing margins @todo try and revisit this, it's conducive to theming to allow these to collapse
-	padding-top: .1px;
-	padding-bottom: .1px;
-
+	padding-top: 1px;
+	padding-bottom: 1px;
 
 	// Space every block using margins instead of padding
 	// This allows margins to collapse, which gives a better representation of how it looks on the frontend
@@ -121,8 +120,8 @@
 		margin-bottom: $block-padding;
 
 		// Prevent collapsing margins @todo try and revisit this, it's conducive to theming to allow these to collapse
-		padding-top: .1px;
-		padding-bottom: .1px;
+		padding-top: 1px;
+		padding-bottom: 1px;
 	}
 
 	margin-bottom: $block-spacing;
@@ -304,7 +303,7 @@
 
 	// Full-wide
 	&[data-align="full"] {
-		
+
 		// compensate for main container padding
 		@include break-small() {
 			margin-left: -$block-side-ui-padding;
@@ -333,44 +332,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 > * {
 			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
@@ -397,29 +394,31 @@
 	> .editor-block-settings-menu,
 	> .editor-block-mover {
 		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;
-		width: $block-side-ui-width;
+		top: 0; // stretch to bottom to utilize full vertical space to increase hoverable area
+		bottom: 0;
+		width: $block-side-ui-width + $block-side-ui-clearance;
 
 		/* Necessary for drag indicator */
 		cursor: move;/* Fallback for IE/Edge < 14 */
 		cursor: grab;
 	}
 
 	// 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}' );
+			}
 		}
 	}
 
 	// Right side UI
 	> .editor-block-settings-menu {
-		right: -$block-side-ui-width;
+		right: -$block-side-ui-width - $block-side-ui-clearance;
+		padding-left: $block-side-ui-clearance;
 
 		// Mobile
 		display: none;
@@ -431,7 +430,8 @@
 
 	// Left side UI
 	> .editor-block-mover {
-		left: -$block-side-ui-width;
+		left: -$block-side-ui-width - $block-side-ui-clearance;
+		padding-right: $block-side-ui-clearance;
 
 		// Mobile
 		display: none;
@@ -459,11 +459,11 @@
 		}
 
 		.editor-inserter__toggle,
-		.editor-block-settings-menu__toggle,
-		& > .editor-block-settings-menu__control,
-		.editor-block-mover__control {
+		.editor-block-mover__control,
+		.editor-block-settings-menu .components-button {
 			width: $icon-button-size;
 			height: $icon-button-size;
+			border-radius: $button-style__radius-roundrect;
 			padding: 3px;
 			margin: 0;
 			justify-content: center;
@@ -484,6 +484,11 @@
 				float: left;
 			}
 		}
+
+		// Block Settings
+		.editor-block-settings-menu > * {
+			float: left;
+		}
 	}
 }
 
@@ -649,6 +654,7 @@
 .editor-block-list__breadcrumb .components-toolbar {
 	border: 1px solid $light-gray-500;
 	width: 100%;
+	background: $white;
 
 	// this prevents floats from messing up the position
 	position: absolute;

diff --git a/editor/components/block-mover/arrows.js b/editor/components/block-mover/arrows.js
@@ -1,11 +1,11 @@
 export const upArrow = (
-	<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" aria-hidden role="img" focusable="false">
-		<path d="M12.293 12.207L9 8.914l-3.293 3.293-1.414-1.414L9 6.086l4.707 4.707z" />
+	<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 width="18" height="18" xmlns="http://www.w3.org/2000/svg" aria-hidden role="img" focusable="false">
-		<path d="M12.293 6.086L9 9.379 5.707 6.086 4.293 7.5 9 12.207 13.707 7.5z" />
+	<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-mover/style.scss b/editor/components/block-mover/style.scss
@@ -8,7 +8,9 @@
 
 // Mover icon buttons
 .editor-block-mover__control {
-	display: block;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 	border: none;
 	outline: none;
 	background: none;
@@ -17,14 +19,21 @@
 	padding: 0;
 	width: $block-side-ui-width;
 	height: $block-side-ui-width;	// the side UI can be no taller than 2 * $block-side-ui-width, which matches the height of a line of text
+	border-radius: $button-style__radius-roundrect;
 
 	&[aria-disabled="true"] {
 		cursor: default;
 		color: $light-gray-300;
 		pointer-events: none;
 	}
 
-	// Try a background, only for nested situations @todo
+	svg {
+		width: $block-side-ui-width;
+		height: $block-side-ui-width;
+		padding: ( $block-side-ui-width - 18px ) / 2;	// this makes the SVG fill the whole available area, without scaling the artwork
+	}
+
+	// Apply a background in nested contexts, only on desktop
 	@include break-small() {
 		.editor-block-list__layout .editor-block-list__layout & {
 			background: $white;
@@ -41,35 +50,17 @@
 		}
 	}
 
-	// apply styles to SVG for movers on the desktop breakpoint
-	@include break-small {
-		// unstyle inherited icon button styles
-		&:not(:disabled):hover,
-		&:not(:disabled):active,
-		&:not(:disabled):focus {
-			box-shadow: none;
-			color: inherit;
-		}
-
-		svg {
-			display: block;
-			position: relative; // Fixing the Safari bug for `<button>`s overflow
-			border-radius: 50%;
-			margin: auto;
-
-		}
-
-		&:not(:disabled):hover svg {
-			box-shadow: inset 0 0 0 1px $light-gray-500;
-		}
+	// Hover, active and focus styles
+	&:not(:disabled):hover {
+		@include button-style__hover;
+	}
 
-		&:not(:disabled):active svg {
-			@include button-style__active;
-		}
+	&:not(:disabled):active {
+		@include button-style__active;
+	}
 
-		&:not(:disabled):focus svg {
-			@include button-style__focus-active;
-		}
+	&:not(:disabled):focus {
+		@include button-style__focus-active;
 	}
 }
 

diff --git a/editor/components/block-settings-menu/block-remove-button.js b/editor/components/block-settings-menu/block-remove-button.js
@@ -12,7 +12,7 @@ import { compose } from '@wordpress/element';
 import { withDispatch } from '@wordpress/data';
 import { withEditorSettings } from '@wordpress/blocks';
 
-export function BlockRemoveButton( { onRemove, onClick = noop, isLocked, small = false, role } ) {
+export function BlockRemoveButton( { onRemove, onClick = noop, isLocked, role } ) {
 	if ( isLocked ) {
 		return null;
 	}
@@ -21,14 +21,12 @@ export function BlockRemoveButton( { onRemove, onClick = noop, isLocked, small =
 
 	return (
 		<IconButton
-			className="editor-block-settings-menu__control"
+			className="editor-block-settings-remove"
 			onClick={ flow( onRemove, onClick ) }
 			icon="trash"
-			label={ small ? label : undefined }
+			label={ label }
 			role={ role }
-		>
-			{ ! small && label }
-		</IconButton>
+		/>
 	);
 }