Gutenberg has brought many improvements to WordPress development and build processes — which is great. One of my favorite parts of this is the publishing of 20+ node packages to help aid in and help modularize development. There are two that I’ve been enjoying using lately.

domReady

npm install @wordpress/dom-ready --save-dev

domReady takes the place of the oft-used jQuery( document ).ready( function() { } ); wrapper. It is a simple package to execute a function once the DOM is fully loaded. It doesn’t require a framework, is just a few lines, and works every time.

I’m trying to get more used to writing vanilla Javascript — especially when it comes to manipulating the DOM so this is a great alternative.

babel-preset-default

npm install @wordpress/babel-preset-default --save-dev

babel-preset-default is another great package that makes development faster. It takes place of setting up multiple Babel plugins and lets your theme or plugin automatically be setup in the same way as Gutenberg. When using the preset Babel configuration is as simple as a few lines in package.json

This will automatically set you up with WordPress’ browser support requirements, babel-plugin-transform-object-rest-spread, babel-plugin-transform-async-generator-functions, JSX pragma, and babel-plugin-transform-runtime making it super simple to start writing nice Javascript.

It should be noted that the @wordpress/default preset will automatically use wp.element.createElement as the JSX pragma which is only available when Gutenberg is activated. If you need to use standard React JSX transforms you can do so with the following:

Other Packages

Some other interesting packages that I haven’t had a chance to use yet include:

• a11y – Collection of JS modules for enhancing accessibility.
• autop – JavaScript port of WordPress’s automatic paragraph function autop and the removep reverse behavior.
• i18n – Internationalization utilities for client-side localization.
• url – A collection of utilities to manipulate URLs.
• wordcount – A utility to count words.

It’s a great time to be working on new projects in WordPress that can take advantage of these modern (very modern in the WordPress ecosystem) development techniques.