Gutenberg - Test case custom block for passing content to render callback

block.js

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 } ),
		]);
	},
} );

plugin.php

<?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>';
}

Questions:

1. This makes $attributes and $content empty in PHP so neither are accessible in Gutenberg 3.1.
2. wp.blocks.InnerBlocks is now wp.editor.InnerBlocks.
3. Can you explain { key: 1 } and { key: 2 } part?
4. Is save() necessary in JS if you have render_callback in PHP? Should save() contain just return null;?
5. What is the format of InnerBlocks.Content in PHP? Should gutenberg_render_block( $block ) be used to parse inner blocks?

Correction: $attributes is accessible in PHP but not $content. And save() is ignored if render_callback is specified. So, how to access $content in PHP?

Thanks for this awesome example!

Answering @manake of how to pass the content of InnerBlocks from JavaSript to PHP.

In Save function, if we returned null, that means just attributes of that block will be saved into the database, but if we have inner blocks, we need to return the content of the inner block to be saved into the database as well: return createElement(InnerBlocks.Content);.

If we returned the content of the inner block, it will be passed to the variable $content in PHP.

Tested and confirmed.

Thanks!

Questions:

1. This makes $attributes and $content empty in PHP so neither are accessible in Gutenberg 3.1.
2. wp.blocks.InnerBlocks is now wp.editor.InnerBlocks.
3. Can you explain { key: 1 } and { key: 2 } part?
4. Is save() necessary in JS if you have render_callback in PHP? Should save() contain just return null;?
5. What is the format of InnerBlocks.Content in PHP? Should gutenberg_render_block( $block ) be used to parse inner blocks?

Correction: $attributes is accessible in PHP but not $content. And save() is ignored if render_callback is specified. So, how to access $content in PHP?

Learning Gutenberg here, so here is some answers:

1. content will receive everything you return on the save method (in this case, the InnerBlocks contents)
2. The key prop is from react. If you return an array of elements, you need to set an unique key (among siblings). In this example this can be avoided by using the Fragment component.
3. You only need save if you want to pass the content argument to the SSR function
4. In PHP is just HTML, in JS they are react elements. I don't know if gutenberg_render_block is needed.