Block HTML Mode: Validate the block when changing its content

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,

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',

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 );

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,