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:
- Part 1: Development Environment
- Part 2: WordPress Plugin
- Part 3: Anatomy of a Block
- Part 4: Block Attributes
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