.browserlistrc

## .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" ]
}