Introduce and bind components to global app state

.babelrc

@@ -7,6 +7,7 @@
 		} ]
 	],
 	"plugins": [
+		"lodash",
 		"transform-runtime",
 		"transform-object-rest-spread",
 		[ "transform-react-jsx", {

blocks/parser.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import * as query from 'hpq';
+import uuid from 'uuid/v4';
 
 /**
  * Internal dependencies
@@ -54,6 +55,7 @@ export default function parse( content ) {
 		if ( settings ) {
 			memo.push( {
 				blockType,
+				uid: uuid(),
 				rawContent: blockNode.rawContent,
 				attributes: getBlockAttributes( blockNode, settings )
 			} );

blocks/test/parser.js

@@ -96,13 +96,13 @@ describe( 'block parser', () => {
 				'<!-- wp:core/unknown-block -->Ribs<!-- /wp:core/unknown-block -->'
 			);
 
-			expect( parsed ).to.eql( [ {
-				blockType: 'core/test-block',
-				attributes: {
-					content: 'Ribs & Chicken'
-				},
-				rawContent: 'Ribs'
-			} ] );
+			expect( parsed ).to.have.lengthOf( 1 );
+			expect( parsed[ 0 ].blockType ).to.equal( 'core/test-block' );
+			expect( parsed[ 0 ].attributes ).to.eql( {
+				content: 'Ribs & Chicken'
+			} );
+			expect( parsed[ 0 ].rawContent ).to.equal( 'Ribs' );
+			expect( parsed[ 0 ].uid ).to.be.a( 'string' );
 		} );
 
 		it( 'should parse the post content, using unknown block handler', () => {

editor/header/index.js

@@ -3,12 +3,10 @@
  */
 import ModeSwitcher from './mode-switcher';
 
-function Header( { mode, onSwitchMode } ) {
+function Header() {
 	return (
 		<header className="editor-header">
-			<ModeSwitcher
-				mode={ mode }
-				onSwitch={ onSwitchMode } />
+			<ModeSwitcher />
 		</header>
 	);
 }

editor/header/mode-switcher/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
 class ModeSwitcher extends wp.element.Component {
 	constructor() {
 		super( ...arguments );
@@ -50,4 +55,16 @@ class ModeSwitcher extends wp.element.Component {
 	}
 }
 
-export default ModeSwitcher;
+export default connect(
+	( state ) => ( {
+		mode: state.mode
+	} ),
+	( dispatch ) => ( {
+		onSwitch( mode ) {
+			dispatch( {
+				type: 'SWITCH_MODE',
+				mode: mode
+			} );
+		}
+	} )
+)( ModeSwitcher );

editor/index.js

@@ -1,9 +1,15 @@
+/**
+ * External dependencies
+ */
+import { Provider } from 'react-redux';
+
 /**
  * Internal dependencies
  */
 import './assets/stylesheets/main.scss';
 import './blocks';
 import Layout from './layout';
+import { createReduxStore } from './state';
 
 /**
  * Initializes and returns an instance of Editor.
@@ -12,8 +18,16 @@ import Layout from './layout';
  * @param {Object} post API entity for post to edit
  */
 export function createEditorInstance( id, post ) {
+	const store = createReduxStore();
+	store.dispatch( {
+		type: 'SET_HTML',
+		html: post.content.raw
+	} );
+
 	wp.element.render(
-		<Layout initialContent={ post.content.raw } />,
+		<Provider store={ store }>
+			<Layout />
+		</Provider>,
 		document.getElementById( id )
 	);
 }

editor/layout/index.js

@@ -1,48 +1,25 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
 /**
  * Internal dependencies
  */
 import Header from '../header';
 import TextEditor from '../modes/text-editor';
 import VisualEditor from '../modes/visual-editor';
 
-class Layout extends wp.element.Component {
-	constructor( props ) {
-		super( ...arguments );
-		this.switchMode = this.switchMode.bind( this );
-		this.state = {
-			mode: 'visual',
-			html: props.initialContent,
-			blocks: wp.blocks.parse( this.props.initialContent )
-		};
-	}
-
-	switchMode( newMode ) {
-		// TODO: we need a serializer from blocks here
-		const html = this.state.html;
-		const blocks = this.mode === 'visual' ? this.state.blocks : wp.blocks.parse( this.state.html );
-		this.setState( {
-			mode: newMode,
-			html,
-			blocks
-		} );
-	}
-
-	createChangeHandler( type ) {
-		return ( value ) => this.setState( { [ type ]: value } );
-	}
-
-	render() {
-		const { mode, html, blocks } = this.state;
-		return (
-			<div>
-				<Header
-					mode={ mode }
-					onSwitchMode={ this.switchMode } />
-				{ mode === 'text' && <TextEditor html={ html } onChange={ this.createChangeHandler( 'html' ) } /> }
-				{ mode === 'visual' && <VisualEditor blocks={ blocks } onChange={ this.createChangeHandler( 'blocks' ) } /> }
-			</div>
-		);
-	}
+function Layout( { mode } ) {
+	return (
+		<div>
+			<Header />
+			{ mode === 'text' && <TextEditor /> }
+			{ mode === 'visual' && <VisualEditor /> }
+		</div>
+	);
 }
 
-export default Layout;
+export default connect( ( state ) => ( {
+	mode: state.mode
+} ) )( Layout );

editor/modes/text-editor/index.js

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { connect } from 'react-redux';
 import Textarea from 'react-textarea-autosize';
 
 function TextEditor( { html, onChange } ) {
@@ -18,4 +19,16 @@ function TextEditor( { html, onChange } ) {
 	);
 }
 
-export default TextEditor;
+export default connect(
+	( state ) => ( {
+		html: state.html
+	} ),
+	( dispatch ) => ( {
+		onChange( value ) {
+			dispatch( {
+				type: 'SET_HTML',
+				html: value
+			} );
+		}
+	} )
+)( TextEditor );

editor/modes/visual-editor/block.js

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+function VisualEditorBlock( { block, onChange } ) {
+	const settings = wp.blocks.getBlockSettings( block.blockType );
+
+	let BlockEdit;
+	if ( settings ) {
+		BlockEdit = settings.edit || settings.save;
+	}
+
+	if ( ! BlockEdit ) {
+		return null;
+	}
+
+	function onAttributesChange( attributes ) {
+		onChange( {
+			attributes: {
+				...block.attributes,
+				...attributes
+			}
+		} );
+	}
+
+	return (
+		<BlockEdit
+			attributes={ block.attributes }
+			onChange={ onAttributesChange } />
+	);
+}
+
+export default connect(
+	( state, ownProps ) => ( {
+		block: state.blocks.byUid[ ownProps.uid ]
+	} ),
+	( dispatch, ownProps ) => ( {
+		onChange( updates ) {
+			dispatch( {
+				type: 'UPDATE_BLOCK',
+				uid: ownProps.uid,
+				updates
+			} );
+		}
+	} )
+)( VisualEditorBlock );

editor/modes/visual-editor/index.js

@@ -1,46 +1,25 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
 /**
  * Internal dependencies
  */
 import InserterButton from '../../inserter/button';
+import VisualEditorBlock from './block';
 
-function VisualEditor( { blocks, onChange } ) {
-	const onChangeBlock = ( index ) => ( changes ) => {
-		const newBlock = {
-			...blocks[ index ],
-			changes
-		};
-
-		onChange( [
-			...blocks.slice( 0, index ),
-			newBlock,
-			...blocks.slice( index + 1 )
-		] );
-	};
-
+function VisualEditor( { blocks } ) {
 	return (
 		<div className="editor-visual-editor">
-			{ blocks.map( ( block, index ) => {
-				const settings = wp.blocks.getBlockSettings( block.blockType );
-
-				let BlockEdit;
-				if ( settings ) {
-					BlockEdit = settings.edit || settings.save;
-				}
-
-				if ( ! BlockEdit ) {
-					return;
-				}
-
-				return (
-					<BlockEdit
-						key={ index }
-						attributes={ block.attributes }
-						onChange={ onChangeBlock( index ) } />
-				);
-			} ) }
+			{ blocks.map( ( uid ) => (
+				<VisualEditorBlock key={ uid } uid={ uid } />
+			) ) }
 			<InserterButton />
 		</div>
 	);
 }
 
-export default VisualEditor;
+export default connect( ( state ) => ( {
+	blocks: state.blocks.order
+} ) )( VisualEditor );