Support save serialization by component type

WordPress · Apr 6, 2017 · 20b7b94 · 20b7b94
1 parent 0dfc163
commit 20b7b94
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 20 deletions.
diff --git a/blocks/serializer.js b/blocks/serializer.js
@@ -13,16 +13,22 @@ import { getBlockAttributes } from './parser';
  * Given a block's save render implementation and attributes, returns the
  * static markup to be saved.
  *
- * @param  {Function} save       Save render implementation
- * @param  {Object}   attributes Block attributes
- * @return {string}              Save content
+ * @param  {Function|WPComponent} save       Save render implementation
+ * @param  {Object}               attributes Block attributes
+ * @return {string}                          Save content
  */
 export function getSaveContent( save, attributes ) {
-	const rawContent = save( { attributes } );
+	let rawContent;
 
-	// Support string return values from save, e.g. raw HTML attribute value
-	if ( 'string' === typeof rawContent ) {
-		return rawContent;
+	if ( save.prototype instanceof wp.element.Component ) {
+		rawContent = wp.element.createElement( save, { attributes } );
+	} else {
+		rawContent = save( { attributes } );
+
+		// Special-case function render implementation to allow raw HTML return
+		if ( 'string' === typeof rawContent ) {
+			return rawContent;
+		}
 	}
 
 	// Otherwise, infer as element

diff --git a/blocks/test/serializer.js b/blocks/test/serializer.js
@@ -17,23 +17,41 @@ describe( 'block serializer', () => {
 	} );
 
 	describe( 'getSaveContent()', () => {
-		it( 'should return string verbatim', () => {
-			const saved = getSaveContent(
-				( { attributes } ) => attributes.fruit,
-				{ fruit: 'Bananas' }
-			);
+		context( 'function save', () => {
+			it( 'should return string verbatim', () => {
+				const saved = getSaveContent(
+					( { attributes } ) => attributes.fruit,
+					{ fruit: 'Bananas' }
+				);
 
-			expect( saved ).to.equal( 'Bananas' );
+				expect( saved ).to.equal( 'Bananas' );
+			} );
+
+			it( 'should return element as string if save returns element', () => {
+				const { createElement } = wp.element;
+				const saved = getSaveContent(
+					( { attributes } ) => createElement( 'div', null, attributes.fruit ),
+					{ fruit: 'Bananas' }
+				);
+
+				expect( saved ).to.equal( '<div>Bananas</div>' );
+			} );
 		} );
 
-		it( 'should return element as string if save returns element', () => {
-			const { createElement } = wp.element;
-			const saved = getSaveContent(
-				( { attributes } ) => createElement( 'div', null, attributes.fruit ),
-				{ fruit: 'Bananas' }
-			);
+		context( 'component save', () => {
+			it( 'should return element as string', () => {
+				const { Component, createElement } = wp.element;
+				const saved = getSaveContent(
+					class extends Component {
+						render() {
+							return createElement( 'div', null, this.props.attributes.fruit );
+						}
+					},
+					{ fruit: 'Bananas' }
+				);
 
-			expect( saved ).to.equal( '<div>Bananas</div>' );
+				expect( saved ).to.equal( '<div>Bananas</div>' );
+			} );
 		} );
 	} );