diff --git a/editor/block-mover/generate-order-title.js b/editor/block-mover/generate-order-title.js
new file mode 100644
index 00000000000000..646558f576aa0c
--- /dev/null
+++ b/editor/block-mover/generate-order-title.js
@@ -0,0 +1,29 @@
+export default function( { typeTitle, position, isFirst, isLast, dir } ) {
+ if ( isFirst && isLast ) {
+ return `Block "${ typeTitle }" is the only block, and cannot be moved`;
+ }
+
+ if ( dir > 0 && ! isLast ) {
+ // moving down
+ return `Move "${ typeTitle }" block from position ${ position }` +
+ ` down to position ${ position + 1 }`;
+ }
+
+ if ( dir > 0 && isLast ) {
+ // moving down, and is the last item
+ return `Block "${ typeTitle }" is at the end of the content and can’t be moved down`;
+ }
+
+ if ( dir < 0 && ! isFirst ) {
+ // moving up
+ return `Move "${ typeTitle }" block from position ${ position }` +
+ ` up to position ${ position - 1 }`;
+ }
+
+ if ( dir < 0 && isFirst ) {
+ // moving up, and is the first item
+ return `Block "${ typeTitle }" is at the beginning of the content and can’t be moved up`;
+ }
+
+ return '';
+}
diff --git a/editor/block-mover/index.js b/editor/block-mover/index.js
index f040d2394a67f2..53cce706e4c42e 100644
--- a/editor/block-mover/index.js
+++ b/editor/block-mover/index.js
@@ -13,25 +13,32 @@ import { IconButton } from 'components';
* Internal dependencies
*/
import './style.scss';
-import { isFirstBlock, isLastBlock } from '../selectors';
+import { isFirstBlock, isLastBlock, getBlock } from '../selectors';
+import { getBlockSettings } from '../../blocks/api/registration';
+import generateOrderTitle from './generate-order-title';
-function BlockMover( { onMoveUp, onMoveDown, isFirst, isLast } ) {
+function BlockMover( { onMoveUp, onMoveDown, isFirst, isLast, block, order } ) {
// We emulate a disabled state because forcefully applying the `disabled`
// attribute on the button while it has focus causes the screen to change
// to an unfocused state (body as active element) without firing blur on,
// the rendering parent, leaving it unable to react to focus out.
+ const type = getBlockSettings( block.blockType ),
+ typeTitle = type.title,
+ position = ( order + 1 );
return (
@@ -43,6 +50,7 @@ export default connect(
( state, ownProps ) => ( {
isFirst: isFirstBlock( state, first( ownProps.uids ) ),
isLast: isLastBlock( state, last( ownProps.uids ) ),
+ block: getBlock( state, ownProps.uid ),
} ),
( dispatch, ownProps ) => ( {
onMoveDown() {
diff --git a/editor/block-mover/style.scss b/editor/block-mover/style.scss
index a7b69706e7009f..f184f10a818696 100644
--- a/editor/block-mover/style.scss
+++ b/editor/block-mover/style.scss
@@ -10,13 +10,13 @@
border: none;
outline: none;
background: none;
- color: $dark-gray-100;
+ color: $dark-gray-300;
cursor: pointer;
width: 20px;
height: 20px;
&:hover {
- color: $dark-gray-900;
+ color: $dark-gray-500;
}
&[aria-disabled="true"] {
diff --git a/editor/block-mover/test/generate-order-title.js b/editor/block-mover/test/generate-order-title.js
new file mode 100644
index 00000000000000..fb7c18eb0e52e7
--- /dev/null
+++ b/editor/block-mover/test/generate-order-title.js
@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import { expect } from 'chai';
+
+/**
+ * Internal dependencies
+ */
+import generateOrderTitle from '../generate-order-title';
+
+describe( 'block mover', () => {
+ describe( 'generateOrderTitle', () => {
+ const typeTitle = 'TestType';
+
+ it( 'Should generate a title for the first item moving up', () => {
+ expect( generateOrderTitle( {
+ typeTitle,
+ position: 1,
+ isFirst: true,
+ isLast: false,
+ dir: -1,
+ } ) ).to.equal(
+ 'Block "' + typeTitle + '" is at the beginning of the content and can’t be moved up'
+ );
+ } );
+
+ it( 'Should generate a title for the last item moving down', () => {
+ expect( generateOrderTitle( {
+ typeTitle,
+ position: 1,
+ isFirst: false,
+ isLast: true,
+ dir: 1,
+ } ) ).to.equal(
+ 'Block "' + typeTitle + '" is at the end of the content and can’t be moved down'
+ );
+ } );
+
+ it( 'Should generate a title for the second item moving up', () => {
+ expect( generateOrderTitle( {
+ typeTitle,
+ position: 2,
+ isFirst: false,
+ isLast: false,
+ dir: -1,
+ } ) ).to.equal(
+ 'Move "' + typeTitle + '" block from position 2 up to position 1'
+ );
+ } );
+
+ it( 'Should generate a title for the second item moving down', () => {
+ expect( generateOrderTitle( {
+ typeTitle,
+ position: 2,
+ isFirst: false,
+ isLast: false,
+ dir: 1,
+ } ) ).to.equal(
+ 'Move "' + typeTitle + '" block from position 2 down to position 3'
+ );
+ } );
+
+ it( 'Should generate a title for the only item in the list', () => {
+ expect( generateOrderTitle( {
+ typeTitle,
+ position: 1,
+ isFirst: true,
+ isLast: true,
+ dir: 1,
+ } ) ).to.equal(
+ 'Block "' + typeTitle + '" is the only block, and cannot be moved'
+ );
+ } );
+ } );
+} );
diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js
index cc93ddf663d919..d883b6c52c10b6 100644
--- a/editor/modes/visual-editor/block.js
+++ b/editor/modes/visual-editor/block.js
@@ -232,7 +232,7 @@ class VisualEditorBlock extends wp.element.Component {
tabIndex="0"
{ ...wrapperProps }
>
- { ( showUI || isHovered ) && }
+ { ( showUI || isHovered ) && }
{ showUI &&