From a9dc4ae7d64056109bc446544b429d5f28d175e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s?= <andres.maneiro@automattic.com>
Date: Fri, 10 Aug 2018 11:16:34 +0200
Subject: [PATCH] HACK: PoC to improve the draggable indicator

This tweaks the dashicon viewBox to render a not too embarrasing
draggable indicator. This needs fixing.
---
 packages/components/src/dashicon/index.js               | 5 +++--
 packages/editor/src/components/block-list/breadcrumb.js | 4 ++--
 packages/editor/src/components/block-list/style.scss    | 4 ++++
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/dashicon/index.js b/packages/components/src/dashicon/index.js
index 8caabd4e5174b0..de56b5963db20e 100644
--- 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 ) {
@@ -887,7 +888,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
index 38bab6d23b5793..71b5798c8629e5 100644
--- 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
index 6c6344d386e803..e8d441fefc5fca 100644
--- 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;
+		}
 	}
 }