childToParentCom.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;
    var template = [
        [ 'test/child' ],
    ];
    var parentSelect = wp.data.withSelect(
        function( select, ownProps) {
            var blockEditorSelect = select('core/block-editor');
            var block = blockEditorSelect.getBlock( ownProps.clientId );
            if ( block.innerBlocks.length === 0 ) {
                return {};
            }
            var childBlock = blockEditorSelect.getBlock( block.innerBlocks[ 0 ].clientId );
            return {
                inputChild: childBlock.attributes.inputChild,
            };
        }
    );

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

		edit: parentSelect( function( props ) {
			return el( 'div', { style: { outline: '1px solid gray', padding: 5 } },
				el(
					TextControl,
					{
						label: 'Parent Input',
						value: props.attributes.inputParent,
						onChange: function( value ) {
							props.setAttributes( {
								inputParent: value
							} );
						}
					}
				),
                el( 'span', {}, 'Parent input: ' + props.attributes.inputParent ),
                el( 'br' ),
                el( 'span', {}, 'Child input: ' + props.inputChild ),
				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.attributes.inputChild ),
			);
		},
	} );
} )();