diff --git a/blocks/editable/index.js b/blocks/editable/index.js index e7c68e2982ed2..9e20597691ff4 100644 --- a/blocks/editable/index.js +++ b/blocks/editable/index.js @@ -673,6 +673,10 @@ Editable.contextTypes = { Editable.Value = ( { value } ) => valueToReact( value ); function valueToReact( value ) { + if ( ! Array.isArray( value ) ) { + return value; + } + return value.map( ( element, i ) => { if ( typeof element === 'string' ) { return element; diff --git a/blocks/editable/test/index.js b/blocks/editable/test/index.js index 8afea0651166e..8ff8c8e5026ec 100644 --- a/blocks/editable/test/index.js +++ b/blocks/editable/test/index.js @@ -40,4 +40,52 @@ describe( 'Editable', () => { } ); /* eslint-enable no-console */ } ); + + describe( 'Editable.Value', () => { + const Component = ( { value } ) => ( +
+ +
+ ); + + it( 'should render value containing string', () => { + const value = [ 'Hello, Dolly!' ]; + const wrapper = shallow( ); + + expect( wrapper.html() ).toBe( '
Hello, Dolly!
' ); + } ); + + it( 'should render value containing a single DOM node', () => { + const value = [ + [ 'h1', {}, 'This is a header' ], + ]; + const wrapper = shallow( ); + + expect( wrapper.html() ).toBe( '

This is a header

' ); + } ); + + it( 'should render value with deeply nested DOM nodes', () => { + const value = [ + 'This is a ', + [ 'strong', {}, 'paragraph', ], + ' with a ', + [ 'a', { href: 'https://w.org/' }, 'link with ', [ + 'b', + {}, + 'bold ', + [ + 'i', + {}, + 'and italics', + ], + ] ], + '.', + ]; + const wrapper = shallow( ); + + expect( wrapper.html() ).toBe( + '
This is a paragraph with a link with bold and italics.
' + ); + } ); + } ); } );