Convert a Classic Block into Multiple Blocks

blocks/api/index.js

@@ -6,7 +6,7 @@ import * as source from './source';
 export { source };
 export { createBlock, switchToBlockType } from './factory';
 export { default as parse, getSourcedAttributes } from './parser';
-export { default as pasteHandler } from './paste';
+export { default as rawHandler } from './raw-handling';
 export { default as serialize, getBlockDefaultClassname, getBlockContent } from './serializer';
 export { isValidBlock } from './validation';
 export { getCategories } from './categories';

blocks/api/paste/index.js → blocks/api/raw-handling/index.js

@@ -24,7 +24,15 @@ import inlineContentConverter from './inline-content-converter';
 import { deepFilterHTML, isInvalidInline, isNotWhitelisted, isPlain, isInline } from './utils';
 import showdown from 'showdown';
 
-export default function( { HTML, plainText, inline } ) {
+/**
+ * Converts an HTML string to known blocks. Strips everything else.
+ *
+ * @param  {String}       options.HTML        The HTML to convert.
+ * @param  {String}       [options.plainText] Plain text version.
+ * @param  {Boolean}      [options.inline]    Whether to content should be inline or not. Null to auto-detect, false to force blocks, true to force a string.
+ * @return {Array|String}                     A list of blocks or a string, depending on the `inline` option.
+ */
+export default function rawHandler( { HTML, plainText = '', inline = null } ) {
 	HTML = HTML.replace( /<meta[^>]+>/, '' );
 
 	// Block delimiters detected.
@@ -60,7 +68,7 @@ export default function( { HTML, plainText, inline } ) {
 	] );
 
 	// Inline paste.
-	if ( inline || isInlineContent( HTML ) ) {
+	if ( inline || ( inline === null && isInlineContent( HTML ) ) ) {
 		// Allows us to ask for this information when we get a report.
 		window.console.log( 'Processed inline HTML:\n\n', HTML );
 

blocks/api/paste/readme.md → blocks/api/raw-handling/readme.md

@@ -1,4 +1,4 @@
-# Paste
+# Raw Handling (Paste)
 
 This folder contains all paste specific logic (filters, converters, normalisers...). Each module is tested on their own, and in addition we have some integration tests for frequently used editors.
 

blocks/api/paste/test/index.js → blocks/api/raw-handling/test/index.js

@@ -6,12 +6,12 @@ import { equal, deepEqual } from 'assert';
 /**
  * Internal dependencies
  */
-import paste from '../index';
+import rawHandler from '../index';
 import { registerBlockType, unregisterBlockType, setUnknownTypeHandlerName } from '../../registration';
 import { createBlock } from '../../factory';
 import { children, prop } from '../../source';
 
-describe( 'paste', () => {
+describe( 'rawHandler', () => {
 	beforeAll( () => {
 		registerBlockType( 'test/figure', {
 			category: 'common',
@@ -54,29 +54,38 @@ describe( 'paste', () => {
 		setUnknownTypeHandlerName( undefined );
 	} );
 
-	it( 'should convert recognised pasted content', () => {
-		const pastedBlock = paste( { HTML: '<figure>test</figure>' } )[ 0 ];
-		const block = createBlock( 'test/figure', { content: [ 'test' ] } );
+	it( 'should convert recognised raw content', () => {
+		const block = rawHandler( { HTML: '<figure>test</figure>' } )[ 0 ];
+		const { name, attributes } = createBlock( 'test/figure', { content: [ 'test' ] } );
 
-		equal( pastedBlock.name, block.name );
-		deepEqual( pastedBlock.attributes, block.attributes );
+		equal( block.name, name );
+		deepEqual( block.attributes, attributes );
 	} );
 
-	it( 'should handle unknown pasted content', () => {
-		const pastedBlock = paste( { HTML: '<figcaption>test</figcaption>' } )[ 0 ];
+	it( 'should handle unknown raw content', () => {
+		const block = rawHandler( { HTML: '<figcaption>test</figcaption>' } )[ 0 ];
 
-		equal( pastedBlock.name, 'test/unknown' );
-		equal( pastedBlock.attributes.content, '<figcaption>test</figcaption>' );
+		equal( block.name, 'test/unknown' );
+		equal( block.attributes.content, '<figcaption>test</figcaption>' );
 	} );
 
 	it( 'should filter inline content', () => {
-		const filtered = paste( {
+		const filtered = rawHandler( {
 			HTML: '<h2><em>test</em></h2>',
 			inline: true,
 		} );
 
 		equal( filtered, '<em>test</em>' );
 	} );
+
+	it( 'should always return blocks', () => {
+		const blocks = rawHandler( {
+			HTML: 'test',
+			inline: false,
+		} );
+
+		equal( Array.isArray( blocks ), true );
+	} );
 } );
 
 import './integration';

blocks/api/paste/test/integration/index.js → blocks/api/raw-handling/test/integration/index.js

@@ -9,7 +9,7 @@ import path from 'path';
  * Internal dependencies
  */
 import '../../../../library';
-import paste from '../../index';
+import rawHandler from '../../index';
 import serialize from '../../../serializer';
 
 const types = [
@@ -20,13 +20,13 @@ const types = [
 	'ms-word-online',
 ];
 
-describe( 'paste: integration', () => {
+describe( 'raw handling: integration', () => {
 	types.forEach( ( type ) => {
 		it( type, () => {
 			const input = fs.readFileSync( path.join( __dirname, `${ type }-in.html` ), 'utf8' ).trim();
 			const output = fs.readFileSync( path.join( __dirname, `${ type }-out.html` ), 'utf8' ).trim();
-			const pasted = paste( { HTML: input } );
-			const serialized = typeof pasted === 'string' ? pasted : serialize( pasted );
+			const converted = rawHandler( { HTML: input } );
+			const serialized = typeof converted === 'string' ? converted : serialize( converted );
 
 			equal( output, serialized );
 		} );

blocks/editable/index.js

@@ -28,7 +28,7 @@ import { keycodes } from '@wordpress/utils';
  * Internal dependencies
  */
 import './style.scss';
-import { pasteHandler } from '../api';
+import { rawHandler } from '../api';
 import FormatToolbar from './format-toolbar';
 import TinyMCE from './tinymce';
 import { pickAriaProps } from './aria';
@@ -248,7 +248,7 @@ export default class Editable extends Component {
 		window.console.log( 'Received HTML:\n\n', event.content );
 		window.console.log( 'Received plain text:\n\n', this.pastedPlainText );
 
-		const content = pasteHandler( {
+		const content = rawHandler( {
 			HTML: event.content,
 			plainText: this.pastedPlainText,
 			inline: ! this.props.onSplit,

editor/block-settings-menu/index.js

@@ -18,6 +18,7 @@ import BlockInspectorButton from './block-inspector-button';
 import BlockModeToggle from './block-mode-toggle';
 import BlockDeleteButton from './block-delete-button';
 import { selectBlock } from '../actions';
+import UnknownConverter from './unknown-converter';
 
 function BlockSettingsMenu( { uids, onSelect } ) {
 	const count = uids.length;
@@ -50,6 +51,7 @@ function BlockSettingsMenu( { uids, onSelect } ) {
 				<div className="editor-block-settings-menu__content">
 					<BlockInspectorButton onClick={ onClose } />
 					{ count === 1 && <BlockModeToggle uid={ uids[ 0 ] } onToggle={ onClose } /> }
+					{ count === 1 && <UnknownConverter uid={ uids[ 0 ] } /> }
 					<BlockDeleteButton uids={ uids } />
 				</div>
 			) }

editor/block-settings-menu/unknown-converter.js

@@ -0,0 +1,50 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { IconButton } from '@wordpress/components';
+import { getUnknownTypeHandlerName, rawHandler, serialize } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { getBlock } from '../selectors';
+import { replaceBlocks } from '../actions';
+
+export function UnknownConverter( { block, convertToBlocks, small } ) {
+	if ( ! block || getUnknownTypeHandlerName() !== block.name ) {
+		return null;
+	}
+
+	const label = __( 'Convert to blocks' );
+
+	return (
+		<IconButton
+			className="editor-block-settings-menu__control"
+			onClick={ () => convertToBlocks( block ) }
+			icon="screenoptions"
+			label={ small ? label : undefined }
+		>
+			{ ! small && label }
+		</IconButton>
+	);
+}
+
+export default connect(
+	( state, { uid } ) => ( {
+		block: getBlock( state, uid ),
+	} ),
+	( dispatch, { uid } ) => ( {
+		convertToBlocks( block ) {
+			dispatch( replaceBlocks( uid, rawHandler( {
+				HTML: serialize( block ),
+				inline: false,
+			} ) ) );
+		},
+	} )
+)( UnknownConverter );

editor/block-toolbar/index.js

@@ -22,6 +22,7 @@ import BlockInspectorButton from '../block-settings-menu/block-inspector-button'
 import BlockModeToggle from '../block-settings-menu/block-mode-toggle';
 import BlockDeleteButton from '../block-settings-menu/block-delete-button';
 import { getBlockMode, getSelectedBlock } from '../selectors';
+import UnknownConverter from '../block-settings-menu/unknown-converter';
 
 class BlockToolbar extends Component {
 	constructor() {
@@ -77,6 +78,7 @@ class BlockToolbar extends Component {
 							<BlockMover uids={ [ block.uid ] } />
 							<BlockInspectorButton small />
 							<BlockModeToggle uid={ block.uid } small />
+							<UnknownConverter uid={ block.uid } small />
 							<BlockDeleteButton uids={ [ block.uid ] } small />
 						</div>
 					}