Inserter - added direct insertion to block manager

src/app/AppContainer.js

@@ -32,8 +32,8 @@ const mapDispatchToProps = ( dispatch, ownProps ) => {
 		deleteBlockAction: ( clientId ) => {
 			dispatch( deleteBlockAction( clientId ) );
 		},
-		createBlockAction: ( clientId, block ) => {
-			dispatch( createBlockAction( clientId, block ) );
+		createBlockAction: ( clientId, block, clientIdAbove ) => {
+			dispatch( createBlockAction( clientId, block, clientIdAbove ) );
 		},
 	};
 };

src/block-management/block-manager.js

@@ -19,7 +19,7 @@ export type BlockListType = {
 	moveBlockUpAction: string => mixed,
 	moveBlockDownAction: string => mixed,
 	deleteBlockAction: string => mixed,
-	createBlockAction: ( string, BlockType ) => mixed,
+	createBlockAction: ( string, BlockType, string ) => mixed,
 	blocks: Array<BlockType>,
 	aztechtml: string,
 	refresh: boolean,
@@ -94,8 +94,6 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 	}
 
 	onToolbarButtonPressed( button: number, clientId: string ) {
-		// TODO: don't remove - to be used when working on direct insertion
-		// const dataSourceBlockIndex = this.getDataSourceIndexFromClientId( clientId );
 		switch ( button ) {
 			case ToolbarButton.UP:
 				this.props.moveBlockUpAction( clientId );
@@ -107,15 +105,10 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 				this.props.deleteBlockAction( clientId );
 				break;
 			case ToolbarButton.PLUS:
-				// TODO: direct access insertion: it would be nice to pass the dataSourceBlockIndex here,
-				// so in this way we know the new block should be inserted right after this one
-				// instead of being appended to the end.
-				// this.props.createBlockAction( clientId, dataSourceBlockIndex );
-
 				// TODO: block type picker here instead of hardcoding a core/code block
 				const newBlock = createBlock( 'core/paragraph', { content: 'new test text for a core/paragraph block' } );
 				const newBlockWithFocusedState = { ...newBlock, focused: false };
-				this.props.createBlockAction( newBlockWithFocusedState.clientId, newBlockWithFocusedState );
+				this.props.createBlockAction( newBlockWithFocusedState.clientId, newBlockWithFocusedState, clientId );
 				break;
 			case ToolbarButton.SETTINGS:
 				// TODO: implement settings

src/store/actions/index.js

@@ -38,8 +38,9 @@ export const deleteBlockAction: BlockActionType = clientId => ( {
 	clientId,
 } );
 
-export const createBlockAction: BlockActionType = (clientId, block) => ( {
+export const createBlockAction: BlockActionType = (clientId, block, clientIdAbove) => ( {
 	type: ActionTypes.BLOCK.CREATE,
 	block: block,
 	clientId,
+	clientIdAbove: clientIdAbove,
 } );

src/store/actions/test.js

@@ -39,7 +39,7 @@ describe( 'Store', () => {
 		it( 'should create an action to create a block', () => {
 			registerCoreBlocks();
 			const newBlock = createBlock( 'core/code', { content: 'new test text for a core/code block' } );
-			const action = actions.createBlockAction( '1', newBlock );
+			const action = actions.createBlockAction( '1', newBlock, '0' );
 			expect( action.type ).toEqual( ActionTypes.BLOCK.CREATE );
 		} );
 

src/store/reducers/index.js

@@ -21,6 +21,21 @@ function findBlockIndex( blocks, clientId: string ) {
 	} );
 }
 
+/*
+ * insert block into blocks[], below / after block having uidAbove
+*/
+function insertBlock( blocks, block, uidAbove ) {
+	// TODO we need to set focused: true and search for the currently focused block and
+	// set that one to `focused: false`.
+	const insertionIndex = findBlockIndex( blocks, uidAbove );
+	if (insertionIndex === blocks.length - 1) {
+		// append new block to blocks list
+		blocks.push(block);
+	} else {
+		blocks.splice(insertionIndex + 1, 0, block);
+	}
+}
+
 export const reducer = (
 	state: StateType = { blocks: [], refresh: false },
 	action: BlockActionType
@@ -109,9 +124,7 @@ export const reducer = (
 			return { blocks: blocks, refresh: ! state.refresh };
 		}
 		case ActionTypes.BLOCK.CREATE: {
-			// TODO we need to set focused: true and search for the currently focused block and
-			// set that one to `focused: false`.
-			blocks.push(action.block);
+			insertBlock(blocks, action.block, action.clientIdAbove);
 			return { blocks: blocks, refresh: ! state.refresh };
 		}
 		default: