Merge branch 'feature/inserter' into try/inserter-take1-state-props-s…

…how-reg-blocks-take2

.eslintignore

@@ -0,0 +1,4 @@
+; ignore the submodules
+gutenberg
+react-native-aztec
+

.flowconfig

@@ -86,10 +86,7 @@ munge_underscores=true
 module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
 module.name_mapper='@gutenberg' -> '<PROJECT_ROOT>/gutenberg'
 module.name_mapper='@wordpress/blocks' -> '<PROJECT_ROOT>/gutenberg/packages/blocks/src'
-module.name_mapper='@wordpress/data' -> '<PROJECT_ROOT>/gutenberg/packages/data'
-module.name_mapper='@wordpress/element' -> '<PROJECT_ROOT>/gutenberg/packages/element'
-module.name_mapper='@wordpress/deprecated' -> '<PROJECT_ROOT>/gutenberg/packages/deprecated'
-module.name_mapper='@wordpress/redux-routine' -> '<PROJECT_ROOT>/gutenberg/packages/redux-routine'
+module.name_mapper='@wordpress/element' -> '<PROJECT_ROOT>/gutenberg/packages/element/src'
 
 ; mock/ignore style files
 module.name_mapper='.*\(.scss\)' -> 'empty/object'

__mocks__/nodejsMock.js

@@ -1,3 +1,4 @@
-/** @format */
+/** @flow
+ * @format */
 
 module.exports = {};

__mocks__/styleMock.js

@@ -1,3 +1,4 @@
-/** @format */
+/** @flow
+ * @format */
 
 module.exports = {};

index.js

@@ -1,4 +1,5 @@
-/** @format */
+/** @flow
+ * @format */
 
 import { AppRegistry } from 'react-native';
 import App from './src/app/App';

jest.config.js

@@ -1,4 +1,5 @@
-/** @format */
+/** @flow
+ * @format */
 
 const defaultPlatform = 'android';
 const rnPlatform = process.env.TEST_RN_PLATFORM || defaultPlatform;
