Plugin for testing Child Blocks

block.js

( function() {
	const { registerBlockType } = wp.blocks;
	const { createElement: el } = wp.element;
	const { InnerBlocks } = wp.blocks;

	registerBlockType( 'acme/product', {
		title: 'Product',
		icon: 'carrot',
		category: 'common',

		edit() {
			return el( 'div', { className: 'product', style: { outline: '1px solid gray', padding: 5 } },
				// Only paragraphs, images, and products:
				el( InnerBlocks, { allowedBlocks: [ 'core/paragraph', 'core/image' ] } )
				// Everything and products:
				//el( InnerBlocks )
			);
		},

		save() {
			return el( 'div', { className: 'product', style: { outline: '1px solid gray', padding: 5 } },
				el( InnerBlocks.Content )
			);
		},
	} );

	registerBlockType( 'acme/buy-button', {
		title: 'Buy Button',
		icon: 'cart',
		category: 'common',

		// Only allow in products:
		parent: [ 'acme/product' ],

		edit() {
			return el(
				'button',
				{
					className: 'buy-button',
					style: { display: 'block', margin: '0 auto', padding: '10px 30px' },
				},
				'Buy Now'
			);
		},

		save() {
			return el(
				'button',
				{
					className: 'buy-button',
					style: { display: 'block', margin: '0 auto', padding: '10px 30px' },
				},
				'Buy Now'
			);
		},
	} );
} )();

index.php

<?php

/**
 * Plugin Name: ACME Directory
 * Description: A little plugin to test the new Child Blocks API.
 * Author: Robert Anderson
 *
 * @package acme-directory
 */

add_action( 'enqueue_block_editor_assets', function() {
	wp_enqueue_script(
		'acme_blocks',
		plugins_url( 'block.js', __FILE__ ),
		array( 'wp-blocks', 'wp-element' ),
		filemtime( plugin_dir_path( __FILE__ ) ) . 'block.js' 
	);
} );