Skip to content

Instantly share code, notes, and snippets.

@ishaadX
Forked from mattheu/block.js
Created November 25, 2019 10:50
Show Gist options
  • Save ishaadX/0b0a98a5ff9562636a70bf31ec8452a8 to your computer and use it in GitHub Desktop.
Save ishaadX/0b0a98a5ff9562636a70bf31ec8452a8 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>';
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment