Add quote↔text block switching; add block switcher validation

blocks/api/factory.js

@@ -29,7 +29,7 @@ export function createBlock( blockType, attributes = {} ) {
  *
  * @param  {Object} block      Block object
  * @param  {string} blockType  BlockType
- * @return {Object?}           Block object
+ * @return {?Object|Error}     Block object, null, or error with failure message
  */
 export function switchToBlockType( block, blockType ) {
 	// Find the right transformation by giving priority to the "to" transformation
@@ -45,9 +45,15 @@ export function switchToBlockType( block, blockType ) {
 		return null;
 	}
 
+	const attributes = transformation.transform( block.attributes );
+	if ( attributes instanceof Error ) {
+		// Blocks can perform validation and cancel transformations if needed.
+		return attributes;
+	}
+
 	return Object.assign( {
 		uid: block.uid,
-		attributes: transformation.transform( block.attributes ),
-		blockType
+		attributes,
+		blockType,
 	} );
 }

blocks/api/test/factory.js

@@ -32,7 +32,7 @@ describe( 'block factory', () => {
 	} );
 
 	describe( 'switchBlockType()', () => {
-		it( 'should switch the blockType of a block using the "transform form"', () => {
+		it( 'should switch the blockType of a block using the "transform from"', () => {
 			registerBlock( 'core/updated-text-block', {
 				transforms: {
 					from: [ {
@@ -116,5 +116,30 @@ describe( 'block factory', () => {
 
 			expect( updateBlock ).to.be.null();
 		} );
+
+		it( 'should allow blocks to abort a transformation', () => {
+			registerBlock( 'core/updated-text-block', {} );
+			registerBlock( 'core/text-block', {
+				transforms: {
+					to: [ {
+						blocks: [ 'core/updated-text-block' ],
+						transform: () => new Error( 'no soup for you' ),
+					} ]
+				}
+			} );
+
+			const block = {
+				uid: 1,
+				blockType: 'core/text-block',
+				attributes: {
+					value: 'ribs'
+				}
+			};
+
+			const updateBlock = switchToBlockType( block, 'core/updated-text-block' );
+
+			expect( updateBlock ).to.be.an.instanceof( Error );
+			expect( updateBlock.message ).to.eql( 'no soup for you' );
+		} );
 	} );
 } );

blocks/library/heading/index.js

@@ -31,47 +31,27 @@ registerBlock( 'core/heading', {
 		} ) )
 	],
 
-	edit( { attributes, setAttributes } ) {
-		const { content, tag, align } = attributes;
-
-		return (
-			<Editable
-				tagName={ tag }
-				value={ content }
-				onChange={ ( value ) => setAttributes( { content: value } ) }
-				style={ align ? { textAlign: align } : null }
-			/>
-		);
-	},
-
-	save( { attributes } ) {
-		const { align, tag: Tag, content } = attributes;
-
-		return (
-			<Tag
-				style={ align ? { textAlign: align } : null }
-				dangerouslySetInnerHTML={ { __html: content } } />
-		);
-	},
-
 	transforms: {
 		from: [
 			{
 				type: 'block',
 				blocks: [ 'core/text' ],
 				transform: ( { content, align } ) => {
 					if ( Array.isArray( content ) ) {
-						// TODO this appears to always be true?
-						// TODO reject the switch if more than one paragraph
+						if ( content.length > 1 ) {
+							return new Error(
+								'Block has more than one paragraph.'
+							);
+						}
 						content = content[ 0 ];
 					}
 					return {
 						tag: 'H2',
 						content,
-						align
+						align,
 					};
-				}
-			}
+				},
+			},
 		],
 		to: [
 			{
@@ -80,10 +60,33 @@ registerBlock( 'core/heading', {
 				transform: ( { content, align } ) => {
 					return {
 						content: [ content ],
-						align
+						align,
 					};
-				}
-			}
+				},
+			},
 		]
-	}
+	},
+
+	edit( { attributes, setAttributes } ) {
+		const { content, tag, align } = attributes;
+
+		return (
+			<Editable
+				tagName={ tag }
+				value={ content }
+				onChange={ ( value ) => setAttributes( { content: value } ) }
+				style={ align ? { textAlign: align } : null }
+			/>
+		);
+	},
+
+	save( { attributes } ) {
+		const { align, tag: Tag, content } = attributes;
+
+		return (
+			<Tag
+				style={ align ? { textAlign: align } : null }
+				dangerouslySetInnerHTML={ { __html: content } } />
+		);
+	},
 } );

blocks/library/quote/index.js

@@ -16,20 +16,48 @@ registerBlock( 'core/quote', {
 	category: 'common',
 
 	attributes: {
-		value: query( 'blockquote > p', html() ),
+		content: query( 'blockquote > p', html() ),
 		citation: html( 'footer' )
 	},
 
+	transforms: {
+		from: [
+			{
+				type: 'block',
+				blocks: [ 'core/text' ],
+				transform: ( { content } ) => {
+					return {
+						content,
+					};
+				},
+			},
+		],
+		to: [
+			{
+				type: 'block',
+				blocks: [ 'core/text' ],
+				transform: ( { content, citation } ) => {
+					if ( citation ) {
+						content = ( content || [] ).concat( citation );
+					}
+					return {
+						content,
+					};
+				},
+			},
+		],
+	},
+
 	edit( { attributes, setAttributes } ) {
-		const { value, citation } = attributes;
+		const { content, citation } = attributes;
 
 		return (
 			<blockquote className="blocks-quote">
 				<Editable
-					value={ fromValueToParagraphs( value ) }
+					value={ fromValueToParagraphs( content ) }
 					onChange={
 						( paragraphs ) => setAttributes( {
-							value: fromParagraphsToValue( paragraphs )
+							content: fromParagraphsToValue( paragraphs )
 						} )
 					} />
 				<footer>
@@ -46,11 +74,11 @@ registerBlock( 'core/quote', {
 	},
 
 	save( attributes ) {
-		const { value, citation } = attributes;
+		const { content, citation } = attributes;
 
 		return (
 			<blockquote>
-				{ value && value.map( ( paragraph, i ) => (
+				{ content && content.map( ( paragraph, i ) => (
 					<p
 						key={ i }
 						dangerouslySetInnerHTML={ {

editor/components/block-switcher/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import { uniq, get, reduce } from 'lodash';
+import { uniq, get, reduce, noop } from 'lodash';
 
 /**
  * Internal dependencies
@@ -35,18 +35,26 @@ class BlockSwitcher extends wp.element.Component {
 	}
 
 	render() {
-		const blockSettings = wp.blocks.getBlockSettings( this.props.block.blockType );
-		const blocksToBeTransformedFrom = reduce( wp.blocks.getBlocks(), ( memo, block ) => {
-			const transformFrom = get( block, 'transforms.from', [] );
-			const transformation = transformFrom.find( t => t.blocks.indexOf( this.props.block.blockType ) !== -1 );
-			return transformation ? memo.concat( [ block.slug ] ) : memo;
-		}, [] );
+		const { block } = this.props;
+
+		const blockSettings = wp.blocks.getBlockSettings( block.blockType );
+		const blocksToBeTransformedFrom = reduce(
+			wp.blocks.getBlocks(),
+			( memo, candidateBlock ) => {
+				const transformFrom = get( candidateBlock, 'transforms.from', [] );
+				const transformation = transformFrom.find(
+					t => t.blocks.indexOf( block.blockType ) !== -1
+				);
+				return transformation ? memo.concat( [ candidateBlock.slug ] ) : memo;
+			},
+			[]
+		);
 		const blocksToBeTransformedTo = get( blockSettings, 'transforms.to', [] )
 			.reduce( ( memo, transformation ) => memo.concat( transformation.blocks ), [] );
 		const allowedBlocks = uniq( blocksToBeTransformedFrom.concat( blocksToBeTransformedTo ) )
 			.reduce( ( memo, blockType ) => {
-				const block = wp.blocks.getBlockSettings( blockType );
-				return !! block ? memo.concat( block ) : memo;
+				const settings = wp.blocks.getBlockSettings( blockType );
+				return !! settings ? memo.concat( settings ) : memo;
 			}, [] );
 
 		if ( ! allowedBlocks.length ) {
@@ -65,21 +73,36 @@ class BlockSwitcher extends wp.element.Component {
 				{ this.state.open &&
 					<div className="editor-block-switcher__menu">
 						<div className="editor-block-switcher__menu-arrow" />
-						{ allowedBlocks.map( ( { slug, title, icon } ) => (
-							<IconButton
-								key={ slug }
-								onClick={ this.switchBlockType( slug ) }
-								className="editor-block-switcher__menu-item"
-								icon={ icon }
-							>
-								{ title }
-							</IconButton>
-						) ) }
+						{ allowedBlocks.map(
+							newBlock => this.renderAllowedBlock( block, newBlock )
+						) }
 					</div>
 				}
 			</div>
 		);
 	}
+
+	renderAllowedBlock( currentBlock, newBlockSettings ) {
+		const newBlockAttributes = wp.blocks.switchToBlockType(
+			currentBlock,
+			newBlockSettings.slug
+		);
+		const disabled = ( newBlockAttributes instanceof Error );
+		const disabledMessage = disabled ? newBlockAttributes.message : null;
+		const { slug, title, icon } = newBlockSettings;
+		return (
+			<IconButton
+				key={ slug }
+				onClick={ disabled ? noop : this.switchBlockType( slug ) }
+				className="editor-block-switcher__menu-item"
+				icon={ icon }
+				disabled={ disabled }
+				tooltip={ disabledMessage }
+			>
+				{ title }
+			</IconButton>
+		);
+	}
 }
 
 export default connect(
@@ -88,10 +111,14 @@ export default connect(
 	} ),
 	( dispatch, ownProps ) => ( {
 		onTransform( block, blockType ) {
+			block = wp.blocks.switchToBlockType( block, blockType );
+			if ( block instanceof Error ) {
+				return;
+			}
 			dispatch( {
 				type: 'SWITCH_BLOCK_TYPE',
 				uid: ownProps.uid,
-				block: wp.blocks.switchToBlockType( block, blockType )
+				block,
 			} );
 		}
 	} )

editor/components/icon-button/index.js

@@ -10,11 +10,19 @@ import './style.scss';
 import Button from '../button';
 import Dashicon from '../dashicon';
 
-function IconButton( { icon, children, label, className, ...additionalProps } ) {
+function IconButton( {
+	icon, children, label, className, tooltip,
+	...additionalProps
+} ) {
 	const classes = classnames( 'editor-icon-button', className );
 
 	return (
-		<Button { ...additionalProps } aria-label={ label } className={ classes }>
+		<Button
+			{ ...additionalProps }
+			aria-label={ label }
+			className={ classes }
+			title={ tooltip }
+		>
 			<Dashicon icon={ icon } />
 			{ children }
 		</Button>