Block Editor: Simplify BlockHTMLConvertButton (#54972)

packages/block-editor/src/components/block-settings-menu/block-html-convert-button.js

@@ -1,30 +1,39 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
+import { MenuItem } from '@wordpress/components';
 import { rawHandler, getBlockContent } from '@wordpress/blocks';
-import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import BlockConvertButton from './block-convert-button';
 import { store as blockEditorStore } from '../../store';
 
-export default compose(
-	withSelect( ( select, { clientId } ) => {
-		const block = select( blockEditorStore ).getBlock( clientId );
+function BlockHTMLConvertButton( { clientId } ) {
+	const block = useSelect(
+		( select ) => select( blockEditorStore ).getBlock( clientId ),
+		[ clientId ]
+	);
+	const { replaceBlocks } = useDispatch( blockEditorStore );
 
-		return {
-			block,
-			shouldRender: block && block.name === 'core/html',
-		};
-	} ),
-	withDispatch( ( dispatch, { block } ) => ( {
-		onClick: () =>
-			dispatch( blockEditorStore ).replaceBlocks(
-				block.clientId,
-				rawHandler( { HTML: getBlockContent( block ) } )
-			),
-	} ) )
-)( BlockConvertButton );
+	if ( ! block || block.name !== 'core/html' ) {
+		return null;
+	}
+
+	return (
+		<MenuItem
+			onClick={ () =>
+				replaceBlocks(
+					clientId,
+					rawHandler( { HTML: getBlockContent( block ) } )
+				)
+			}
+		>
+			{ __( 'Convert to Blocks' ) }
+		</MenuItem>
+	);
+}
+
+export default BlockHTMLConvertButton;