Setup for Gutenberg Block

Create a folder named guten-awesome in /wp-content/plugins/. Inside guten-awesome folder creates a starting file for our plugin. It can be any name. Which file has plugin header, this would be the main file. For simplicity, we call it plugin.php

In plugin.php file, define required header comments. For quick, let it

/**
 * Plugin Name: Awesome Block
 */

Assume you will not forget about starting PHP tag.

Let’s do some BIG funny work. We will do it only one time per project.

Open command tools at guten-awesome folder. Because we need to use some React tech, so we need some packages.

Let’s initialize npm at root (/wp-content/plugins/guten-awesome/) via terminal command

npm init -f

Then, install packages.

We need only a package (npx) globally installed on our machine. Run this command to install npx. For my Ubuntu, I need to add sudo

npm i npx -g

Then, we need 12 packages as local dependency. 

  1. webpack
  2. webpack-cli
  3. node-sass
  4. sass-loader
  5. css-loader
  6. mini-css-extract-plugin
  7. @babel/core
  8. @babel/cli
  9. babel-plugin-add-module-exports
  10. @babel/plugin-transform-react-jsx
  11. babel-loader
  12. @babel/preset-env

Run this command to install these packages as devDependencies

npm i webpack webpack-cli node-sass sass-loader css-loader mini-css-extract-plugin @babel/core @babel/cli babel-plugin-add-module-exports babel-plugin-transform-react-jsx @babel/plugin-transform-react-jsx babel-loader @babel/preset-env --save-dev

After installing these packages, create wepack configuration file for our custom need. webpack.config.js. Let’s open this file and define our logic.
We need mainly two kinds of tasks.

  1. Compile SCSS files that will render browser-friendly CSS files.
  2. Compile JS files that will render ES6 code to browser-friendly ES5 code.

Let’s bake the tasks.

First, define debug variable, write

var debug = process.env.NODE_ENV !== 'production';

Here, the debug variable is default set as development in stage mode. When we go to production, it will be produced.

Then, define ExtractText class. It uses extract-text-webpack-plugin package we installed.

var ExtractText = require('mini-css-extract-plugin');

Then, define two new variables,

var extractEditorSCSS = new ExtractText({
 filename: './blocks.editor.build.css'
});
var extractBlockSCSS = new ExtractText({
  filename: './blocks.style.build.css'
});

extractEditorSCSS and extractBlockSCSS  are objects of ExtractText ( which define extract-text-webpack-plugin package ) class. ExtractText class receive an object of filename, which will be extracted.

Then, define the plugins array. It contains two objects, which were previously defined.

var plugins = [ extractEditorSCSS, extractBlockSCSS ];

Finally, define main functionality which is, module.exports. It asks webpack, Hello webpack, Run with this objects parameter.

module.exports = {
    context: __dirname,
    devtool: debug ? 'inline-sourcemap' : null,
    mode: debug ? 'development' : 'production',
    entry: './blocks/src/blocks.js',
    output: {
        path: __dirname + '/blocks/dist/',
        filename: 'blocks.build.js'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader'
            }
          ]
        },
        {
          test: /editor\.scss$/,
          exclude: /node_modules/,
          use: {
          	      loader: ExtractText.loader
           }
        },
        {
            test: /style\.scss$/,
            exclude: /node_modules/,
            use: {
          	      loader: ExtractText.loader
            }
        }
      ]
    },
    plugins: plugins
  };

Here, we will ask webpack some instructions.

context: Root of our project. __dirname does this.

devtool: If debug is true, print inline-source map, otherwise do not print anything.

mode: If debug is true, then enable development mode, otherwise enable the production mode.

entry: Starting a file of our project.

output: This parameter takes an object. Its path, define the files and filename define the name of output JS file. These files will be compiled by module rules, which will be defined next.

module: This parameter takes the rules of an array. 

Rule 1. Compile .js files in the project, exclude files in node_modules folder. It will use babel-loader package which was installed.

Rule 2: Compile all .scss files of editor folder in the dist folder. Exclude node_module’s .scss files. And use the loader method of mini-css-extract-plugin.

Rule 3 is the same as Rule 2, this time it compiles style folder’s files.

Finally, define the plugins parameter of module.exports. It takes previously declared plugins array.

Really lots of code. Let’s create some files and tests.

Create a babel configuration file .babelrc and paste following code

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["transform-react-jsx", {
            "pragma": "wp.element.createElement"
        }]
    ]
}

Create some folders and files in the following format.

blocks

— dist

— src

—- blocks.js

—- common.scss

—- block

—— block.js

—— editor.scss

—— style.scss

Run following command in the plugin root

npx webpack

It will create blocks.build.js. So the code we wrote is working.

Enough for today.

Leave a Reply

Your email address will not be published. Required fields are marked *