Inserter - basic support for block addition

src/app/AppContainer.js

@@ -6,6 +6,7 @@ import {
 	moveBlockUpAction,
 	moveBlockDownAction,
 	deleteBlockAction,
+	createBlockAction,
 } from '../store/actions';
 import MainApp from './MainApp';
 
@@ -31,6 +32,9 @@ const mapDispatchToProps = ( dispatch, ownProps ) => {
 		deleteBlockAction: ( clientId ) => {
 			dispatch( deleteBlockAction( clientId ) );
 		},
+		createBlockAction: ( clientId, block ) => {
+			dispatch( createBlockAction( clientId, block ) );
+		},
 	};
 };
 

src/block-management/block-manager.js

@@ -8,20 +8,18 @@ import { Platform, Switch, Text, View, FlatList } from 'react-native';
 import RecyclerViewList, { DataSource } from 'react-native-recyclerview-list';
 import BlockHolder from './block-holder';
 import { ToolbarButton } from './constants';
-
 import type { BlockType } from '../store/';
-
 import styles from './block-manager.scss';
-
 // Gutenberg imports
-import { getBlockType, serialize } from '@wordpress/blocks';
+import { getBlockType, serialize, createBlock } from '@wordpress/blocks';
 
 export type BlockListType = {
 	onChange: ( clientId: string, attributes: mixed ) => void,
 	focusBlockAction: string => mixed,
 	moveBlockUpAction: string => mixed,
 	moveBlockDownAction: string => mixed,
 	deleteBlockAction: string => mixed,
+	createBlockAction: ( string, BlockType ) => mixed,
 	blocks: Array<BlockType>,
 	aztechtml: string,
 	refresh: boolean,
@@ -73,6 +71,18 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 				this.state.dataSource.splice( dataSourceBlockIndex, 1 );
 				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( uid, 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.state.dataSource.push( newBlockWithFocusedState );
+				this.props.createBlockAction( newBlockWithFocusedState.clientId, newBlockWithFocusedState );
+				break;
 			case ToolbarButton.SETTINGS:
 				// TODO: implement settings
 				break;

src/store/actions/ActionTypes.js

@@ -10,5 +10,6 @@ export default {
 		MOVE_UP: 'BLOCK_MOVE_UP_ACTION',
 		MOVE_DOWN: 'BLOCK_MOVE_DOWN_ACTION',
 		DELETE: 'BLOCK_DELETE_ACTION',
+		CREATE: 'BLOCK_CREATE_ACTION',
 	},
 };

src/store/actions/index.js

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

src/store/actions/test.js

@@ -2,9 +2,16 @@
 
 import * as actions from './';
 import ActionTypes from './ActionTypes';
+// Gutenberg imports
+import { createBlock } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@gutenberg/core-blocks';
 
 describe( 'Store', () => {
 	describe( 'actions', () => {
+		beforeAll( () => {
+			registerCoreBlocks();
+		} );
+
 		it( 'should create an action to focus a block', () => {
 			const action = actions.focusBlockAction( '1' );
 			expect( action.type ).toBeDefined();
@@ -32,5 +39,14 @@ describe( 'Store', () => {
 			expect( action.type ).toEqual( ActionTypes.BLOCK.DELETE );
 			expect( action.clientId ).toEqual( '1' );
 		} );
+
+		it( 'should create an action to create a block', () => {
+			const newBlock = createBlock( 'core/code', { content: 'new test text for a core/code block' } );
+			const action = actions.createBlockAction( '1', newBlock );
+			expect( action.type ).toEqual( ActionTypes.BLOCK.CREATE );
+			expect( action.clientId ).toEqual( '1' );
+			expect( action.block ).toEqual( newBlock );
+		} );
+
 	} );
 } );

src/store/reducers/index.js

@@ -108,6 +108,12 @@ export const reducer = (
 			blocks.splice( index, 1 );
 			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);
+			return { blocks: blocks, refresh: ! state.refresh };
+		}
 		default:
 			return state;
 	}