Add inner blocks example (#102)

06-inner-blocks-esnext/build/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-element', 'wp-polyfill'), 'version' => '73081aec5377b14fa69c20dbe99f4996');

06-inner-blocks-esnext/index.php

@@ -0,0 +1,45 @@
+<?php
+
+/**
+ * Plugin Name: Gutenberg Examples Inner Blocks ESNext
+ * Plugin URI: https://github.com/WordPress/gutenberg-examples
+ * Description: This is a plugin demonstrating how to use nested and inner blocks in the Gutenberg editor.
+ * Version: 1.1.0
+ * Author: the Gutenberg Team
+ *
+ * @package gutenberg-examples
+ */
+
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * Registers all block assets so that they can be enqueued through Gutenberg in
+ * the corresponding context.
+ */
+function gutenberg_examples_06_esnext_register_block() {
+
+	if ( ! function_exists( 'register_block_type' ) ) {
+		// Gutenberg is not active.
+		return;
+	}
+
+	// automatically load dependencies and version
+	$asset_file = include(plugin_dir_path(__FILE__) . 'build/index.asset.php');
+
+	wp_register_script(
+		'gutenberg-examples-06-esnext',
+		plugins_url( 'build/index.js', __FILE__ ),
+		$asset_file['dependencies'],
+		$asset_file['version'],
+		true
+	);
+
+	register_block_type(
+		'gutenberg-examples/example-06-esnext',
+		[
+			'editor_script' => 'gutenberg-examples-06-esnext',
+		]
+	);
+
+}
+add_action( 'init', 'gutenberg_examples_06_esnext_register_block' );

06-inner-blocks-esnext/package.json

@@ -0,0 +1,14 @@
+{
+	"name": "06-inner-blocks-esnext",
+	"version": "1.1.0",
+	"license": "GPL-2.0-or-later",
+	"main": "build/index.js",
+	"devDependencies": {
+		"@wordpress/scripts": "^5.0.0"
+	},
+	"scripts": {
+		"start": "wp-scripts start",
+		"build": "wp-scripts build",
+		"lint-js": "wp-scripts lint-js"
+	}
+}

06-inner-blocks-esnext/src/index.js

@@ -0,0 +1,21 @@
+import { registerBlockType } from '@wordpress/blocks';
+import { InnerBlocks } from '@wordpress/block-editor';
+
+registerBlockType( 'gutenberg-examples/example-06-esnext', {
+	title: 'Example: Inner Blocks (ESNext)',
+	category: 'layout',
+	edit: ( { className } ) => {
+		return (
+			<div className={ className }>
+				<InnerBlocks />
+			</div>
+		);
+	},
+	save: ( { className } ) => {
+		return (
+			<div className={ className } >
+				<InnerBlocks.Content />
+			</div>
+		);
+	},
+} );

06-inner-blocks/block.js

@@ -0,0 +1,26 @@
+( function( blocks, element, blockEditor ) {
+	var el = element.createElement;
+	var InnerBlocks = blockEditor.InnerBlocks;
+	blocks.registerBlockType( 'gutenberg-examples/example-06', {
+		title: 'Example: Inner Blocks',
+		category: 'layout',
+		edit: function( props ) {
+			return el(
+				'div',
+				{ className: props.className },
+				el( InnerBlocks )
+			);
+		},
+		save: function( props ) {
+			return el(
+				'div',
+				{ className: props.className },
+				el( InnerBlocks.Content )
+			);
+		},
+	} );
+}(
+	window.wp.blocks,
+	window.wp.element,
+	window.wp.blockEditor,
+) );

06-inner-blocks/index.php

@@ -0,0 +1,42 @@
+<?php
+
+/**
+ * Plugin Name: Gutenberg Examples Inner Blocks
+ * Plugin URI: https://github.com/WordPress/gutenberg-examples
+ * Description: This is a plugin demonstrating how to use nested and inner blocks in the Gutenberg editor.
+ * Version: 1.1.0
+ * Author: the Gutenberg Team
+ *
+ * @package gutenberg-examples
+ */
+
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * Registers all block assets so that they can be enqueued through Gutenberg in
+ * the corresponding context.
+ */
+function gutenberg_examples_06_register_block() {
+
+	if ( ! function_exists( 'register_block_type' ) ) {
+		// Gutenberg is not active.
+		return;
+	}
+
+	wp_register_script(
+		'gutenberg-examples-06',
+		plugins_url( 'block.js', __FILE__ ),
+		[ 'wp-blocks', 'wp-element', 'wp-block-editor' ],
+		filemtime( plugin_dir_path( __FILE__ ) . 'block.js' ),
+		true
+	);
+
+	register_block_type(
+		'gutenberg-examples/example-06',
+		[
+			'editor_script' => 'gutenberg-examples-06',
+		]
+	);
+
+}
+add_action( 'init', 'gutenberg_examples_06_register_block' );

index.php

@@ -21,3 +21,5 @@
 include '04-controls-esnext/index.php';
 include '05-recipe-card/index.php';
 include '05-recipe-card-esnext/index.php';
+include '06-inner-blocks/index.php';
+include '06-inner-blocks-esnext/index.php';

package.json

@@ -17,11 +17,12 @@
 		"test": "wp-scripts test-unit-js",
 		"env:start": "docker-compose up -d",
 		"env:stop": "docker-compose stop",
-		"build": "npm run build:01-basic && npm run build:03-editable && npm run build:04-controls && npm run build:05-recipe",
+		"build": "npm run build:01-basic && npm run build:03-editable && npm run build:04-controls && npm run build:05-recipe && npm run build:06-inner",
 		"build:01-basic": "wp-scripts build 01-basic-esnext/src/index.js --output-path=01-basic-esnext/build",
 		"build:03-editable": "wp-scripts build 03-editable-esnext/src/index.js --output-path=03-editable-esnext/build",
 		"build:04-controls": "wp-scripts build 04-controls-esnext/src/index.js --output-path=04-controls-esnext/build",
-		"build:05-recipe": "wp-scripts build 05-recipe-card-esnext/src/index.js --output-path=05-recipe-card-esnext/build"
+		"build:05-recipe": "wp-scripts build 05-recipe-card-esnext/src/index.js --output-path=05-recipe-card-esnext/build",
+		"build:06-inner": "wp-scripts build 06-inner-blocks-esnext/src/index.js --output-path=06-inner-blocks-esnext/build"
 	},
 	"devDependencies": {
 		"@wordpress/components": "^8.1.0",