The new block editor for WordPress has been with us for a while now. It is possible that you keep avoiding using it, but if you are a developer you will not have another option that to give it a chance and learn the technologies behind it.
I know, you can always choose to use alternatives such as ACF Blocks and keep working inside your comfort zone. But… wouldn’t it be great to learn new things? Developing your own blocks for the new editor natively will always be more efficient.
The programming language of the future of WordPress (and its present, whether you want it or not) is JavaScript. The problem is that since Gutenberg came into our lives, the learning curve for PHP programmers has not been easy. But this is changing…
A few days ago we presented our boilerplate to develop plugins for the new WordPress editor with JavaScript. Having an example like this, simple and well-documented, may help those brave developers (like you) who accept the challenge and want to start feeling comfortable with all these new technologies.
WordPress knows that it needs to keep its developer community alive to continue dominating the market. And for this they need to help it adapt to the new technologies withing the JavaScript ecosystem. A very important step in this line is the package @wordpress/scripts, also known as wp-scripts.
Let’s see what it is and how we can use it in our projects.
Nelio Forms
A fantastic contact plugin using the block editor. In its simplicity lies the true power of this plugin. I love it, very versatile and it worked perfectly for me.
Wajari Velasquez
The @wordpress/scripts package to build projects in WordPress
One thing you may find surprising if you are a JavaScript newbie is that there are different versions of the language you can use. In each new version, new constructions are added that allow to use more modern syntax. Browsers might not implement the newer versions of JavaScript, but you can use them already. Here’s how.
In order to make the modern JavaScript code work, you need to transpile it. This means that you have to pass your code through a translation process, converting it into the JavaScript syntax today’s browsers can interpret.
In the same way, if you use frameworks like React to develop components of your interface, you can write these components with vanilla JavaScript or use a more modern and simple syntax, like JSX.
The configuration process of our projects can be complex, because apart from the JavaScript source code we need a transpiler and a bundler to generate the final JavaScript file that we will end up enqueuing in WordPress (as always, using the PHP wp_enqueue_script function).
Luckily, we now have the package @wordpress/scripts to deal with all this. The first step is to install it using the following npm command that you will have to execute inside the root folder of your project:
npm install @wordpress/scripts --save-devThis command will install the package and all its dependencies without you having to worry about anything, and it will put everything inside the node_modules folder. In addition, with the --save-dev option we make sure that the package appears as a development dependency of the project, as it will be added to package.json.
In order to invoke the scripts included in the package you need to have the following info (at least) in your project’s package.json:
Note that within the scripts attribute of this JSON file we have two commands: build and start. To launch any of them we must execute npm run build or npm run start in a terminal.
The first command calls wp-scripts build, which is responsible for creating the production JavaScript code. Note that this command expects that the JavaScript file of your project be in src/index.js and will generate the build in build/index.js.
On the other hand, the wp-scripts start command is used during the development of our JavaScript code since it listens to the changes we are making in the src/index.js file and regenerates the build/index.js file incrementally after every change.
If you wanted to do tests and start developing code for Gutenberg but everything was too complex, now with wp-scripts you can create your JavaScript files quickly and without worrying about additional configurations.
Write JavaScript with modern syntax using JSX and the functions you’ll find in the Developer’s Handbook of the WordPress block editor, transpile and generate the final JavaScript with the help of the package wp-scripts, and finally enqueue the resulting JavaScript in your WordPress to test it.
Furthermore, the package @wordpress/scripts is officially released by the WordPress team. Using this package is a success guarantee, as the same developers who are responsible of developing the WordPress core and the block editor are the ones who created it.
What used to take hours of research in dependency management is now ready and simple to use via a simple command. Go ahead and try the package @wordpress/scripts and you’ll see that everything is simpler than you think. Tell us your experience by leaving us a comment below!
Featured image by Thao Le Hoang on Unsplash.
Leave a Reply