Creating Gutenberg Blocks without a Build Step via HTM

If you’ve ever looked into developing a block for the new WordPress editor (Gutenberg), you’ve seen that it’s recommended to code it up with JSX. Blocks are powered by React and the JSX syntax is significantly more readable and less verbose than the ES5-compatible syntax. For example, compare this ES5 code:

function save( props ) {
    return wp.element.createElement(
        'div',
        {
            id: props.attributes.id 
        },
        props.attributes.content
    );
}Code language: JavaScript (javascript)

With this equivalent in JSX:

function save( { attributes } ) {
    return <div id={ attributes.id }>
        { attributes.content }
    </div>;
}Code language: JavaScript (javascript)

The difference is clear. However, a major downside to JSX is that it requires a build step. As the Gutenberg handbook states regarding JavaScript versions and build step:

Additionally, the ESNext code examples in the Gutenberg handbook include JSX syntax, a syntax that blends HTML and JavaScript. It makes it easier to read and write markup code, but likewise requires the build step using webpack and babel to transform into compatible code.

I believe this build step is one of the biggest sources of hesitation toward Gutenberg by the WordPress developer community. WordPress developers have historically developed PHP and JS without any build step, and this has made developing themes and plugins very accessible to newcomers. Without a build step you just edit a file and immediately reload the browser to see the changes; you can also locate and understand the source code more easily since it is not compiled and no source maps are needed. All of the tooling around JavaScript is also very intimidating and an impediment to getting started.

With this in mind, I was excited to see Jason Miller‘s announcement of HTM (Hyperscript Tagged Markup):

See more

🦖 HTM: JSX without the transpiler.

700 bytes to run in the browser,
or compile it away using babel-plugin-htm.

(works with any VDOM library!)https://t.co/KrlyiYP9Aj pic.twitter.com/qbEFfMT1Dy

— Jason Miller 🦊⚛ (@_developit) November 20, 2018

While it is possible to write JSX without a build step by loading a standalone Babel into the browser, it is very expensive to do this runtime transpilation and so it’s not recommended in production. In contrast, HTM is small and fast:

It’s built using Tagged Templates and the browser’s HTML parser. Works in all modern browsers.

So HTM offers a third way to write blocks beyond ES5 and JSX. As with ES5 it doesn’t require a build step, while like JSX it has a much more pleasant syntax. Compare the JSX above with the following HTM:

function save( { attributes } ) {
    return html`<div id=${ attributes.id }>
        ${ attributes.content }
    </div>`;
}Code language: JavaScript (javascript)

I’ve given it a try in my syntax-highlighting Code block which extends the core Code block (forked from mkaz/code-syntax-block). Take a look at code-syntax-block.js for the editor JS file which is enqueued straight into WordPress without any build step.

P.S. Do you realize that you just read an AMP page?