Tips and tricks

So I have struggled with this for a long time now.

First you need the coresponding libraries

npm i -g @babel/core@^7.2.2
npm i -g @babel/preset-env@^7.3.1
npm i -g @babel/preset-react@^7.0.0
npm i -g autoprefixer@^9.5.0
npm i -g babel-loader@^8.0.5
npm i -g css-loader
npm i -g extract-text-webpack-plugin@next
npm i -g generate-template-files
npm i -g mini-css-extract-plugin
npm i -g node-sass
npm i -g postcss-loader
npm i -g raw-loader
npm i -g sass-loader
npm i -g style-loader
npm i -g webpack@^4.29.0
npm i -g webpack-cli@^3.2.1

So I have struggled with this for a long time now.

The idea is to have your package.json, webpack.config.js, .babelrc files etc and execute

npm link @babel/core
npm link @babel/preset-env
npm link @babel/preset-react
npm link autoprefixer
npm link babel-loader
npm link css-loader
npm link extract-text-webpack-plugin
npm link generate-template-files
npm link mini-css-extract-plugin
npm link node-sass
npm link postcss-loader
npm link raw-loader
npm link sass-loader
npm link style-loader
npm link webpack
npm link webpack-cli

Of course packages and version would have to match the webpack .. babel you are going to use

Our webpack for version 3

const path = require( 'path' );
const webpack = require( 'webpack' );
const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );

// Set different CSS extraction for editor only and common block styles
const blockCSSPlugin = new ExtractTextPlugin( {
  filename: './dist/block_player.css',
} );

// Configuration for the ExtractTextPlugin.
const extractConfig = {
  use: [
    { loader: 'raw-loader' },
    {
      loader: 'postcss-loader',
      options: {
        plugins: [ require( 'autoprefixer' ) ],
      },
    },
    {
      loader: 'sass-loader',
      query: {
        outputStyle:
          'production' === process.env.NODE_ENV ? 'compressed' : 'nested',
      },
    },
  ],
};

module.exports = {
  entry: {
    './dist/block_player' : './gutenberg/block_index.js',
  },
  output: {
    path: path.resolve( __dirname ),
    filename: '[name].js',
  },
  watch: true,
  devtool: 'cheap-eval-source-map',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /block_player\.s?css$/,
        use: blockCSSPlugin.extract( extractConfig ),
      },
    ],
  },
  plugins: [
    blockCSSPlugin
  ],
};

install script

npm i -g autoprefixer
npm i -g babel-core^6.25.0
npm i -g babel-eslint
npm i -g babel-loader
npm i -g babel-plugin-transform-object-rest-spread
npm i -g babel-plugin-transform-react-jsx
npm i -g babel-plugin-transform-runtime
npm i -g babel-preset-env
npm i -g babel-runtime
npm i -g cross-env
npm i -g css-loader
npm i -g extract-text-webpack-plugin
npm i -g node-sass
npm i -g postcss-loader
npm i -g raw-loader
npm i -g sass-loader
npm i -g style-loader
npm i -g webpack^3.12.0

remember to have your attributes in three places:

• in javascript registerBlockType

attributes: window.dzsvg_gutenberg_player_options_for_js_init

• in php register_block_type

'attributes'      => $atts_player,