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 &&