Fix block compare

WordPress · May 18, 2021 · 141c282 · 141c282
1 parent 4630701
commit 141c282
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 25 deletions.
diff --git a/packages/block-editor/src/components/block-compare/block-view.js b/packages/block-editor/src/components/block-compare/block-view.js
@@ -2,15 +2,17 @@
  * WordPress dependencies
  */
 import { Button } from '@wordpress/components';
+import { RawHTML } from '@wordpress/element';
+import { safeHTML } from '@wordpress/dom';
 
-const BlockView = ( {
+export default function BlockView( {
 	title,
 	rawContent,
 	renderedContent,
 	action,
 	actionText,
 	className,
-} ) => {
+} ) {
 	return (
 		<div className={ className }>
 			<div className="block-editor-block-compare__content">
@@ -23,7 +25,7 @@ const BlockView = ( {
 				</div>
 
 				<div className="block-editor-block-compare__preview edit-post-visual-editor">
-					{ renderedContent }
+					<RawHTML>{ safeHTML( renderedContent ) }</RawHTML>
 				</div>
 			</div>
 
@@ -34,6 +36,4 @@ const BlockView = ( {
 			</div>
 		</div>
 	);
-};
-
-export default BlockView;
+}
diff --git a/packages/block-editor/src/components/block-compare/index.js b/packages/block-editor/src/components/block-compare/index.js
@@ -11,7 +11,7 @@ import { diffChars } from 'diff/lib/diff/character';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { getSaveContent, getSaveElement } from '@wordpress/blocks';
+import { getSaveContent } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -50,25 +50,12 @@ function BlockCompare( {
 		const newContent = newBlocks.map( ( item ) =>
 			getSaveContent( item.name, item.attributes, item.innerBlocks )
 		);
-		const renderedContent = newBlocks.map( ( item ) =>
-			getSaveElement( item.name, item.attributes, item.innerBlocks )
-		);
 
-		return {
-			rawContent: newContent.join( '' ),
-			renderedContent,
-		};
+		return newContent.join( '' );
 	}
 
-	const original = {
-		rawContent: block.originalContent,
-		renderedContent: getSaveElement( block.name, block.attributes ),
-	};
 	const converted = getConvertedContent( convertor( block ) );
-	const difference = getDifference(
-		original.rawContent,
-		converted.rawContent
-	);
+	const difference = getDifference( block.originalContent, converted );
 
 	return (
 		<div className="block-editor-block-compare__wrapper">
@@ -77,8 +64,8 @@ function BlockCompare( {
 				className="block-editor-block-compare__current"
 				action={ onKeep }
 				actionText={ __( 'Convert to HTML' ) }
-				rawContent={ original.rawContent }
-				renderedContent={ original.renderedContent }
+				rawContent={ block.originalContent }
+				renderedContent={ block.originalContent }
 			/>
 
 			<BlockView
@@ -87,7 +74,7 @@ function BlockCompare( {
 				action={ onConvert }
 				actionText={ convertButtonText }
 				rawContent={ difference }
-				renderedContent={ converted.renderedContent }
+				renderedContent={ converted }
 			/>
 		</div>
 	);