From 38c8d7957c199706df6570ee93ea28f95385ee65 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 27 Sep 2017 09:39:57 +0100
Subject: [PATCH] Block HTML Mode: Validate the block when changing its content

---
 blocks/api/index.js                      |  1 +
 editor/actions.js                        | 18 +++++++++++++++++-
 editor/modes/visual-editor/block-html.js | 15 +++++++++------
 editor/reducer.js                        | 14 ++++++++++++++
 4 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/blocks/api/index.js b/blocks/api/index.js
index ca8e4e1aa0cc1..f9a45baca2754 100644
--- a/blocks/api/index.js
+++ b/blocks/api/index.js
@@ -8,6 +8,7 @@ export { createBlock, switchToBlockType } from './factory';
 export { default as parse, getSourcedAttributes } from './parser';
 export { default as pasteHandler } from './paste';
 export { default as serialize, getBlockDefaultClassname, getBlockContent } from './serializer';
+export { isValidBlock } from './validation';
 export { getCategories } from './categories';
 export {
 	registerBlockType,
diff --git a/editor/actions.js b/editor/actions.js
index 54b3a1040a1e1..7dfd4af0945f5 100644
--- a/editor/actions.js
+++ b/editor/actions.js
@@ -62,7 +62,7 @@ export function resetBlocks( blocks ) {
 }
 
 /**
- * Returns an action object used in signalling that the block with the
+ * Returns an action object used in signalling that the block attributes with the
  * specified UID has been updated.
  *
  * @param  {String} uid        Block UID
@@ -77,6 +77,22 @@ export function updateBlockAttributes( uid, attributes ) {
 	};
 }
 
+/**
+ * Returns an action object used in signalling that the block with the
+ * specified UID has been updated.
+ *
+ * @param  {String} uid        Block UID
+ * @param  {Object} updates    Block attributes to be merged
+ * @return {Object}            Action object
+ */
+export function updateBlock( uid, updates ) {
+	return {
+		type: 'UPDATE_BLOCK',
+		uid,
+		updates,
+	};
+}
+
 export function focusBlock( uid, config ) {
 	return {
 		type: 'UPDATE_FOCUS',
diff --git a/editor/modes/visual-editor/block-html.js b/editor/modes/visual-editor/block-html.js
index 6dd0c007d26af..3404f0e3d92d8 100644
--- a/editor/modes/visual-editor/block-html.js
+++ b/editor/modes/visual-editor/block-html.js
@@ -3,7 +3,7 @@
  */
 import { isEqual } from 'lodash';
 import { Component } from '@wordpress/element';
-import { getBlockContent, getSourcedAttributes, getBlockType } from '@wordpress/blocks';
+import { getBlockContent, getSourcedAttributes, getBlockType, isValidBlock } from '@wordpress/blocks';
 
 /**
  * External Dependencies
@@ -14,7 +14,7 @@ import TextareaAutosize from 'react-autosize-textarea';
 /**
  * Internal Dependencies
  */
-import { updateBlockAttributes } from '../../actions';
+import { updateBlock } from '../../actions';
 import { getBlock } from '../../selectors';
 
 class BlockHTML extends Component {
@@ -23,13 +23,14 @@ class BlockHTML extends Component {
 		this.onChange = this.onChange.bind( this );
 		this.onBlur = this.onBlur.bind( this );
 		this.state = {
-			html: getBlockContent( props.block ),
+			html: props.block.isValid ? getBlockContent( props.block ) : props.block.originalContent,
 			attributes: props.block.attributes,
 		};
 	}
 
 	componentWillReceiveProps( nextProps ) {
 		if ( ! isEqual( nextProps.block.attributes, this.state.attributes ) ) {
+			console.log( nextProps.block.attributes, this.state.attributes );
 			this.setState( {
 				html: getBlockContent( nextProps.block ),
 			} );
@@ -39,8 +40,10 @@ class BlockHTML extends Component {
 	onBlur() {
 		const blockType = getBlockType( this.props.block.name );
 		const attributes = getSourcedAttributes( this.state.html, blockType.attributes );
+		const isValid = isValidBlock( this.state.html, blockType, { ...this.props.block.attributes, attributes } );
+		console.log( 'isvalid', isValid );
 		this.setState( { attributes } );
-		this.props.onChange( this.props.uid, attributes );
+		this.props.onChange( this.props.uid, attributes, this.state.html, isValid );
 	}
 
 	onChange( event ) {
@@ -62,8 +65,8 @@ export default connect(
 		block: getBlock( state, ownProps.uid ),
 	} ),
 	{
-		onChange( uid, attributes ) {
-			return updateBlockAttributes( uid, attributes );
+		onChange( uid, attributes, originalContent, isValid ) {
+			return updateBlock( uid, { attributes, originalContent, isValid } );
 		},
 	}
 )( BlockHTML );
diff --git a/editor/reducer.js b/editor/reducer.js
index 6ac5ecf39d194..8a12ef367115e 100644
--- a/editor/reducer.js
+++ b/editor/reducer.js
@@ -138,6 +138,20 @@ export const editor = combineUndoableReducers( {
 					},
 				};
 
+			case 'UPDATE_BLOCK':
+			// Ignore updates if block isn't known
+				if ( ! state[ action.uid ] ) {
+					return state;
+				}
+
+				return {
+					...state,
+					[ action.uid ]: {
+						...state[ action.uid ],
+						...action.updates,
+					},
+				};
+
 			case 'INSERT_BLOCKS':
 				return {
 					...state,