diff --git a/blocks/library/list/index.js b/blocks/library/list/index.js index 0f852b2507a62d..7a7246a1677641 100644 --- a/blocks/library/list/index.js +++ b/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 ( diff --git a/blocks/library/quote/index.js b/blocks/library/quote/index.js index e525b00824dc84..fc2bfede8f08df 100644 --- a/blocks/library/quote/index.js +++ b/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,
  • { citation }
  • ) + : valueElements; + return createBlock( 'core/list', { + nodeName: 'ul', + values + } ); + } + }, { type: 'block', blocks: [ 'core/heading' ], diff --git a/element/index.js b/element/index.js index 8c8b2762a88755..82a99fd21ee364 100644 --- a/element/index.js +++ b/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 ); + } ); +} + diff --git a/element/test/index.js b/element/test/index.js index 842ac6a0465e16..479bf824271f2b 100644 --- a/element/test/index.js +++ b/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' ); + } ); + } ); } );