From f181dceb9433d2716bc995f09a0d15499b56b2e6 Mon Sep 17 00:00:00 2001
From: John Godley <johng75@gmail.com>
Date: Tue, 17 Jul 2018 09:19:40 +0100
Subject: [PATCH] Block warning: add comparison option

Use the block comparison component to show the difference between the invalid block options in a modal
---
 .../test/__snapshots__/block-view.js.snap     |   5 +-
 .../block-compare/test/block-view.js          |   6 -
 .../block-list/block-invalid-warning.js       | 117 +++++++++++++-----
 3 files changed, 86 insertions(+), 42 deletions(-)

diff --git a/packages/editor/src/components/block-compare/test/__snapshots__/block-view.js.snap b/packages/editor/src/components/block-compare/test/__snapshots__/block-view.js.snap
index c61afd5ef38ec..756de79a57d19 100644
--- a/packages/editor/src/components/block-compare/test/__snapshots__/block-view.js.snap
+++ b/packages/editor/src/components/block-compare/test/__snapshots__/block-view.js.snap
@@ -22,12 +22,13 @@ exports[`BlockView should match snapshot 1`] = `
   <div
     className="editor-block-compare__action"
   >
-    <Button
+    <[object Object]
       isLarge={true}
       onClick={[MockFunction]}
+      tabindex="0"
     >
       action
-    </Button>
+    </[object Object]>
   </div>
 </div>
 `;
diff --git a/packages/editor/src/components/block-compare/test/block-view.js b/packages/editor/src/components/block-compare/test/block-view.js
index 9362e8dc4fc3c..e017c74cf026a 100644
--- a/packages/editor/src/components/block-compare/test/block-view.js
+++ b/packages/editor/src/components/block-compare/test/block-view.js
@@ -19,10 +19,4 @@ describe( 'BlockView', () => {
 	test( 'should match snapshot', () => {
 		expect( wrapper ).toMatchSnapshot();
 	} );
-
-	test( 'should call onAction when button is pressed', () => {
-		wrapper.find( 'Button' ).simulate( 'click' );
-
-		expect( onAction ).toHaveBeenCalledTimes( 1 );
-	} );
 } );
diff --git a/packages/editor/src/components/block-list/block-invalid-warning.js b/packages/editor/src/components/block-list/block-invalid-warning.js
index b42e0a896e96c..f5fa6e62f4ef6 100644
--- a/packages/editor/src/components/block-list/block-invalid-warning.js
+++ b/packages/editor/src/components/block-list/block-invalid-warning.js
@@ -2,7 +2,8 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import { Button, Modal } from '@wordpress/components';
+import { Component } from '@wordpress/element';
 import {
 	getBlockType,
 	createBlock,
@@ -14,50 +15,98 @@ import { withDispatch } from '@wordpress/data';
  * Internal dependencies
  */
 import Warning from '../warning';
+import BlockCompare from '../block-compare';
 
-function BlockInvalidWarning( { convertToHTML, convertToBlocks, convertToClassic } ) {
-	const hasHTMLBlock = !! getBlockType( 'core/html' );
-
-	return (
-		<Warning
-			primaryActions={ [
-				<Button key="convert" onClick={ convertToBlocks } isLarge isPrimary={ ! hasHTMLBlock }>
-					{ __( 'Convert to Blocks' ) }
-				</Button>,
-				hasHTMLBlock && (
-					<Button key="edit" onClick={ convertToHTML } isLarge isPrimary>
-						{ __( 'Keep as HTML' ) }
-					</Button>
-				),
-			] }
-			hiddenActions={ [
-				{ title: __( 'Convert to Blocks' ), onClick: convertToBlocks },
-				{ title: __( 'Convert to Classic Block' ), onClick: convertToClassic },
-			] }
-		>
-			{ __( 'This block has been modified externally.' ) }
-		</Warning>
-	);
+export class BlockInvalidWarning extends Component {
+	constructor( props ) {
+		super( props );
+
+		this.state = { compare: false };
+		this.onCompare = this.onCompare.bind( this );
+		this.onCompareClose = this.onCompareClose.bind( this );
+	}
+
+	onCompare() {
+		this.setState( { compare: true } );
+	}
+
+	onCompareClose() {
+		this.setState( { compare: false } );
+	}
+
+	render() {
+		const { convertToHTML, convertToBlocks, convertToClassic, block } = this.props;
+		const hasHTMLBlock = !! getBlockType( 'core/html' );
+		const { compare } = this.state;
+		const hiddenActions = [
+			{ title: __( 'Convert to Blocks' ), onClick: convertToBlocks },
+			{ title: __( 'Convert to Classic Block' ), onClick: convertToClassic },
+			{ title: __( 'Compare conversion' ), onClick: this.onCompare },
+		];
+
+		if ( compare ) {
+			return (
+				<Modal
+					title={ __( 'Compare Block Conversion' ) }
+					onRequestClose={ this.onCompareClose }
+					className="editor-block-compare"
+					focusOnMount={ false }
+					shouldCloseOnClickOutside={ false }
+				>
+					<BlockCompare
+						block={ block }
+						onKeep={ convertToHTML }
+						onConvert={ convertToBlocks }
+						convertor={ blockToBlocks }
+						convertorText={ __( 'Convert to Blocks' ) }
+					/>
+				</Modal>
+			);
+		}
+
+		return (
+			<Warning
+				primaryActions={ [
+					<Button key="convert" onClick={ convertToBlocks } isLarge isPrimary={ ! hasHTMLBlock }>
+						{ __( 'Convert to Blocks' ) }
+					</Button>,
+					hasHTMLBlock && (
+						<Button key="edit" onClick={ convertToHTML } isLarge isPrimary>
+							{ __( 'Keep as HTML' ) }
+						</Button>
+					),
+				] }
+				hiddenActions={ hiddenActions }
+			>
+				{ __( 'This block has been modified externally.' ) }
+			</Warning>
+		);
+	}
 }
 
+const blockToClassic = ( block ) => createBlock( 'core/freeform', {
+	content: block.originalContent,
+} );
+const blockToHTML = ( block ) => createBlock( 'core/html', {
+	content: block.originalContent,
+} );
+const blockToBlocks = ( block ) => rawHandler( {
+	HTML: block.originalContent,
+	mode: 'BLOCKS',
+} );
+
 export default withDispatch( ( dispatch, { block } ) => {
 	const { replaceBlock } = dispatch( 'core/editor' );
+
 	return {
 		convertToClassic() {
-			replaceBlock( block.uid, createBlock( 'core/freeform', {
-				content: block.originalContent,
-			} ) );
+			replaceBlock( block.clientId, blockToClassic( block ) );
 		},
 		convertToHTML() {
-			replaceBlock( block.clientId, createBlock( 'core/html', {
-				content: block.originalContent,
-			} ) );
+			replaceBlock( block.clientId, blockToHTML( block ) );
 		},
 		convertToBlocks() {
-			replaceBlock( block.clientId, rawHandler( {
-				HTML: block.originalContent,
-				mode: 'BLOCKS',
-			} ) );
+			replaceBlock( block.clientId, blockToBlocks( block ) );
 		},
 	};
 } )( BlockInvalidWarning );