Common JavaScript Pattern (for Gutenberg Block)

This tutorial assumes you know the basic of JavaScript like function, array, and object.

Creating a custom Gutenberg block seems intimidating at first. But it’s really not that hard after knowing how it works.

The first step to that is knowing the JavaScript syntaxes that is often used in block development.

1. Self Invoking Function

(function() {
  
  // all vars and functions declared here can't be used outside

} )();

This is a function that runs itself. Mainly used as a wrapper to scope the current code. So any vars or functions declared here won’t spill elsewhere.

You can pass in variables and set an alias to them:

(function( b, be ) {

  // You can call `wp.blocks` as `b`

} )( wp.blocks, wp.blockEditor );

2. Use Strict

(function() { 'use strict';
  // ...
} )();

By adding this simple string, the browser will treat your script differently.

There is no longer a silent JS error. You will get a proper error message shown in the Developer Console.

3. Let and Const

These are 2 new types of variable to replace var:

const means the value of the variable will NOT change.
let means the value of the variable will be changed.

This puts var in a weird spot since it can mean both. By using let or const, you let other developer know whether you can or cannot change the value.

let myLet = 'this value will change';

const MY_CONST = 'this value will not and cannot change';

var myVar = 'who knows what will happen to this';

4. Arrow Function (`=>`)

Simplifies inline-function and prevents the value of this to be overridden.

// Old inline function:

let sumNumber = function( num1, num2 ) {
  return num1 + num2;
};

// New arrow function:

sumNumber = ( num1, num2 ) => {
  return num1 + num2;
};

// If the function only has 1 line and it's a return statement,
// You can simplify it even further:

sumNumber = ( num1, num2 ) => num1 + num2;

If the function only has 1 parameter, the parentheses are optional:

let timesTwo = ( num ) => num * 2;

// parentheses can be removed:
timesTwo = num => num * 2;

// But I personally prefer to be more verbose like this:
timesTwo = ( num ) => { return num * 2; }

5. Destructuring Assignment

Assigns part of an Object into variables.

let myObject= {
  item1: { ... },
  item2: { ... },
  item3: { ... }
};

// (1) This is the old way of assigning object into variable:
var item1 = myObject.item1;
var item2 = myObject.item2;

// (2) This is the new syntax called Destructuring assignment:
const { item1, item2 } = myObject;

Both do the exact same thing, but the latter is cleaner.

6. Spread Operator (`...`)

Merges an array into another array.

let array1 = [ 'text2', 'text3' ];

let array2 = [ 'text1', ...array1, 'text4' ]; // using triple dot

console.log( array2 ); // [ 'text1', 'text2', 'text3 , 'text4' ]

7. Array Map

Loops each item of an array and modifies it. This is an inline version of using For loop.

let nums = [ 1, 2, 3, 4, 5 ];

let numsSquared = nums.map( (n) => {
  return n * n;
} );

console.log( numsSquared ); // [ 1, 4, 9, 16, 25 ]

Since Array Map returns an array, you can combine it with spread operator:

let nums = [ 1, 2, 3, 4, 5 ];

let nums2 = [
  0,
  ...nums.map( (n) => { return n * n; } ),
  36,
  49,
  64,
];

console.log( nums2 ); // [ 0, 1, 4, 9, 16, 25, 36, 49, 64 ];

8. A bit of React

Gutenberg uses JS Library called React. It can create an HTML element with this function:

wp.element.createElement( tag, attributes, children )

For example, let’s make this markup with React:

<div class="my-div">
  <h1> Hello World </h1>
  <p style="background-color: #ff00ee"> Lorem ipsum dolor sit amet </p>
</div>

const el = wp.element.createElement; // create shortcut

el( 'div', { className: 'my-div' }, [
  el( 'h1', {}, 'Hello World' )
  el( 'p', { style: { backgroundColor: '#ff00ee' } }, 'Lorem ipsum dolor sit amet' )
] );

Conclusion

That’s all folks! The next step is to read our past tutorial about creating a custom Gutenberg block. I should have started with this one, but better late than never.