Allow converting core/html block to blocks

editor/components/block-settings-menu/html-converter.js

@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { IconButton, withAPIData } from '@wordpress/components';
+import { rawHandler, getBlockContent } from '@wordpress/blocks';
+import { compose } from '@wordpress/element';
+import { withSelect, withDispatch } from '@wordpress/data';
+
+export function HTMLConverter( { block, onReplace, small, user, role } ) {
+	if ( ! block || block.name !== 'core/html' ) {
+		return null;
+	}
+
+	const label = __( 'Convert to blocks' );
+
+	const convertToBlocks = () => {
+		onReplace( block.uid, rawHandler( {
+			HTML: getBlockContent( block ),
+			mode: 'BLOCKS',
+			canUserUseUnfilteredHTML: get( user, [ 'data', 'capabilities', 'unfiltered_html' ], false ),
+		} ) );
+	};
+
+	return (
+		<IconButton
+			className="editor-block-settings-menu__control"
+			onClick={ convertToBlocks }
+			icon="screenoptions"
+			label={ small ? label : undefined }
+			role={ role }
+		>
+			{ ! small && label }
+		</IconButton>
+	);
+}
+
+export default compose(
+	withSelect( ( select, { uid } ) => {
+		const { getBlock, getCurrentPostType } = select( 'core/editor' );
+		return {
+			block: getBlock( uid ),
+			postType: getCurrentPostType(),
+		};
+	} ),
+	withDispatch( ( dispatch ) => ( {
+		onReplace: dispatch( 'core/editor' ).replaceBlocks,
+	} ) ),
+	withAPIData( ( { postType } ) => ( {
+		user: `/wp/v2/users/me?post_type=${ postType }&context=edit`,
+	} ) ),
+)( HTMLConverter );

editor/components/block-settings-menu/index.js

@@ -22,6 +22,7 @@ import BlockRemoveButton from './block-remove-button';
 import SharedBlockConvertButton from './shared-block-convert-button';
 import SharedBlockDeleteButton from './shared-block-delete-button';
 import UnknownConverter from './unknown-converter';
+import HTMLConverter from './html-converter';
 import _BlockSettingsMenuFirstItem from './block-settings-menu-first-item';
 
 export class BlockSettingsMenu extends Component {
@@ -95,6 +96,7 @@ export class BlockSettingsMenu extends Component {
 							<_BlockSettingsMenuFirstItem.Slot fillProps={ { onClose } } />
 							{ count === 1 && <BlockModeToggle uid={ firstBlockUID } onToggle={ onClose } role="menuitem" /> }
 							{ count === 1 && <UnknownConverter uid={ firstBlockUID } role="menuitem" /> }
+							{ count === 1 && <HTMLConverter uid={ firstBlockUID } role="menuitem" /> }
 							<BlockDuplicateButton uids={ uids } rootUID={ rootUID } role="menuitem" />
 							{ count === 1 && <SharedBlockConvertButton uid={ firstBlockUID } onToggle={ onClose } itemsRole="menuitem" /> }
 							<div className="editor-block-settings-menu__separator" />