Basic Gutenberg Custom Block with ESNext, Webpack, BabelJS— https://github.com/ahmadawais/Gutenberg-Boilerplate/tree/master/block/02-basic-esnext

.babelrc

{
	"presets": [
		[ "env", {
			"modules": false,
			"targets": {
				"browsers": [
					"last 2 Chrome versions",
					"last 2 Firefox versions",
					"last 2 Safari versions",
					"last 2 iOS versions",
					"last 1 Android version",
					"last 1 ChromeAndroid version",
					"ie 11"
				]
			}
		} ]
	],
	"plugins": [
		[ "transform-react-jsx", {
			"pragma": "wp.element.createElement"
		} ]
	]
}

.gitignore

# Packages #
############
*.7z
*.dmg
*.gz
*.bz2
*.iso
*.jar
*.rar
*.tar
*.zip
*.tgz
*.map

# Logs and databases #
######################
*.log
*.sql

# OS generated files #
######################
**.DS_Store*
ehthumbs.db
Icon?
Thumbs.db
._*

# Vim generated files #
######################
*.un~

# SASS #
##########
**/.sass-cache
**/.sass-cache/*
**/.map

# Composer #
##########
vendors/composer/
!assets/js/vendor/
wpcs/
composer.lock

# Bower #
##########
assets/bower_components/*

# Codekit #
##########
/codekit-config.json
*.codekit
**.codekit-cache/*

# NPM #
##########
node_modules

# Compiled Files and Build Dirs #
##########
/README.html
/build/

# PhpStrom Project Files #
.idea/
library/vendors/composer
assets/img/.DS_Store
assets/sass/HTML
assets/sass/Rails
HTML
Rails

README.md

Custom Gutenberg Block

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

• block.js — We register Custom Gutenberg block here.
• block.build.js — Built file from block.js via NPM Script and Webpack.
• 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.
• .babelrc — Babel custom configuration.
• .gitignore — Git ignore file to ignore node_modules and such other files.
• package.json & package-lock.json — NPM related file for holding NPM related metadata and build/dev NPM scripts.
• webpack.config.js — Webpack configuration file.

Getting Started!

Read the files explained above. All of the files are heavily inline documented. All you have to do is following:

• Open up your favorite terminal app.
• Makes sure NodeJS and NPM are installed by running node -v or npm -v to check their versions.
• Access this directory cd /path/to/gutenberg-boilerplate/block/02-basic-esnext/
• Install node dependencies by running node install or sudo node install
• For building the block.js file into block.build.js you can use run npm scripts.
• To watch and build run npm run dev
• To build for production run npm run build

block.build.js

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, {
/******/ 				configurable: false,
/******/ 				enumerable: true,
/******/ 				get: getter
/******/ 			});
/******/ 		}
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {

/**
 * BLOCK: Basic with ESNext
 *
 * Registering a basic block with Gutenberg.
 * Simple block, renders and saves the same content without any interactivity.
 *
 * Using inline styles - no external stylesheet needed.  Not recommended!
 * because all of these styles will appear in `post_content`.
 */

var __ = wp.i18n.__;
var registerBlockType = wp.blocks.registerBlockType;

/**
 * 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/02-basic-esnext', { // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
  title: __('Basic ESNext', 'GB'), // Block title.
  icon: 'shield', // 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.

  // The "edit" property must be a valid function.
  edit: function edit(props) {
    // Creates a <p class='wp-block-gb-01-basic'></p>.
    return wp.element.createElement(
      'p',
      { className: props.className },
      'Hello World! \u2014 from the editor (02 Basic Block ESNext).'
    );
  },

  // The "save" property must be specified and must be a valid function.
  save: function save(props) {
    return wp.element.createElement(
      'p',
      { className: props.className },
      'Hello World! \u2014 from the frontend (02 Basic Block ESNext).'
    );
  }
});

/***/ })
/******/ ]);

block.js

/**
 * BLOCK: Basic with ESNext
 *
 * Registering a basic block with Gutenberg.
 * Simple block, renders and saves the same content without any interactivity.
 *
 * Using inline styles - no external stylesheet needed.  Not recommended!
 * because all of these styles will appear in `post_content`.
 */

const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.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/02-basic-esnext', { // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
	title: __( 'Basic ESNext', 'GB' ), // Block title.
	icon: 'shield', // 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.

	// The "edit" property must be a valid function.
	edit: function( props ) {
		// Creates a <p class='wp-block-gb-01-basic'></p>.
		return (
			<p className={ props.className }>Hello World! — from the editor (02 Basic Block ESNext).</p>
		);
	},

	// The "save" property must be specified and must be a valid function.
	save: function( props ) {
		return (
			<p className={ props.className }>Hello World! — from the frontend (02 Basic Block ESNext).</p>
		);
	},
} );

editor.css

/**
 * ----------------------------------------------------------------------------
 * #.# Editor CSS
 *
 * BLOCK: 02-basic-esnext block CSS for the editor.
 * ----------------------------------------------------------------------------
 */

.wp-block-gb-02-basic-esnext {
	color: #000000;
	background: #BADA55;
	border: 0.2rem solid green;
	padding: 2rem;
}

index.php

<?php
/**
 * BLOCK: Basic ESNext
 *
 * 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_02_basic_esnext_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_02_basic_esnext_editor_assets() {
	// Scripts.
	wp_enqueue_script(
		'gb-block-02-basic-esnext', // Handle.
		plugins_url( 'block.build.js', __FILE__ ), // Block.build.js: We register the block here. Built with Webpack.
		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-02-basic-esnext-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_02_basic_esnext_editor_assets().


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

/**
 * Enqueue the block's assets for the frontend.
 *
 * @since 1.0.0
 */
function gb_block_02_basic_esnext_block_assets() {
	// Styles.
	wp_enqueue_style(
		'gb-block-02-basic-esnext-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_02_basic_esnext_block_assets().

package.json

{
  "name": "02-basic-esnext",
  "version": "1.0.0",
  "main": "block.js",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-env": "^1.6.0",
    "cross-env": "^5.0.1",
    "webpack": "^3.1.0"
  },
  "scripts": {
    "build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
    "dev": "cross-env BABEL_ENV=default webpack --watch"
  }
}

style.css

/**
 * ----------------------------------------------------------------------------
 * #.# Frontend CSS
 *
 * BLOCK: 02-basic-esnext block CSS for the frontend.
 * ----------------------------------------------------------------------------
 */

.wp-block-gb-02-basic-esnext {
	color: #000000;
	background: lightblue;
	border: 0.2rem solid blue;
	padding: 2rem;
}

webpack.config.js

/**
 * Webpack Configuration
 *
 * Block: `02-basic-esnext` — The Webpack config file.
 *
 * Working of a Webpack can be very simple or complex. This is an intenally simple
 * build configuration.
 *
 * Webpack basics — If you are new the Webpack here's all you need to know:
 *     1. Webpack is a module bundler. It bundles different JS modules together.
 *     2. It needs and entry point and an ouput to process file(s) and bundle them.
 *     3. By default it only understands common JavaScript but you can make it
 *        understand other formats by way of adding a Webpack loader.
 *     4. In the file below you will find an entry point, an ouput, and a babel-loader
 *        that tests all .js files excluding the ones in node_modules to process the
 *        ESNext and make it compatible with older browsers i.e. it converts the
 *        ESNext (new standards of JavaScript) into old JavaScript through a loader
 *        by Babel.
 *
 * Instructions: How to build or develop with this Webpack config:
 *     1. In the command line browse the folder `02-basic-esnext` where
 *        this `webpack.config.js` file is present.
 *     2. Run the `npm run dev` or `npm run build` for development or
 *        production respectively.
 *     3. To read what these NPM Scripts do, read the `package.json` file.
 *
 * @since 1.0.0
 */

module.exports = {
	entry: './block.js', // Webpack
	output: {
		path: __dirname,
		filename: 'block.build.js',
	},
	module: {
		loaders: [
			{
				test: /.js$/,
				loader: 'babel-loader',
				exclude: /node_modules/,
			},
		],
	},
};