Custom Editable Gutenberg Block — https://github.com/ahmadawais/Gutenberg-Boilerplate/tree/master/block/03-block-editable

README.md

Custom Editable Gutenberg Block

This is a basic custom editable Gutenberg block. Files explained below.

• block.js — We register Custom Gutenberg block here.
• editor.css _ Block CSS for the editor.
• style.css — Block CSS for the front end.
• index.php — Enqueue block's assets for the editor and the front end.

block.js

/**
 * BLOCK: Editable
 *
 * Registering a basic editable block with Gutenberg.
 * Introduces the concept of attributes and extracting
 * them, and the default text formatting added by Editable.
 *
 * Styles:
 *        editor.css — Editor styles for the block.
 *        style.css — Frontend styles for the block.
 */
( function() {
	var __ = wp.i18n.__; // The __() for internationalization.
	var el = wp.element.createElement; // The wp.element.createElement() function to create elements.
	var Editable = wp.blocks.Editable; // Editable component of React.
	var children = wp.blocks.query.children; // The childern() function to extract child nodes from a paragraph of rich text.
	var registerBlockType = wp.blocks.registerBlockType; // The registerBlockType() to register blocks.

	/**
	 * Register Basic Block.
	 *
	 * Registers a new block provided a unique name and an object defining its
	 * behavior. Once registered, the block is made available as an option to any
	 * editor interface where blocks are implemented.
	 *
	 * @param  {string}   name     Block name.
	 * @param  {Object}   settings Block settings.
	 * @return {?WPBlock}          The block, if it has been successfully
	 *                             registered; otherwise `undefined`.
	 */
	registerBlockType( 'gb/03-block-editable', { // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
		title: __( 'Editable', 'GB' ), // Block title.
		icon: 'edit', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
		category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.

		/**
		 * Attribute matchers!
		 *
		 * Attribute matchers are used to define the strategy by which block
		 * attribute values are extracted from saved post content. They provide
		 * a mechanism to map from the saved markup to a JavaScript representation
		 * of a block.
		 *
		 * children() — Use children to extract child nodes of the matched element,
		 * returned as an array of virtual elements. This is most commonly used in
		 * combination with the Editable component.
		 *
		 * Example: Extract child nodes from a paragraph of rich text.
		 */
		attributes: {
			content: children( 'p' ), // Content: Extract child nodes from a paragraph of rich text.
		},

		// The "edit" property must be a valid function.
		edit: function( props ) {
			var content = props.attributes.content; // Content in our block.
			var focus = props.focus; // Focus — should be truthy.

			/**
			 * Update content on change.
			 */
			function onChangeContent( newContent ) {
				props.setAttributes( { content: newContent } );
			}

			// The editable content.
			return el(
				Editable, // Editable React component.
				{ // Creates <div class="wp-block-gb-03-block-editable"><p></p></div>
					tagName: 'p', // <p></p>.
					className: props.className, // The class="wp-editor-gb-03-block-editable".
					onChange: onChangeContent, // Run the onChangeContent() function onChange of content.
					value: content, // Content in our block. i.e. props.attributes.content;
					focus: focus, // Focus — should be truthy. i.e. props.focus;
					onFocus: props.setFocus
				}
			);
		},

		// The "save" property must be specified and must be a valid function.
		save: function( props ) {
			var content = props.attributes.content; // Content in our block.

			// The frontend content.
			return el( 'p',  { // <p></p>.
					className: props.className, // The class="wp-block-gb-03-block-editable".
				},
				content,
			);
		},
	} );
} )();

editor.css

/**
 * ----------------------------------------------------------------------------
 * #.# Editor CSS
 *
 * BLOCK: 03-block-editable block CSS for the editor.
 * ----------------------------------------------------------------------------
 */

.wp-block-gb-03-block-editable {
	color: #000000;
	background: azure;
	border: 0.2rem solid midnightblue;
	padding: 2rem;
}

index.php

<?php
/**
 * BLOCK: Editable
 *
 * Gutenberg Custom Block assets.
 *
 * @since   1.0.0
 * @package GB
 */

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

// Hook: Editor assets.
add_action( 'enqueue_block_editor_assets', 'gb_block_03_block_editable_editor_assets' );

/**
 * Enqueue the block's assets for the editor.
 *
 * `wp-blocks`: includes block type registration and related functions.
 * `wp-element`: includes the WordPress Element abstraction for describing the structure of your blocks.
 * `wp-i18n`: To internationalize the block's. text.
 *
 * @since 1.0.0
 */
function gb_block_03_block_editable_editor_assets() {
	// Scripts.
	wp_enqueue_script(
		'gb-block-03-block-editable', // Handle.
		plugins_url( 'block.js', __FILE__ ), // Block.js: We register the block here.
		array( 'wp-blocks', 'wp-i18n', 'wp-element' ), // Dependencies, defined above.
		filemtime( plugin_dir_path( __FILE__ ) . 'block.js' ) // filemtime — Gets file modification time.
	);

	// Styles.
	wp_enqueue_style(
		'gb-block-03-block-editable-editor', // Handle.
		plugins_url( 'editor.css', __FILE__ ), // Block editor CSS.
		array( 'wp-edit-blocks' ), // Dependency to include the CSS after it.
		filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' ) // filemtime — Gets file modification time.
	);
} // End fucntion gb_block_03_block_editable_editor_assets().


// Hook: Frontend assets.
add_action( 'enqueue_block_assets', 'gb_block_03_block_editable_block_assets' );

/**
 * Enqueue the block's assets for the frontend.
 *
 * @since 1.0.0
 */
function gb_block_03_block_editable_block_assets() {
	// Styles.
	wp_enqueue_style(
		'gb-block-03-block-editable-frontend', // Handle.
		plugins_url( 'style.css', __FILE__ ), // Block frontend CSS.
		array( 'wp-blocks' ), // Dependency to include the CSS after it.
		filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' ) // filemtime — Gets file modification time.
	);
} // End fucntion gb_block_03_block_editable_block_assets().

style.css

/**
 * ----------------------------------------------------------------------------
 * #.# Frontend CSS
 *
 * BLOCK: 03-block-editable block CSS for the frontend.
 * ----------------------------------------------------------------------------
 */

.wp-block-gb-03-block-editable {
	color: #000000;
	background: azure;
	border: 0.2rem solid midnightblue;
	padding: 2rem;
}

How can I use this via create-guten-block?

I’m getting TypeError: Cannot read property 'children' of undefined in the var children declaration any idea why?