testInnerBlocks.js

( function() {
	var registerBlockType = wp.blocks.registerBlockType;
	var el = wp.element.createElement;
	var InnerBlocks = wp.editor.InnerBlocks;
	var TextControl = wp.components.TextControl;
	var RangeControl = wp.components.RangeControl;

	registerBlockType( 'test/parent', {
		title: 'Test Parent',
		icon: 'cart',
		category: 'common',
		attributes: {
			inputParent: {
				type: 'string'
			},
			numberOfChilds: {
				type: 'number',
				default: 2,
			}
		},

		edit: function( props ) {
			var template = [];
			for( var i = 0; i < props.attributes.numberOfChilds; ++i ) {
				template.push( [
						'test/child',
						{ inputChild: props.attributes.inputParent }
				] );
			}
			return el( 'div', { style: { outline: '1px solid gray', padding: 5 } },
				el(
					RangeControl,
					{
						label: 'Number of childs',
						value: props.attributes.numberOfChilds,
						min: 2,
						max: 10,
						onChange: function( value ) {
							props.setAttributes( {
								numberOfChilds: value
							} );
						}
					}
				),
				el(
					TextControl,
					{
						label: 'Parent Input',
						value: props.attributes.inputParent,
						onChange: function( value ) {
							props.setAttributes( {
								inputParent: value
							} );
						}
					}
				),
				el( 'span', {}, props.attributes.inputParent ),
				el(
					InnerBlocks,
					{
						template: template,
						templateLock: 'all',
					}
				)
			);
		},

		save: function( props ) {
			return el( 'div', { style: { outline: '1px solid gray', padding: 5 } },
				el( 'span', {}, props.inputParent ),
				el( InnerBlocks.Content, {} )
			);
		},
	} );

	registerBlockType( 'test/child', {
		title: 'Test Child',
		icon: 'cart',
		category: 'common',
		attributes: {
			inputChild: {
				type: 'string'
			}
		},

		parent: [ 'test/parent' ],

		edit: function( props ) {
			return el( 'div', { style: { outline: '1px solid gray', padding: 5 } },
				el(
					TextControl,
					{
						label: 'Child Input',
						value: props.attributes.inputChild,
						onChange: function( value ) {
							props.setAttributes( {
								inputChild: value
							} );
						}
					}
				),
				el( 'span', {}, props.attributes.inputChild ),
			);
		},

		save: function( props ) {
			return el( 'div', { style: { outline: '1px solid gray', padding: 5 } },
				el( 'span', {}, props.inputParent ),
			);
		},
	} );
} )();