List Block: Implement block switcher API

blocks/library/list/index.js

@@ -1,8 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { switchChildrenNodeName } from 'element';
+
 /**
  * Internal dependencies
  */
 import './style.scss';
-import { registerBlock, query as hpq } from '../../api';
+import { registerBlock, query as hpq, createBlock } from '../../api';
 import Editable from '../../editable';
 
 const { children, prop } = hpq;
@@ -36,6 +41,32 @@ registerBlock( 'core/list', {
 		}
 	],
 
+	transforms: {
+		from: [
+			{
+				type: 'block',
+				blocks: [ 'core/text' ],
+				transform: ( { content } ) => {
+					return createBlock( 'core/list', {
+						nodeName: 'ul',
+						values: switchChildrenNodeName( content, 'li' )
+					} );
+				}
+			}
+		],
+		to: [
+			{
+				type: 'block',
+				blocks: [ 'core/text' ],
+				transform: ( { values } ) => {
+					return createBlock( 'core/text', {
+						content: switchChildrenNodeName( values, 'p' )
+					} );
+				}
+			}
+		]
+	},
+
 	edit( { attributes, setAttributes, focus, setFocus } ) {
 		const { nodeName = 'OL', values = [] } = attributes;
 		return (

blocks/library/quote/index.js

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { switchChildrenNodeName } from 'element';
+
 /**
  * Internal dependencies
  */
@@ -38,6 +43,15 @@ registerBlock( 'core/quote', {
 					} );
 				}
 			},
+			{
+				type: 'block',
+				blocks: [ 'core/list' ],
+				transform: ( { values } ) => {
+					return createBlock( 'core/quote', {
+						value: switchChildrenNodeName( values, 'p' )
+					} );
+				}
+			},
 			{
 				type: 'block',
 				blocks: [ 'core/heading' ],
@@ -58,6 +72,20 @@ registerBlock( 'core/quote', {
 					} );
 				}
 			},
+			{
+				type: 'block',
+				blocks: [ 'core/list' ],
+				transform: ( { value, citation } ) => {
+					const valueElements = switchChildrenNodeName( value, 'li' );
+					const values = citation
+						? wp.element.concatChildren( valueElements, <li>{ citation }</li> )
+						: valueElements;
+					return createBlock( 'core/list', {
+						nodeName: 'ul',
+						values
+					} );
+				}
+			},
 			{
 				type: 'block',
 				blocks: [ 'core/heading' ],

element/index.js

@@ -4,6 +4,7 @@
 import { createElement, Component, cloneElement, Children } from 'react';
 import { render } from 'react-dom';
 import { renderToStaticMarkup } from 'react-dom/server';
+import { isString } from 'lodash';
 
 /**
  * Returns a new element of given type. Type can be either a string tag name or
@@ -91,3 +92,21 @@ export function concatChildren( ...childrens ) {
 		return memo;
 	}, [] );
 }
+
+/**
+ * Switches the nodeName of all the elements in the children object
+ *
+ * @param  {?Object} children  Children object
+ * @param  {String}  nodeName  Node name
+ * @return {?Object}           The updated children object
+ */
+export function switchChildrenNodeName( children, nodeName ) {
+	return children && Children.map( children, ( elt, index ) => {
+		if ( isString( elt ) ) {
+			return createElement( nodeName, { key: index }, elt );
+		}
+		const { children: childrenProp, ...props } = elt.props;
+		return createElement( nodeName, { key: index, ...props }, childrenProp );
+	} );
+}
+

element/test/index.js

@@ -6,7 +6,7 @@ import { expect } from 'chai';
 /**
  * Internal dependencies
  */
-import { createElement, renderToString, concatChildren } from '../';
+import { createElement, renderToString, concatChildren, switchChildrenNodeName } from '../';
 
 describe( 'element', () => {
 	describe( 'renderToString', () => {
@@ -55,4 +55,32 @@ describe( 'element', () => {
 			expect( concat[ 1 ].key ).to.equal( '1,0' );
 		} );
 	} );
+
+	describe( 'switchChildrenNodeName', () => {
+		it( 'should return undefined for undefined children', () => {
+			expect( switchChildrenNodeName() ).to.be.undefined();
+		} );
+
+		it( 'should switch strings', () => {
+			const children = switchChildrenNodeName( [ 'a', 'b' ], 'strong' );
+			expect( children.length ).to.equal( 2 );
+			expect( children[ 0 ].type ).to.equal( 'strong' );
+			expect( children[ 0 ].props.children ).to.equal( 'a' );
+			expect( children[ 1 ].type ).to.equal( 'strong' );
+			expect( children[ 1 ].props.children ).to.equal( 'b' );
+		} );
+
+		it( 'should switch elements', () => {
+			const children = switchChildrenNodeName( [
+				createElement( 'strong', { align: 'left' }, 'Courgette' ),
+				createElement( 'strong', {}, 'Concombre' )
+			], 'em' );
+			expect( children.length ).to.equal( 2 );
+			expect( children[ 0 ].type ).to.equal( 'em' );
+			expect( children[ 0 ].props.children ).to.equal( 'Courgette' );
+			expect( children[ 0 ].props.align ).to.equal( 'left' );
+			expect( children[ 1 ].type ).to.equal( 'em' );
+			expect( children[ 1 ].props.children ).to.equal( 'Concombre' );
+		} );
+	} );
 } );