From 955656e08ccb1cb926c47b42ca922e2720833971 Mon Sep 17 00:00:00 2001
From: James Nylen <jnylen@gmail.com>
Date: Mon, 1 May 2017 16:29:52 -0500
Subject: [PATCH] Use `disabled` attribute to disable block mover buttons
 (#588)

---
 editor/components/block-mover/index.js   | 7 ++++---
 editor/components/block-mover/style.scss | 5 +++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/editor/components/block-mover/index.js b/editor/components/block-mover/index.js
index f4e422723e5d33..5ee2b5b506c0e0 100644
--- a/editor/components/block-mover/index.js
+++ b/editor/components/block-mover/index.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import classnames from 'classnames';
 import { first, last } from 'lodash';
 
 /**
@@ -15,14 +14,16 @@ function BlockMover( { onMoveUp, onMoveDown, isFirst, isLast } ) {
 	return (
 		<div className="editor-block-mover">
 			<IconButton
-				className={ classnames( 'editor-block-mover__control', { 'is-disabled': isFirst } ) }
+				className="editor-block-mover__control"
 				onClick={ onMoveUp }
 				icon="arrow-up-alt2"
+				disabled={ isFirst }
 			/>
 			<IconButton
-				className={ classnames( 'editor-block-mover__control', { 'is-disabled': isLast } ) }
+				className="editor-block-mover__control"
 				onClick={ onMoveDown }
 				icon="arrow-down-alt2"
+				disabled={ isLast }
 			/>
 		</div>
 	);
diff --git a/editor/components/block-mover/style.scss b/editor/components/block-mover/style.scss
index 8d78a818f091c2..5a41e101c9d942 100644
--- a/editor/components/block-mover/style.scss
+++ b/editor/components/block-mover/style.scss
@@ -19,8 +19,9 @@
 		color: $dark-gray-900;
 	}
 
-	&.is-disabled {
-		color: $light-gray-100;
+	&[disabled] {
+		cursor: default;
+		color: $light-gray-300;
 	}
 
 	.dashicon {