Build a Block Series – Part 5: ES6+ Syntax

The fifth part of my series walking through building a Gutenberg block for the WordPress editor. This part takes a break from new block development to explain some features of ES6+ syntax used, specifically Destructuring assignments, Arrow functions, and Imports.

Previous screencasts:

ES6 Syntax

Background: The JavaScript language continues to evolve, the syntax used to write JavaScript code is not fixed but changes over time. Ecma International is the organization that sets the standard for the language, officially called ECMAScript. A new standard for JavaScript is published each year, the 6th edition published in 2015 is often referred to as ES6. Our usage would more appropriately be ESNext referring to the latest standard. Our build step in Part 1 converts this latest syntax of JavaScript to a version understood by browsers.

Destructuring Assignments

The destructuring assignment syntax allows you to pull apart arrays, or properties from objects into their own variable.

For the object const obj = { foo: "bar" }

Creating and assigning a new variable foo can be done in a single step: const { foo } = obj;

The curly brackets on the left side tells JavaScript to inspect the object obj for the property foo and assign its value to the new variable of the same name.

Arrow Functions

Arrow functions provide a shorter syntax for defining a function; this is such a common task in JavaScript that having a syntax a bit shorter is quite helpful.

Before you might define a function like:

const f = function( param ) { console.log( param ); }

Using arrow function, you can define the same using:

const g = ( param ) => { console.log( param ); }

Or even shorter, if the function is only a single-line you can omit the curly braces:

const g2 = ( param ) => console.log( param );

I forgot to cover the following in the video.

In the examples above, using console.log we aren’t too concerned about the return values. However, when using arrow functions in this way, the return value is set whatever the line returns.

For example, our save function could be shortened from:

save: ( { attributes } ) => {
	return (
		<div className="theurl">{ attributes.url }</div>
	);
}

To:

save: ( { attributes } ) => (
	<div className="theurl">{ attributes.url }</div>
);

There are even more ways to shorten code, but you don’t want to take it too far and make it harder to read what is going on.

Imports

The import statement is used to import variables or functions from an exported file. You can use destructuring on imports, for example:

import { TextControl } from '@wordpress/components';

This will look in the @wordpress/components package for the exported TextControl variable.

A package or file can also set a default export, this is imported without using the curly brackets. For example

const edit = ( { attributes, setAttributes } ) => {
	return (
		<div>
			<TextControl
				label="URL"
				value={ attributes.url }
				onChange={ ... }
			/>
		</div>
	);
};

export default edit;

To import, you would use:

import edit from './edit';

registerBlockType( 'mkaz/qrcode-block', {
	title: 'QRCode Block',
	icon: 'visibility',
	category: 'widgets',
	attributes: {
		url: {
			type: 'string',
			source: 'text',
			selector: '.theurl',
		},
	},
	edit,
	save: ( { attributes } ) => {
		return (
			<div> ... </div>
		);
	}
});

Note, you can also shorten edit: edit to just edit as shown above. JavaScript will automatically assign the property edit to the value of edit. This is another form of destructuring.

Summary

It helps to become familiar with the ESNext syntax and the common shorter forms. It will give you a greater understanding of reading code examples and what is going on.

Here are a few more resources that may help