@@ -30,7 +31,7 @@ module.exports = {
 		'node',
 	],
 	moduleNameMapper: {
-		'@wordpress\\/(blocks|data|element|deprecated|editor|redux-routine)$': '<rootDir>/gutenberg/packages/$1/src/index',
+		'@wordpress\\/(blocks|data|element|deprecated|editor|redux-routine|block-library)$': '<rootDir>/gutenberg/packages/$1/src/index',
 		'@gutenberg': '<rootDir>/gutenberg',
 
 		// Mock the CSS modules. See https://facebook.github.io/jest/docs/en/webpack.html#handling-static-assets

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "config": {
-    "jsfiles": "./*.js src/*.js src/**/*.js",
+    "jsfiles": "./*.js src/*.js src/**/*.js src/**/**/*.js",
     "scssfiles": "src/*.scss src/**/*.scss"
   },
   "devDependencies": {
@@ -32,6 +32,8 @@
     "jest": "^22.4.3",
     "jest-react-native": "^18.0.0",
     "prettier": "git+https://github.com/Automattic/calypso-prettier.git#calypso-1.9",
+    "prettier-eslint": "^8.8.2",
+    "prettier-eslint-cli": "^4.7.1",
     "react-dom": "^16.2.0",
     "react-native-sass-transformer": "^1.1.1",
     "react-test-renderer": "16.2.0",
@@ -56,6 +58,7 @@
     "flow": "flow",
     "prettier": "prettier-eslint --write $npm_package_config_jsfiles $npm_package_config_scssfiles",
     "clean": "yarn clean:aztec; yarn cache clean; yarn clean:haste; yarn clean:jest; yarn clean:metro; yarn clean:react; yarn clean:watchman; yarn clean:node;",
+    "clean:runtime": "yarn clean:haste; yarn clean:react; yarn clean:metro; yarn clean:jest; yarn clean:watchman",
     "clean:aztec": "pushd react-native-aztec && (yarn clean; pushd example && (yarn clean; popd); popd)",
     "clean:haste": "rm -rf /tmp/haste-map-react-native-packager-*",
     "clean:install": "yarn clean; yarn",
@@ -64,8 +67,8 @@
     "clean:react": "rm -rf $TMPDIR/react-*",
     "clean:node": "rm -rf node_modules",
     "clean:watchman": "watchman watch-del-all",
-    "lint": "eslint $npm_package_config_jsfiles",
-    "lint:fix": "eslint $npm_package_config_jsfiles --fix"
+    "lint": "eslint . --ext .js",
+    "lint:fix": "yarn lint --fix"
   },
   "dependencies": {
     "@wordpress/autop": "^1.0.6",
@@ -87,7 +90,6 @@
     "memize": "^1.0.5",
     "node-libs-react-native": "^1.0.2",
     "node-sass": "^4.8.3",
-    "prettier-eslint": "^8.8.1",
     "react": "16.3.1",
     "react-native": "0.55.4",
     "react-native-recyclerview-list": "git+https://github.com/wordpress-mobile/react-native-recyclerview-list.git#bfccbaab6b5954e18f8b0ed441ba38275853b79c",

src/app/App.js

@@ -1,7 +1,9 @@
-/** @format */
+/** @flow
+ * @format */
 
 import '../globals';
 
+import React from 'react';
 import { Provider } from 'react-redux';
 import { setupStore } from '../store';
 import AppContainer from './AppContainer';

src/app/AppContainer.js

@@ -1,4 +1,6 @@
-/** @format */
+/** @flow
+ * @format */
+
 import { connect } from 'react-redux';
 import {
 	updateBlockAttributes,

src/app/MainApp.js

@@ -1,6 +1,5 @@
-/** @format */
-
-// @flow
+/** @flow
+ * @format */
 
 import React from 'react';
 

src/block-management/block-holder.js

@@ -36,7 +36,10 @@ export default class BlockHolder extends React.Component<PropsType, StateType> {
 	renderToolbarIfBlockFocused() {
 		if ( this.props.focused ) {
 			return (
-				<Toolbar clientId={ this.props.clientId } onButtonPressed={ this.props.onToolbarButtonPressed } />
+				<Toolbar
+					clientId={ this.props.clientId }
+					onButtonPressed={ this.props.onToolbarButtonPressed }
+				/>
 			);
 		}
 
@@ -61,7 +64,9 @@ export default class BlockHolder extends React.Component<PropsType, StateType> {
 				<Block
 					attributes={ { ...this.props.attributes } }
 					// pass a curried version of onChanged with just one argument
-					setAttributes={ ( attrs ) => this.props.onChange( this.props.clientId, { ...this.props.attributes, ...attrs } ) }
+					setAttributes={ ( attrs ) =>
+						this.props.onChange( this.props.clientId, { ...this.props.attributes, ...attrs } )
+					}
 					isSelected={ this.props.focused }
 					style={ style }
 				/>

src/block-management/block-manager.js

@@ -148,6 +148,7 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 		const dataSource = this.state.dataSource;
 		const block = dataSource.get( index );
 		block.attributes = attributes;
+		dataSource.set( index, block );
 		// Update Redux store
 		this.props.onChange( clientId, attributes );
 	}

src/block-management/toolbar.js

@@ -17,7 +17,11 @@ export default class Toolbar extends React.Component<PropsType> {
 		return (
 			<View style={ styles.toolbar }>
 				<TouchableOpacity
-					onPress={ this.props.onButtonPressed.bind( this, ToolbarButton.PLUS, this.props.clientId ) }
+					onPress={ this.props.onButtonPressed.bind(
+						this,
+						ToolbarButton.PLUS,
+						this.props.clientId
+					) }
 				>
 					<View style={ styles.toolbarButton }>
 						<Text>+</Text>
@@ -33,7 +37,11 @@ export default class Toolbar extends React.Component<PropsType> {
 				</TouchableOpacity>
 				<View style={ styles.buttonSeparator } />
 				<TouchableOpacity
-					onPress={ this.props.onButtonPressed.bind( this, ToolbarButton.DOWN, this.props.clientId ) }
+					onPress={ this.props.onButtonPressed.bind(
+						this,
+						ToolbarButton.DOWN,
+						this.props.clientId
+					) }
 				>
 					<View style={ styles.toolbarButton }>
 						<Text>▼</Text>
@@ -54,7 +62,11 @@ export default class Toolbar extends React.Component<PropsType> {
 				</TouchableOpacity>
 				<View style={ styles.buttonSeparator } />
 				<TouchableOpacity
-					onPress={ this.props.onButtonPressed.bind( this, ToolbarButton.DELETE, this.props.clientId ) }
+					onPress={ this.props.onButtonPressed.bind(
+						this,
+						ToolbarButton.DELETE,
+						this.props.clientId
+					) }
 				>
 					<View style={ styles.toolbarButton }>
 						<Text>🗑</Text>

src/globals.js

@@ -1,4 +1,5 @@
-/** @format */
+/** @flow
+ * @format */
 
 import { createElement } from '@wordpress/element';
 import jsdom from 'jsdom-jscore';

src/store/actions/index.js

@@ -4,12 +4,20 @@
  */
 
 import ActionTypes from './ActionTypes';
+import type { BlockType } from '../';
 
 export type BlockActionType = string => {
 	type: $Values<typeof ActionTypes.BLOCK>,
 	clientId: string,
 };
 
+export type CreateActionType = ( string, BlockType, string ) => {
+	type: $Values<typeof ActionTypes.BLOCK>,
+	clientId: string,
+	block: BlockType,
+	clientIdAbove: string,
+};
+
 export function updateBlockAttributes( clientId: string, attributes: mixed ) {
 	return {
 		type: ActionTypes.BLOCK.UPDATE_ATTRIBUTES,
@@ -18,29 +26,29 @@ export function updateBlockAttributes( clientId: string, attributes: mixed ) {
 	};
 }
 
-export const focusBlockAction: BlockActionType = clientId => ( {
+export const focusBlockAction: BlockActionType = ( clientId ) => ( {
 	type: ActionTypes.BLOCK.FOCUS,
 	clientId,
 } );
 
-export const moveBlockUpAction: BlockActionType = clientId => ( {
+export const moveBlockUpAction: BlockActionType = ( clientId ) => ( {
 	type: ActionTypes.BLOCK.MOVE_UP,
 	clientId,
 } );
 
-export const moveBlockDownAction: BlockActionType = clientId => ( {
+export const moveBlockDownAction: BlockActionType = ( clientId ) => ( {
 	type: ActionTypes.BLOCK.MOVE_DOWN,
 	clientId,
 } );
 
-export const deleteBlockAction: BlockActionType = clientId => ( {
+export const deleteBlockAction: BlockActionType = ( clientId ) => ( {
 	type: ActionTypes.BLOCK.DELETE,
 	clientId,
 } );
 
-export const createBlockAction: BlockActionType = (clientId, block, clientIdAbove) => ( {
+export const createBlockAction: CreateActionType = ( clientId, block, clientIdAbove ) => ( {
 	type: ActionTypes.BLOCK.CREATE,
 	clientId,
 	block: block,
-	clientIdAbove
+	clientIdAbove,
 } );

src/store/actions/test.js

@@ -11,7 +11,7 @@ describe( 'Store', () => {
 		beforeAll( () => {
 			registerCoreBlocks();
 		} );
-	
+
 		it( 'should create an action to focus a block', () => {
 			const action = actions.focusBlockAction( '1' );
 			expect( action.type ).toBeDefined();
@@ -46,7 +46,7 @@ describe( 'Store', () => {
 			expect( action.type ).toEqual( ActionTypes.BLOCK.CREATE );
 			expect( action.clientId ).toEqual( '1' );
 			expect( action.block ).toEqual( newBlock );
+			expect( action.clientIdAbove ).toEqual( '0' );
 		} );
-
 	} );
 } );

src/store/index.js

@@ -41,8 +41,10 @@ const initialMoreBlockHtml = `
 <!-- /wp:more -->
 `;
 
-const initialHeadingBlockHtml = '<!-- wp:heading {"level": 2} --><h2>Welcome to Gutenberg</h2><!-- /wp:heading -->';
-const initialParagraphBlockHtml = '<!-- wp:paragraph --><p><b>Hello</b> World!</p><!-- /wp:paragraph -->';
+const initialHeadingBlockHtml =
+	'<!-- wp:heading {"level": 2} --><h2>Welcome to Gutenberg</h2><!-- /wp:heading -->';
+const initialParagraphBlockHtml =
+	'<!-- wp:paragraph --><p><b>Hello</b> World!</p><!-- /wp:paragraph -->';
 const initialParagraphBlockHtml2 = `<!-- wp:paragraph {"dropCap":true,"backgroundColor":"vivid-red","fontSize":"large","className":"custom-class-1 custom-class-2"} -->
 <p class="has-background has-drop-cap has-large-font-size has-vivid-red-background-color custom-class-1 custom-class-2">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor tincidunt sapien, quis dictum orci sollicitudin quis. Proin sed elit id est pulvinar feugiat vitae eget dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><!-- /wp:paragraph -->`;
@@ -89,7 +91,7 @@ const initialState: StateType = {
 
 const devToolsEnhancer =
 	// ( 'development' === process.env.NODE_ENV && require( 'remote-redux-devtools' ).default ) ||
-	( () => {} );
+	() => {};
 
 export function setupStore( state: StateType = initialState ) {
 	const store = createStore( reducer, state, devToolsEnhancer() );

src/store/reducers/index.js

@@ -10,13 +10,13 @@ import type { StateType } from '../';
 import type { BlockActionType } from '../actions';
 
 function findBlock( blocks, clientId: string ) {
-	return find( blocks, obj => {
+	return find( blocks, ( obj ) => {
 		return obj.clientId === clientId;
 	} );
 }
 
 function findBlockIndex( blocks, clientId: string ) {
-	return findIndex( blocks, obj => {
+	return findIndex( blocks, ( obj ) => {
 		return obj.clientId === clientId;
 	} );
 }
@@ -27,13 +27,7 @@ function findBlockIndex( blocks, clientId: string ) {
 function insertBlock( blocks, block, clientIdAbove ) {
 	// 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, clientIdAbove );
-	if (insertionIndex === blocks.length - 1) {
-		// append new block to blocks list
-		blocks.push(block);
-	} else {
-		blocks.splice(insertionIndex + 1, 0, block);
-	}
+	blocks.splice( findBlockIndex( blocks, clientIdAbove ) + 1, 0, block );
 }
 
 export const reducer = (
@@ -126,8 +120,7 @@ export const reducer = (
 		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);
+			insertBlock( blocks, action.block, action.clientIdAbove );
 			return { blocks: blocks, refresh: ! state.refresh };
 		}
 		default: