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:
With this equivalent in JSX:
With this in mind, I was excited to see Jason Miller‘s announcement of HTM (Hyperscript Tagged Markup):
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:
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?