Framework: Final touches to allow saving blocks state as a tree

WordPress · Oct 24, 2017 · 03c9bc0 · 03c9bc0
1 parent 7ddf1ca
commit 03c9bc0
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 26 deletions.
diff --git a/blocks/api/source.js b/blocks/api/source.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { nodeListToReact, nodeToReact } from 'dom-react';
-import { flow, omit } from 'lodash';
+import { flatten, flow, omit } from 'lodash';
 import {
 	attr as originalAttr,
 	prop as originalProp,
@@ -25,12 +25,8 @@ function withKnownSourceFlag( fn ) {
 	} );
 }
 
-function toArray( ...args ) {
-	return [ toElement( ...args ) ];
-}
-
-function toElement( type, props, ...children ) {
-	return [ type, omit( props, 'key' ), ...children ];
+function toArray( type, props, ...children ) {
+	return [ [ type, omit( props, 'key' ), ...children ] ];
 }
 
 export const attr = withKnownSourceFlag( originalAttr );
@@ -61,6 +57,6 @@ export const node = withKnownSourceFlag( ( selector ) => {
 			match = domNode.querySelector( selector );
 		}
 
-		return nodeToReact( match, toElement );
+		return flatten( nodeToReact( match, toArray ) );
 	};
 } );
diff --git a/blocks/api/test/source.js b/blocks/api/test/source.js
@@ -15,6 +15,8 @@ import * as sources from '../source';
 import { valueToElement } from '../../editable';
 
 describe( 'sources', () => {
+	const html = '<blockquote><p>A delicious <b>sundae</b> dessert.</p><p>I want it!</p><footer>The Cook</footer></blockquote>';
+
 	it( 'should generate sources which apply internal flag', () => {
 		for ( const sourceFn in sources ) {
 			expect( sources[ sourceFn ]()._wpBlocksKnownSource ).toBe( true );
@@ -31,7 +33,6 @@ describe( 'sources', () => {
 		it( 'should return HTML equivalent WPElement of matched element', () => {
 			// Assumption here is that we can cleanly convert back and forth
 			// between a string and WPElement representation
-			const html = '<blockquote><p>A delicious <b>sundae</b> dessert.</p><p>I want it!</p></blockquote>';
 			const match = parse( html, sources.children() );
 
 			expect( renderToString( valueToElement( match ) ) ).toBe( html );
@@ -48,10 +49,27 @@ describe( 'sources', () => {
 		it( 'should return HTML equivalent WPElement of matched element', () => {
 			// Assumption here is that we can cleanly convert back and forth
 			// between a string and WPElement representation
-			const html = '<blockquote><p>A delicious <b>sundae</b> dessert.</p></blockquote>';
 			const match = parse( html, sources.node() );
 
-			expect( renderToString( valueToElement( [ match ] ) ) ).toBe( `<body>${ html }</body>` );
+			expect(
+				renderToString( valueToElement( [ match ] ) )
+			).toBe(
+				`<body>${ html }</body>`
+			);
+		} );
+	} );
+
+	describe( 'query', () => {
+		it( 'should return HTML equivalent WPElement of matched element using selector', () => {
+			// Assumption here is that we can cleanly convert back and forth
+			// between a string and WPElement representation
+			const match = parse( html, sources.query( 'blockquote > p', sources.node( ) ) );
+
+			expect(
+				renderToString( valueToElement( match )
+			) ).toBe(
+				'<p>A delicious <b>sundae</b> dessert.</p><p>I want it!</p>'
+			);
 		} );
 	} );
 } );
diff --git a/blocks/editable/test/index.js b/blocks/editable/test/index.js
@@ -70,13 +70,8 @@ describe( 'Editable', () => {
 				[ 'strong', {}, 'paragraph' ],
 				' with a ',
 				[ 'a', { href: 'https://w.org/' }, 'link with ', [
-					'b',
-					{},
-					'bold ',
-					[
-						'i',
-						{},
-						'and italics',
+					'b', {}, 'bold ', [
+						'i', {}, 'and italics',
 					],
 				] ],
 				'.',

diff --git a/blocks/library/table/index.js b/blocks/library/table/index.js
@@ -28,10 +28,29 @@ registerBlockType( 'core/table', {
 			type: 'array',
 			source: children( 'table' ),
 			default: [
-				<tbody key="1">
-					<tr><td><br /></td><td><br /></td></tr>
-					<tr><td><br /></td><td><br /></td></tr>
-				</tbody>,
+				[
+					'tbody', {}, [
+						'tr', {}, [
+							'td', {}, [
+								'br', {},
+							],
+						], [
+							'td', {}, [
+								'br', {},
+							],
+						],
+					], [
+						'tr', {}, [
+							'td', {}, [
+								'br', {},
+							],
+						], [
+							'td', {}, [
+								'br', {},
+							],
+						],
+					],
+				],
 			],
 		},
 		align: {

diff --git a/blocks/test/fixtures/core__pullquote__multi-paragraph.json b/blocks/test/fixtures/core__pullquote__multi-paragraph.json
@@ -2,16 +2,18 @@
     {
         "uid": "_uid_0",
         "name": "core/pullquote",
-        "isValid": false,
+        "isValid": true,
         "attributes": {
             "value": [
                 [
                     "p",
                     {},
                     "Paragraph ",
-                    "strong",
-                    {},
-                    "one"
+                    [
+                        "strong",
+                        {},
+                        "one"
+                    ]
                 ],
                 [
                     "p",