Use disabled attribute to disable block mover buttons (#588)

WordPress · May 1, 2017 · 955656e · 955656e
1 parent 174fdf1
commit 955656e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git 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
@@ -19,8 +19,9 @@
 		color: $dark-gray-900;
 	}
 
-	&.is-disabled {
-		color: $light-gray-100;
+	&[disabled] {
+		cursor: default;
+		color: $light-gray-300;
 	}
 
 	.dashicon {