TinyMCE per block: Moving Blocks using the arrow icons

tinymce-per-block/src/blocks/embed-block/form.js

@@ -17,7 +17,8 @@ export default class EmbedBlockForm extends Component {
 	};
 
 	render() {
-		const { block, isSelected, change, moveUp, moveDown, remove, focusConfig, focus } = this.props;
+		const { block, isSelected, change, moveCursorUp, moveCursorDown,
+			remove, focusConfig, focus, moveBlockUp, moveBlockDown } = this.props;
 
 		const removePrevious = () => {
 			if ( ! block.url ) {
@@ -29,14 +30,15 @@ export default class EmbedBlockForm extends Component {
 
 		return (
 			<div>
-				{ isSelected && <BlockArrangement block={ block } /> }
+				{ isSelected && <BlockArrangement block={ block }
+					moveBlockUp={ moveBlockUp } moveBlockDown={ moveBlockDown } /> }
 				<div className="embed-block__form">
 					<div className="embed-block__content" dangerouslySetInnerHTML={ { __html: html } } />
 					<EnhancedInputComponent
 						ref={ this.bindInput }
-						moveUp={ moveUp }
+						moveCursorUp={ moveCursorUp }
 						removePrevious={ removePrevious }
-						moveDown={ moveDown }
+						moveCursorDown={ moveCursorDown }
 						value={ block.url }
 						onChange={ ( value ) => change( { url: value } ) }
 						focusConfig={ focusConfig }

tinymce-per-block/src/blocks/heading-block/form.js

@@ -11,6 +11,7 @@ import {
 
 import InlineTextBlockForm from '../inline-text-block/form';
 import EditableFormatToolbar from 'controls/editable-format-toolbar';
+import BlockArrangement from 'controls/block-arrangement';
 
 export default class HeadingBlockForm extends Component {
 	bindForm = ( ref ) => {
@@ -31,7 +32,7 @@ export default class HeadingBlockForm extends Component {
 	};
 
 	render() {
-		const { block, isSelected } = this.props;
+		const { block, isSelected, moveBlockUp, moveBlockDown } = this.props;
 		const sizes = [
 			{ id: 'h1', icon: EditorHeading1Icon },
 			{ id: 'h2', icon: EditorHeading2Icon },
@@ -40,6 +41,8 @@ export default class HeadingBlockForm extends Component {
 
 		return (
 			<div>
+				{ isSelected && <BlockArrangement block={ block }
+					moveBlockUp={ moveBlockUp } moveBlockDown={ moveBlockDown } /> }
 				{ isSelected && (
 					<div className="block-list__block-controls">
 						<div className="block-list__block-controls-group">

tinymce-per-block/src/blocks/html-block/form.js

@@ -38,8 +38,8 @@ export default class HtmlBlockForm extends Component {
 	};
 
 	render() {
-		const { block, isSelected, change, moveUp, moveDown, appendBlock,
-			mergeWithPrevious, remove, focusConfig, focus } = this.props;
+		const { block, isSelected, change, moveCursorUp, moveCursorDown, appendBlock,
+			mergeWithPrevious, remove, focusConfig, focus, moveBlockUp, moveBlockDown } = this.props;
 		const splitValue = ( left, right ) => {
 			change( { content: left } );
 			if ( right ) {
@@ -58,7 +58,8 @@ export default class HtmlBlockForm extends Component {
 
 		return (
 			<div>
-				{ isSelected && <BlockArrangement block={ block } /> }
+				{ isSelected && <BlockArrangement block={ block }
+					moveBlockUp={ moveBlockUp } moveBlockDown={ moveBlockDown } /> }
 				{ isSelected && (
 					<div className="block-list__block-controls">
 						<div className="block-list__block-controls-group">
@@ -74,8 +75,8 @@ export default class HtmlBlockForm extends Component {
 					<EditableComponent
 						ref={ this.bindEditable }
 						content={ block.content }
-						moveUp={ moveUp }
-						moveDown={ moveDown }
+						moveCursorUp={ moveCursorUp }
+						moveCursorDown={ moveCursorDown }
 						splitValue={ splitValue }
 						mergeWithPrevious={ mergeWithPrevious }
 						remove={ remove }

tinymce-per-block/src/blocks/image-block/form.js

@@ -28,7 +28,8 @@ export default class ImageBlockForm extends Component {
 	};
 
 	render() {
-		const { block, change, moveDown, moveUp, remove, appendBlock, isSelected, focusConfig, focus } = this.props;
+		const { block, change, moveCursorDown, moveCursorUp, remove, appendBlock,
+			isSelected, focusConfig, focus, moveBlockUp, moveBlockDown } = this.props;
 		const removePrevious = () => {
 			if ( ! block.caption ) {
 				remove();
@@ -51,7 +52,8 @@ export default class ImageBlockForm extends Component {
 
 		return (
 			<div className={ classNames( 'image-block__form', alignValue ) }>
-				{ isSelected && <BlockArrangement block={ block } /> }
+				{ isSelected && <BlockArrangement block={ block }
+					moveBlockUp={ moveBlockUp } moveBlockDown={ moveBlockDown } /> }
 				{ isSelected &&
 					<div className="block-list__block-controls">
 						<div className="block-list__block-controls-group">
@@ -79,9 +81,9 @@ export default class ImageBlockForm extends Component {
 				<div className="image-block__caption">
 					<EnhancedInputComponent
 						ref={ this.bindCaption }
-						moveUp={ moveUp }
+						moveCursorUp={ moveCursorUp }
 						removePrevious={ removePrevious }
-						moveDown={ moveDown }
+						moveCursorDown={ moveCursorDown }
 						splitValue={ splitValue }
 						value={ block.caption }
 						onChange={ ( value ) => change( { caption: value } ) }

tinymce-per-block/src/blocks/inline-text-block/form.js

@@ -5,7 +5,7 @@ import { createElement, Component } from 'wp-elements';
 import { EditableComponent } from 'wp-blocks';
 
 export default class InlineTextBlockForm extends Component {
-	merge = ( block, index ) => {
+	merge = ( block ) => {
 		const acceptedBlockTypes = [ 'quote', 'text', 'heading' ];
 		if ( acceptedBlockTypes.indexOf( block.blockType ) === -1 ) {
 			return;
@@ -21,7 +21,7 @@ export default class InlineTextBlockForm extends Component {
 		};
 
 		const { block: { content }, remove, change } = this.props;
-		remove( index );
+		remove( block.uid );
 		setTimeout( () => change(
 			{ content: getLeaves( content ) + getLeaves( block.content ) }
 		) );
@@ -37,7 +37,7 @@ export default class InlineTextBlockForm extends Component {
 	};
 
 	render() {
-		const { block, change, moveUp, moveDown, appendBlock,
+		const { block, change, moveCursorUp, moveCursorDown, appendBlock,
 			mergeWithPrevious, remove, setToolbarState, focus, focusConfig } = this.props;
 
 		const splitValue = ( left, right ) => {
@@ -57,8 +57,8 @@ export default class InlineTextBlockForm extends Component {
 			<EditableComponent
 				ref={ this.bindEditable }
 				content={ block.content }
-				moveUp={ moveUp }
-				moveDown={ moveDown }
+				moveCursorUp={ moveCursorUp }
+				moveCursorDown={ moveCursorDown }
 				splitValue={ splitValue }
 				mergeWithPrevious={ mergeWithPrevious }
 				remove={ remove }

tinymce-per-block/src/blocks/quote-block/form.js

@@ -18,7 +18,7 @@ export default class QuoteBlockForm extends Component {
 		this.cite = ref;
 	};
 
-	merge = ( block, index ) => {
+	merge = ( block ) => {
 		const acceptedBlockTypes = [ 'quote', 'text', 'heading' ];
 		if ( acceptedBlockTypes.indexOf( block.blockType ) === -1 ) {
 			return;
@@ -34,7 +34,7 @@ export default class QuoteBlockForm extends Component {
 		};
 
 		const { block: { content }, remove, change } = this.props;
-		remove( index );
+		remove( block.uid );
 		setTimeout( () => change(
 			{ content: getLeaves( content ) + getLeaves( block.content ) }
 		) );
@@ -58,8 +58,9 @@ export default class QuoteBlockForm extends Component {
 	};
 
 	render() {
-		const { block, change, moveUp, moveDown, remove,
-			mergeWithPrevious, appendBlock, isSelected, focusConfig, focus } = this.props;
+		const { block, change, moveCursorUp, moveCursorDown, remove,
+			mergeWithPrevious, appendBlock, isSelected, focusConfig, focus,
+			moveBlockUp, moveBlockDown } = this.props;
 		const splitValue = ( left, right ) => {
 			change( { cite: left } );
 			appendBlock( {
@@ -74,7 +75,8 @@ export default class QuoteBlockForm extends Component {
 
 		return (
 			<div>
-				{ isSelected && <BlockArrangement block={ block } /> }
+				{ isSelected && <BlockArrangement block={ block }
+					moveBlockUp={ moveBlockUp } moveBlockDown={ moveBlockDown } /> }
 				{ isSelected &&
 					<div className="block-list__block-controls">
 						<div className="block-list__block-controls-group">
@@ -88,8 +90,8 @@ export default class QuoteBlockForm extends Component {
 						<EditableComponent
 							ref={ this.bindContent }
 							content={ block.content }
-							moveUp={ moveUp }
-							moveDown={ this.moveToCite }
+							moveCursorUp={ moveCursorUp }
+							moveCursorDown={ this.moveToCite }
 							mergeWithPrevious={ mergeWithPrevious }
 							remove={ remove }
 							onChange={ ( value ) => change( { content: value } ) }
@@ -102,8 +104,8 @@ export default class QuoteBlockForm extends Component {
 					<div className="quote-block__cite">
 						<EditableComponent
 							ref={ this.bindCite }
-							moveUp={ this.moveToContent }
-							moveDown={ moveDown }
+							moveCursorUp={ this.moveToContent }
+							moveCursorDown={ moveCursorDown }
 							mergeWithPrevious={ this.moveToContent }
 							remove={ this.moveToContent }
 							content={ block.cite }

tinymce-per-block/src/blocks/text-block/form.js

@@ -27,15 +27,16 @@ export default class TextBlockForm extends Component {
 	};
 
 	render() {
-		const { block, isSelected } = this.props;
+		const { block, isSelected, moveBlockUp, moveBlockDown } = this.props;
 		const selectedTextAlign = block.align || 'left';
 		const style = {
 			textAlign: selectedTextAlign
 		};
 
 		return (
 			<div>
-				{ isSelected && <BlockArrangement block={ block } /> }
+				{ isSelected && <BlockArrangement block={ block }
+					moveBlockUp={ moveBlockUp } moveBlockDown={ moveBlockDown } /> }
 				{ isSelected &&
 					<div className="block-list__block-controls">
 						<div className="block-list__block-controls-group">

tinymce-per-block/src/controls/block-arrangement.js

@@ -5,17 +5,25 @@ import { createElement } from 'wp-elements';
 import { getBlock } from 'wp-blocks';
 import { ArrowDownAlt2Icon, ArrowUpAlt2Icon } from 'dashicons';
 
-export default function BlockArrangement( { block } ) {
+export default function BlockArrangement( { block, moveBlockUp, moveBlockDown } ) {
 	const blockDefinition = getBlock( block.blockType );
 	const Icon = blockDefinition.icon;
+	const onMoveUp = ( event ) => {
+		event.stopPropagation();
+		moveBlockUp();
+	};
+	const onMoveDown = ( event ) => {
+		event.stopPropagation();
+		moveBlockDown();
+	};
 
 	return (
 		<div className="block-list__block-arrangement">
 			<div className="block-list__movement-controls">
-				<button className="block-list__block-arrange-control">
+				<button className="block-list__block-arrange-control" onClick={ onMoveUp }>
 					<ArrowUpAlt2Icon />
 				</button>
-				<button className="block-list__block-arrange-control">
+				<button className="block-list__block-arrange-control" onClick={ onMoveDown }>
 					<ArrowDownAlt2Icon />
 				</button>
 			</div>

tinymce-per-block/src/external/wp-blocks/editable/index.js

@@ -102,7 +102,7 @@ export default class EditableComponent extends Component {
 		if ( event.keyCode === 38 || event.keyCode === 37 ) {
 			if ( this.isStartOfEditor() ) {
 				event.preventDefault();
-				this.props.moveUp();
+				this.props.moveCursorUp();
 			}
 		} else if ( event.keyCode === 40 || event.keyCode === 39 ) {
 			const bookmark = this.editor.selection.getBookmark();
@@ -112,7 +112,7 @@ export default class EditableComponent extends Component {
 			this.editor.selection.moveToBookmark( bookmark );
 			if ( isEqual( this.editor.selection.getBookmark( 2, true ), finalBookmark ) ) {
 				event.preventDefault();
-				this.props.moveDown();
+				this.props.moveCursorDown();
 			}
 		} else if ( event.keyCode === 13 && this.props.single ) {
 			// Wait for the event to propagate

tinymce-per-block/src/external/wp-blocks/input/index.js

@@ -11,8 +11,8 @@ export default class EnhancedInput extends Component {
 		removePrevious: () => {},
 		onChange: () => {},
 		onFocusChange: () => {},
-		moveUp: () => {},
-		moveDown: () => {},
+		moveCursorUp: () => {},
+		moveCursorDown: () => {},
 	};
 
 	bindInput = ( ref ) => {
@@ -38,7 +38,7 @@ export default class EnhancedInput extends Component {
 	}
 
 	onKeyDown = ( event ) => {
-		const { value, splitValue, removePrevious, moveUp, moveDown } = this.props;
+		const { value, splitValue, removePrevious, moveCursorUp, moveCursorDown } = this.props;
 		if ( event.keyCode === 13 ) {
 			event.preventDefault();
 			event.stopPropagation();
@@ -57,13 +57,13 @@ export default class EnhancedInput extends Component {
 			this.input.selectionStart === 0
 		) {
 			event.preventDefault();
-			moveUp();
+			moveCursorUp();
 		} else if (
 			( event.keyCode === 40 || event.keyCode === 39 ) &&
 			this.input.selectionStart === value.length
 		) {
 			event.preventDefault();
-			moveDown();
+			moveCursorDown();
 		}
 	};
 
@@ -78,7 +78,7 @@ export default class EnhancedInput extends Component {
 	render() {
 		// Keeping splitValue to exclude it from props
 		const ignoredProps = [
-			'value', 'splitValue', 'removePrevious', 'moveDown', 'moveUp', 'focusConfig', 'onFocusChange'
+			'value', 'splitValue', 'removePrevious', 'moveCursorDown', 'moveCursorUp', 'focusConfig', 'onFocusChange'
 		];
 		const { value } = this.props;
 		const props = omit( this.props, ignoredProps );

tinymce-per-block/src/renderers/block/block-list/block.js

@@ -48,10 +48,10 @@ export default class BlockListBlock extends Component {
 					block: newBlock
 				} );
 			},
-			remove( index ) {
+			remove( uid ) {
 				executeCommand( {
 					type: 'remove',
-					index
+					uid
 				} );
 			},
 			mergeWithPrevious() {
@@ -65,20 +65,30 @@ export default class BlockListBlock extends Component {
 					config
 				} );
 			},
-			moveUp() {
+			moveCursorUp() {
 				executeCommand( {
-					type: 'moveUp'
+					type: 'moveCursorUp'
 				} );
 			},
-			moveDown() {
+			moveCursorDown() {
 				executeCommand( {
-					type: 'moveDown'
+					type: 'moveCursorDown'
 				} );
 			},
 			select() {
 				executeCommand( {
 					type: 'select'
 				} );
+			},
+			moveBlockUp() {
+				executeCommand( {
+					type: 'moveBlockUp'
+				} );
+			},
+			moveBlockDown() {
+				executeCommand( {
+					type: 'moveBlockDown'
+				} );
 			}
 		};