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 functionautop
and theremovep
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.
Powering BigBox
Techniques like this and many more power the highly flexible and highly optimized BigBox WooCommerce theme.
Get BigBox Today →