diff --git a/editor/components/block-settings-menu/html-converter.js b/editor/components/block-settings-menu/html-converter.js new file mode 100644 index 0000000000000..33f71cc01e597 --- /dev/null +++ b/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 ( + + { ! small && label } + + ); +} + +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 ); diff --git a/editor/components/block-settings-menu/index.js b/editor/components/block-settings-menu/index.js index e8fd0439e6b76..c69ecdf0e7f69 100644 --- a/editor/components/block-settings-menu/index.js +++ b/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 && } { count === 1 && } + { count === 1 && } { count === 1 && }