Try Building a Template Block

blocks/api/factory.js

@@ -97,3 +97,17 @@ export function switchToBlockType( block, name ) {
 		};
 	} );
 }
+
+/**
+ * Gives us a `to` transformation that renders the given component into a text block
+ *
+ * @param  {Object} Component The component to render, it must accept an `attributes` prop. It must include only inline elements, because the text block is a `p`.
+ * @return {Object}           The transformation
+ */
+export function transformComponentToText( Component ) {
+	return {
+		type: 'block',
+		blocks: [ 'core/text' ],
+		transform: ( attributes ) => createBlock( 'core/text', { content: <Component attributes={ attributes } /> } ),
+	};
+}

blocks/api/index.js

@@ -4,7 +4,7 @@
 import * as query from './query';
 
 export { query };
-export { createBlock, switchToBlockType } from './factory';
+export { createBlock, switchToBlockType, transformComponentToText } from './factory';
 export { default as parse } from './parser';
 export { default as pasteHandler } from './paste';
 export { default as serialize, getBlockDefaultClassname } from './serializer';

blocks/api/test/factory.js

@@ -6,8 +6,9 @@ import { noop } from 'lodash';
 /**
  * Internal dependencies
  */
-import { createBlock, switchToBlockType } from '../factory';
+import { createBlock, switchToBlockType, transformComponentToText } from '../factory';
 import { getBlockTypes, unregisterBlockType, setUnknownTypeHandler, registerBlockType } from '../registration';
+import { Component } from 'element'
 
 describe( 'block factory', () => {
 	const defaultBlockSettings = { save: noop };
@@ -363,4 +364,68 @@ describe( 'block factory', () => {
 			} ] );
 		} );
 	} );
+	describe( 'transformComponentToText()', () => {
+		it( 'should transform a stateless edit/save component to a text block', () => {
+			const Save = ( { attributes } ) => <span>Hi, { attributes.name }</span>;
+			registerBlockType( 'test/hi', {
+				transforms: {
+					to: [ transformComponentToText( Save ) ],
+				},
+				edit: noop,
+				save: Save,
+			} );
+			registerBlockType( 'core/text', defaultBlockSettings );
+
+			const block = {
+				uid: 1,
+				name: 'test/hi',
+				attributes: {
+					name: 'Baba',
+				},
+			};
+
+			const updatedBlock = switchToBlockType( block, 'core/text' );
+
+			expect( updatedBlock ).toEqual( [ {
+				uid: 1,
+				name: 'core/text',
+				attributes: {
+					content: <Save attributes={ { name: 'Baba' } } />,
+				},
+			} ] );
+		} );
+		it( 'should transform a full-blown edit/save component to a text block', () => {
+			const Save = class extends Component {
+				render() {
+					return <span>Howdy, { this.props.attributes.name }</span>;
+				}
+			};
+			registerBlockType( 'test/hi', {
+				transforms: {
+					to: [ transformComponentToText( Save ) ],
+				},
+				edit: noop,
+				save: Save,
+			} );
+			registerBlockType( 'core/text', defaultBlockSettings );
+
+			const block = {
+				uid: 1,
+				name: 'test/hi',
+				attributes: {
+					name: 'Baba',
+				},
+			};
+
+			const updatedBlock = switchToBlockType( block, 'core/text' );
+
+			expect( updatedBlock ).toEqual( [ {
+				uid: 1,
+				name: 'core/text',
+				attributes: {
+					content: <Save attributes={ { name: 'Baba' } } />,
+				},
+			} ] );
+		} );
+	} );
 } );

blocks/library/index.js

@@ -16,3 +16,4 @@ import './freeform';
 import './latest-posts';
 import './cover-image';
 import './verse';
+import './template';

blocks/library/template/index.js

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from 'i18n';
+
+/**
+ * Internal dependencies
+ */
+import { registerBlockType, transformComponentToText } from '../../api';
+import AttributeInput from 'components/attribute-input';
+
+function template( mode ) {
+	return function( { attributes, setAttributes } ) {
+		return <span>
+			Hi, my name is {
+				'edit' === mode ?
+					<AttributeInput type="text" placeholder="Peter" value={ attributes.name } attribute="name" setAttributes={ setAttributes } /> :
+					attributes.name
+			}! <br />
+			#intro { tagify( attributes.name ) }
+		</span>;
+	};
+}
+
+function tagify( name ) {
+	return name ? '#' + name.toLowerCase().replace( /\s+/g, '-' ) : '';
+}
+
+registerBlockType( 'core/template', {
+	title: __( 'Template for Templates' ),
+	defaultAttributes: {
+		name: '',
+	},
+	transforms: {
+		to: [ transformComponentToText( template( 'save' ) ) ],
+	},
+
+	icon: 'list-view',
+	category: 'widgets',
+
+	edit: template( 'edit' ),
+	save: template( 'save' ),
+} );

components/attribute-input/README.md

@@ -0,0 +1,24 @@
+The `AttributeInput` component can be used to add an `input` to a block, whose value is always synchronized with a certain attribute.
+
+#### Props
+
+The following props are used to tell us which attrbute to connect the `input` to and how to update the attribute value. Any additional props will be passed to the rendered `<input />`.
+
+* `attribute`: (string) the name of the block attribute to connect the `input` to.
+* `setAttribute`: (function) the block's `setAttribute` function, we need it to be able to set the attribute value when the input changes.
+
+#### Example:
+
+```javascript
+registerBlockType( 'example/hello', {
+	title: __( 'Hello' ),
+	icon: 'list-view',
+	category: 'widgets',
+	edit: ( { attributes, setAttributes } ) => (
+		<span>Enter your name: <AttributeInput type="text" value={ attributes.name } placeholder="Baba" attribute="name" setAttributes={ setAttributes } /></span>
+	),
+	save: ( { attributes } ) => (
+		<span>Hello, { attributes.name }!</span>
+	),
+} );
+```

components/attribute-input/index.js

@@ -0,0 +1,3 @@
+export default function AttributeInput( { attribute, setAttributes, value = '', ...inputProps } ) {
+	return <input value={ value } onChange={ ( e ) => setAttributes( { [ attribute ]: e.target.value } ) } { ...inputProps } />;
+}