Blocks: Normalize RichText value from string (as HTML), children

packages/blocks/src/api/factory.js

@@ -44,20 +44,18 @@ export function createBlock( name, blockAttributes = {}, innerBlocks = [] ) {
 	// Ensure attributes contains only values defined by block type, and merge
 	// default values for missing attributes.
 	const attributes = reduce( blockType.attributes, ( result, schema, key ) => {
-		const value = blockAttributes[ key ];
+		let value = blockAttributes[ key ];
 
-		if ( undefined !== value ) {
-			result[ key ] = value;
-		} else if ( schema.hasOwnProperty( 'default' ) ) {
-			result[ key ] = schema.default;
+		if ( value === undefined && schema.hasOwnProperty( 'default' ) ) {
+			value = schema.default;
 		}
 
 		if ( schema.source === 'rich-text' ) {
 			// Ensure value passed is always a rich text value.
-			if ( typeof result[ key ] === 'string' ) {
-				result[ key ] = create( { text: result[ key ] } );
-			} else if ( ! result[ key ] || ! result[ key ].text ) {
-				result[ key ] = create();
+			if ( typeof value === 'string' ) {
+				value = create( { text: value } );
+			} else if ( ! value || ! value.text ) {
+				value = create();
 			}
 		}
 
@@ -69,14 +67,18 @@ export function createBlock( name, blockAttributes = {}, innerBlocks = [] ) {
 			} );
 
 			// Ensure value passed is always an array, which we're expecting in
-			// the RichText component to handle the deprecated value.
-			if ( typeof result[ key ] === 'string' ) {
-				result[ key ] = [ result[ key ] ];
-			} else if ( ! Array.isArray( result[ key ] ) ) {
-				result[ key ] = [];
+			// the RichText getColorObjectByAttributeValuescomponent to handle the deprecated value.
+			if ( typeof value === 'string' ) {
+				value = [ value ];
+			} else if ( ! Array.isArray( value ) ) {
+				value = [];
 			}
 		}
 
+		if ( value !== undefined ) {
+			result[ key ] = value;
+		}
+
 		return result;
 	}, {} );
 

packages/blocks/src/api/templates.js

@@ -1,12 +1,19 @@
 /**
  * External dependencies
  */
-import { every, map } from 'lodash';
+import { get, every, map, mapValues } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { create } from '@wordpress/rich-text';
+import { renderToString } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { createBlock } from './factory';
+import { getBlockType } from './registration';
 
 /**
  * Checks whether a list of blocks matches a template by comparing the block names.
@@ -56,9 +63,40 @@ export function synchronizeBlocksWithTemplate( blocks = [], template ) {
 			return { ...block, innerBlocks };
 		}
 
+		// The template attributes format is a bit different than the block's attributes format
+		// Because we don't want to expose the `rich-text` type in templates format
+		// Instead, we use the "element" format which is less verbose.
+		const blockType = getBlockType( name );
+		const isRichTextAttribute = ( attributeDefinition ) => get( attributeDefinition, [ 'source' ] ) === 'rich-text';
+		const isQueryAttribute = ( attributeDefinition ) => get( attributeDefinition, [ 'source' ] ) === 'query';
+
+		const normalizeAttributes = ( schema, values ) => {
+			return mapValues( values, ( value, key ) => {
+				return normalizeAttribute( schema[ key ], value );
+			} );
+		};
+		const normalizeAttribute = ( definition, value ) => {
+			if ( isRichTextAttribute( definition ) ) {
+				return create( { html: renderToString( value ) } );
+			}
+
+			if ( isQueryAttribute( definition ) && value ) {
+				return value.map( ( subValues ) => {
+					return normalizeAttributes( definition.query, subValues );
+				} );
+			}
+
+			return value;
+		};
+
+		const normalizedAttributes = normalizeAttributes(
+			get( blockType, [ 'attributes' ], {} ),
+			attributes
+		);
+
 		return createBlock(
 			name,
-			attributes,
+			normalizedAttributes,
 			synchronizeBlocksWithTemplate( [], innerBlocksTemplate )
 		);
 	} );

test/e2e/test-plugins/block-icons/index.js

@@ -1,6 +1,5 @@
 ( function() {
 	var registerBlockType = wp.blocks.registerBlockType;
-	var create = wp.richText.create;
 	var el = wp.element.createElement;
 	var InnerBlocks = wp.editor.InnerBlocks;
     var circle = el( 'circle', { cx: 10, cy: 10, r: 10, fill: 'red', stroke: 'blue', strokeWidth: '10' } );
@@ -19,7 +18,7 @@
 						allowedBlocks: [ 'core/paragraph', 'core/image' ],
 						template: [
 							[ 'core/paragraph', {
-								content: create( { text: 'TestSimpleSvgIcon' } ),
+								content: 'TestSimpleSvgIcon',
 							} ],
 						],
 					}
@@ -47,7 +46,7 @@
 						allowedBlocks: [ 'core/paragraph', 'core/image' ],
 						template: [
 							[ 'core/paragraph', {
-								content: create( { text: 'TestDashIcon' } ),
+								content: 'TestDashIcon'
 							} ],
 						],
 					}
@@ -77,7 +76,7 @@
 						allowedBlocks: [ 'core/paragraph', 'core/image' ],
 						template: [
 							[ 'core/paragraph', {
-								content: create( { text: 'TestFunctionIcon' } ),
+								content: 'TestFunctionIcon',
 							} ],
 						],
 					}
@@ -109,7 +108,7 @@
 						allowedBlocks: [ 'core/paragraph', 'core/image' ],
 						template: [
 							[ 'core/paragraph', {
-								content: create( { text: 'TestIconColors' } ),
+								content: 'TestIconColors',
 							} ],
 						],
 					}
@@ -140,7 +139,7 @@
 						allowedBlocks: [ 'core/paragraph', 'core/image' ],
 						template: [
 							[ 'core/paragraph', {
-								content: create( { text: 'TestIconColors' } ),
+								content: 'TestIconColors',
 							} ],
 						],
 					}

test/e2e/test-plugins/inner-blocks-templates/index.js

@@ -7,7 +7,7 @@
 	var TEMPLATE = [
 		[ 'core/paragraph', {
 			fontSize: 'large',
-			content: create( { text: 'Content…' } ),
+			content: 'Content…',
 		} ],
 	];