HACK: PoC to improve the draggable indicator

This tweaks the dashicon viewBox to render a not too embarrasing draggable indicator. This needs fixing.
WordPress · Aug 13, 2018 · 7fa1a98 · 7fa1a98
1 parent ebf47fe
commit 7fa1a98
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/packages/components/src/dashicon/index.js b/packages/components/src/dashicon/index.js
@@ -15,12 +15,13 @@ export default class Dashicon extends Component {
 		return (
 			this.props.icon !== nextProps.icon ||
 			this.props.size !== nextProps.size ||
+			this.props.viewBox !== nextProps.viewBox ||
 			this.props.className !== nextProps.className
 		);
 	}
 
 	render() {
-		const { icon, className, size = 20 } = this.props;
+		const { icon, className, size = 20, viewBox = 20 } = this.props;
 		let path;
 
 		switch ( icon ) {
@@ -893,7 +894,7 @@ export default class Dashicon extends Component {
 				xmlns="http://www.w3.org/2000/svg"
 				width={ size }
 				height={ size }
-				viewBox="0 0 20 20"
+				viewBox={ '0 0 ' + viewBox + ' ' + viewBox } // TODO: if we like this approach, remove this hack and implement upstream
 			>
 				<path d={ path } />
 			</svg>

diff --git a/packages/editor/src/components/block-list/breadcrumb.js b/packages/editor/src/components/block-list/breadcrumb.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { Component, Fragment } from '@wordpress/element';
-import { Toolbar } from '@wordpress/components';
+import { Dashicon, Toolbar } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
@@ -53,7 +53,7 @@ export class BlockBreadcrumb extends Component {
 		return (
 			<div className={ 'editor-block-list__breadcrumb' }>
 				<Toolbar>
-					<div>:::&nbsp;&nbsp;</div>
+					<div className="editor-block-list__breadcrumb-drag-handle"><Dashicon icon="editor-justify" size={ 10 } viewBox={ 14 } /></div>
 					{ rootClientId && (
 						<Fragment>
 							<BlockTitle clientId={ rootClientId } />

diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
@@ -944,6 +944,10 @@
 		.editor-block-list__block:hover & {
 			@include fade_in(0.1s);
 		}
+
+		.editor-block-list__breadcrumb-drag-handle {
+			margin-right: 2px;
+		}
 	}
 }