mattheu · April 18, 2018 09:41 · Apr 18, 2018
diff --git a/block.js b/block.js
@@ -0,0 +1,38 @@
+const el = wp.element.createElement,
+	registerBlockType = wp.blocks.registerBlockType,
+	InnerBlocks = wp.blocks.InnerBlocks;
+
+registerBlockType( 'gutenberg-boilerplate-es5/hello-world-step-01', {
+	title: 'Hello World (Step 1)',
+
+	icon: 'universal-access-alt',
+
+	category: 'layout',
+
+	attributes: {
+		foo: {
+			type: 'string',
+		}
+	},
+
+	edit: function( { attributes, setAttributes } ) {
+		return [
+			el( 'input', {
+				value: attributes.foo || '',
+				onChange: e => setAttributes( { foo: e.target.value } ),
+				key: 1,
+			} ),
+			el( InnerBlocks, { key: 2 } ),
+		];
+	},
+
+	save: function( { attributes } ) {
+		console.log( InnerBlocks.Content );
+
+		return el( 'div', {}, [
+			el( 'p', {}, attributes.foo, { key: 1 } ),
+			el( InnerBlocks.Content, { key: 2 } ),
+		]);
+	},
+} );
+
diff --git a/plugin.php b/plugin.php
@@ -0,0 +1,21 @@
+<?php
+
+function gutenberg_boilerplate_block() {
+	wp_register_script(
+		'gutenberg-boilerplate-es5-step01',
+		plugins_url( 'block.js', __FILE__ ),
+		array( 'wp-blocks', 'wp-element' )
+	);
+
+	register_block_type( 'gutenberg-boilerplate-es5/hello-world-step-01', array(
+		'editor_script' => 'gutenberg-boilerplate-es5-step01',
+		'render_callback' => 'my_plugin_render_block_latest_post',
+	) );
+}
+add_action( 'init', 'gutenberg_boilerplate_block' );
+
+
+function my_plugin_render_block_latest_post( $attributes, $content = '' ) {
+	// var_dump( $content );
+	return '<p>' . $attributes['foo'] . '</p>' . '<pre><code>' . htmlspecialchars( $content ) . '</code></pre>';
+}