Building custom blocks for Gutenberg

WordPress has launched their new gutenberg block editor. The launch of Gutenberg means that you’ll need to get acquainted with a whole new editing experience. As its in initial phase so by default there are very less blocks are available with the package. In this post i am going to explain you how you can create your own gutenberg block with existing shortcode.


Follow Below steps

Step 1: Create my-first-block directory in your plugins directory.
Step 2: Create my-first-block.php file in this directory

<?php
/*
Plugin Name: My First Block
Description: A sample PHP rendered block, showing how to convert a shortcode to a block.
Author: ABC
Version: 0.1
License: GPLv2+
*/


function myfirst_shortocde_block() {
	// Register our block editor script.
	wp_register_script(
		'my-first-block',
		plugins_url( 'my-first-block.js', __FILE__ ),
		array( 'wp-blocks', 'wp-element', 'wp-components', 'wp-editor' )
	);

	// Register our block, and explicitly define the attributes we accept.
	register_block_type( 'my-first-block/content-block', array(
		'attributes'      => array(
			'block_title' => array(
				'type' => 'string',
			),
			'block_text' => array(
				'type' => 'string',
			)
		),
		'editor_script'   => 'my-first-block', // The script name we gave in the wp_register_script() call.
		'render_callback' => 'my_first_block_shortcode_callback',
	) );

	// Define our shortcode, too, using the same render function as the block.
	add_shortcode( 'myfirst_shortocde_block', 'my_first_block_shortcode_callback' );
}
add_action( 'init', 'myfirst_shortocde_block' );

/**
 * Our combined block and shortcode renderer.
 *
 * For more complex shortcodes, this would naturally be a much bigger function, but
 * I've kept it brief for the sake of focussing on how to use it for block rendering.
 *
 * @param array $attributes The attributes that were set on the block or shortcode.
 */
function my_first_block_shortcode_callback( $attributes ) {
	return '<h2>' . $attributes['block_title'] . '</h2><p>' . $attributes['block_text'] . '</p>';
}
?>

Step 3:Create my-first-block.js file in this directory Which I have included in wp_register_script function.

// License: GPLv2+

var el = wp.element.createElement,
	registerBlockType = wp.blocks.registerBlockType,
	ServerSideRender = wp.components.ServerSideRender,
	TextControl = wp.components.TextControl,
	InspectorControls = wp.editor.InspectorControls;

/*
 * Here's where we register the block in JavaScript.
 *
 * It's not yet possible to register a block entirely without JavaScript, but
 * that is something I'd love to see happen. This is a barebones example
 * of registering the block, and giving the basic ability to edit the block
 * attributes. (In this case, there's only one attribute, 'foo'.)
 */
registerBlockType( 'my-first-block/content-block', {
	title: 'My First Block',
	icon: 'megaphone',
	category: 'widgets',

	/*
	 * In most other blocks, you'd see an 'attributes' property being defined here.
	 * We've defined attributes in the PHP, that information is automatically sent
	 * to the block editor, so we don't need to redefine it here.
	 */
	
	
	edit: function( props ) {
		return [
			/*
			 * The ServerSideRender element uses the REST API to automatically call
			 * php_block_render() in your PHP code whenever it needs to get an updated
			 * view of the block.
			 */
			el( ServerSideRender, {
				block: 'my-first-block/content-block',
				attributes: props.attributes,
			} ),
			/*
			 * InspectorControls lets you add controls to the Block sidebar. In this case,
			 * we're adding a TextControl, which lets us edit the 'foo' attribute (which
			 * we defined in the PHP). The onChange property is a little bit of magic to tell
			 * the block editor to update the value of our 'foo' property, and to re-render
			 * the block.
			 */
			el( InspectorControls, {},
				el( TextControl, {
					label: 'block_title',
					value: props.attributes.block_title,
					onChange: ( value ) => { props.setAttributes( { block_title: value } ); },
				} ),
				
				el( TextControl, {
					label: 'block_text',
					value: props.attributes.block_text,
					onChange: ( value ) => { props.setAttributes( { block_text: value } ); },
				} )
			),
		];
	},

	// We're going to be rendering in PHP, so save() can just return null.
	save: function() {
		return null;
	},
} );

So here is your first block.


Enjoy!!