Skip to content

Instantly share code, notes, and snippets.

@mattheu
Created April 18, 2018 09:41
Show Gist options
  • Save mattheu/7cf235b4f932de891bc21cb5f3ff3de6 to your computer and use it in GitHub Desktop.
Save mattheu/7cf235b4f932de891bc21cb5f3ff3de6 to your computer and use it in GitHub Desktop.
Gutenberg - Test case custom block for passing content to render callback
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 } ),
]);
},
} );
<?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>';
}
@manake
Copy link

manake commented Jun 10, 2018

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?

@MohammadAlBanna
Copy link

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!

@maxjf1
Copy link

maxjf1 commented Feb 15, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment