Get With Gutenberg - Getting Started with Block Development in ES.Next • https://getwithgutenberg.com/2019/03/getting-started-with-block-development-in-es-next/

.browserlistrc

> 1%
ie >= 11
last 1 Android versions
last 1 ChromeAndroid versions
last 2 Chrome versions
last 2 Firefox versions
last 2 Safari versions
last 2 iOS versions
last 2 Edge versions
last 2 Opera versions

01.sh

# Create our plugin folder and move into it
mkdir wp-content/plugins/esnext-starter
cd wp-content/plugins/esnext-starter

# Initialize our NPM package.json file.
npm init -y

02.sh

# Install webpack
npm install --save-dev webpack webpack-cli

# Install Babel
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

# Install utility for using environment variables across platforms.
npm install --save-dev cross-env

05.js

const externals = {
    wp: 'wp',
    react: 'React',
    'react-dom': 'ReactDOM',
};

const isProduction = process.env.NODE_ENV === 'production';
const mode = isProduction ? 'production' : 'development';

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

06.js

const externals = {
    wp: 'wp',
    react: 'React',
    'react-dom': 'ReactDOM',
};

07.js

const isProduction = process.env.NODE_ENV === 'production';
const mode = isProduction ? 'production' : 'development';

08.js

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

09.json

"scripts": {
    "build": "cross-env NODE_ENV=production webpack",
    "dev": "cross-env webpack --watch"
}

10.php

<?php
function gwg_block_assets() {
    wp_enqueue_style(
        'gwg-style-css',
        plugin_dir_url( __FILE__ ) . 'style.css'
    );
}
add_action( 'enqueue_block_assets', 'gwg_block_assets' );

11.php

<?php
function gwg_editor_assets() {
    wp_enqueue_script(
        'gwg-block-js',
        plugin_dir_url( __FILE__ ) . 'block.build.js',
        [],
        false,
        true // Enqueue script in the footer.
    );

    wp_enqueue_style(
        'gwg-editor-css',
        plugin_dir_url( __FILE__ ) . 'editor.css',
    );
}
add_action( 'enqueue_block_editor_assets', 'gwg_editor_assets' );

12.js

const { registerBlockType } = wp.blocks;

13.js

registerBlockType('gwg/esnext-starter', {
    title: 'Get With Gutenberg - ES.Next Starter',
    category: 'common',

    edit(props) {
        return <p className{props.className}>Hello editor.</p>
    },

    save(props) {
        return <p className{props.className}>Hello saved content.</p>
    },
});

babelrc.json

{
    "presets": [ "@babel/preset-env", "@babel/preset-react" ]
}