BLOG META

How to develop a Gutenberg plugin without node_modules

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,
{"type":"main_options","images_arr":"'#ffffff'","enable_ajax":"off","soundcloud_apikey":"","bg_isparallax":"off","bg_slideshow_time":"0","bg_transition":"slidedown","site_url":"http:\/\/digitalzoomstudio.net","theme_url":"http:\/\/digitalzoomstudio.net\/wp-content\/themes\/qucreative\/","blur_ammount":"26","width_column":"50","width_section_bg":"","width_gap":"30","border_width":"0","border_color":"#ffffff","translate_cancel_comment":"Cancel reply","translate_leave_a_comment":"Leave a comment","translate_leave_a_comment_to":"Leave a comment to","is_customize_preview":"off","width_blur_margin":"30","gallery_w_thumbs_autoplay_videos":"off","enable_native_scrollbar":"on","content_enviroment_opacity":"30","menu_enviroment_opacity":"70"}
{"type":"darkfull"}