Block warning: add comparison option

Use the block comparison component to show the difference between the invalid block options in a modal
WordPress · Aug 14, 2018 · f181dce · f181dce
1 parent 846712e
commit f181dce
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 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
@@ -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
@@ -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
@@ -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 );