A beginner’s guide to JavaScript in Gutenberg
If you have been following the discussions in the WordPress hemisphere lately, you must already be aware of Gutenberg. This new revolutionary editor aims to redefine content management for WP users. But what exactly is Gutenberg all about? More importantly, where does JavaScript fit in? If you are looking for a guide to JavaScript in Gutenberg, you have come to the right place.
This article will try and answer the questions mentioned above and get you on the right track. So without wasting any more time, let’s get started!
What is Gutenberg?
Just in case you haven’t had a chance to read up on Gutenberg yet, let’s quickly brush up our knowledge about it.
For years, WordPress has relied on its default TinyMCE editor for managing and adding content. While the editor is functional and has worked well for many years, times have evolved. New solutions such as Ghost and Medium now offer a cleaner, leaner and overall more nimble content editing experience.
Gutenberg is WordPress’ new methodology of editing and managing content. In its most basic sense, Gutenberg gives you total control over the UI of your content. You can simply click any aspect of the content and edit it live.
Gutenberg development has been happening over on GitHub. Once it is ready, Gutenberg will finds its way into WordPress. However, if you wish to give it a spin without actually trying it on a live site, you can check out the demo here.
We’ve also written a very handy Beginners Guide to Gutenberg post that covers the new editor in more detail.
Gutenberg Blocks
Almost everything in Gutenberg can be managed by means of a block. In WordPress, you might have used custom fields, custom post types, shortcodes, and other formatting methods to edit specialized content such as callouts, carousel, text highlights, etc. Gutenberg blocks can do just that without having to rely on external plugins or custom shortcodes.
With a collection of assorted blocks, you can easily format and edit your content the way you wish to!
Considering the fact that Gutenberg is the future of WordPress, many developers and users are spending time familiarizing with it. Since Gutenberg relies heavily on JavaScript, it is a good idea to get accustomed with JS too.
Feeling lost already? Fear not! Let’s answer some basic questions to get started:
- Why JavaScript?
- What should you know about JS?
- Where can you learn more?
Following that, we will be discussing Gutenberg blocks in more detail in subsequent posts on this blog.
Why JavaScript in Gutenberg?
As you probably noticed, there has been a lot of discussion about JavaScript lately. Yet, the big question remains: what is so special about JavaScript? Also, why are we relying on JavaScript for Gutenberg? Was PHP not good enough?
WordPress has been written in PHP for the most part, and this is not going to change anytime soon. In essence, JavaScript is not here to replace PHP, per say.
However, JS has many advantages of its own. In fact, a good part of Gutenberg’s awesomeness comes from the fact that JavaScript plays a big role in Gutenberg.
To begin with, Gutenberg renders its UI on the client-side as a single page application. In other words, you can picturize WordPress as a classic application built with PHP, whereas Gutenberg is a single page app built atop the WordPress admin panel. As a result, when using Gutenberg, your web browser does not need to reload the entire page for every change that you make (in comparison to the traditional WordPress admin panel). This provides a more fluid and easy to use workflow and overall better editing experience.
Transpiling in JS
Also, we are aware that WordPress is now recommended using PHP 7.x to avoid security issues that might arise with older versions of PHP. However, legacy PHP 5.3+ support is still maintained to prevent things from breaking, just in case a user’s setup does not have the latest version of PHP yet. This means things need to be written in legacy compatible code.
But with JavaScript, there is no requirement to do this kind of extra work. JS supports transpiling. This is a type of code compiling that takes code written in one version of the language and makes it ready for another. Thus, you can write JS code for the latest version and transpile it to make it work with older legacy versions. Easy, right?
JavaScript in Gutenberg is making good use of transpiling to be both backwards compatible and also stick to the latest coding practices.
Things You Should Know
So, now we have seen what benefits JavaScript in Gutenberg can offer us. Now, let’s take some time to learn a little more about how things work.
React in WordPress and Gutenberg
The world of JavaScript is different from PHP. To begin with, JS comes with a plethora of frameworks that you can choose from. Angular, React, Vue.js and many others are rather popular options out there.
For the heavy lifting, Gutenberg relies on React. This selection has not been without its share of controversy though — with license issues to even suggestions of a framework agnostic approach, quite a lot has happened. However, for now, React is here to stay.
As a JS framework, React has been around for a long while and is backed by Facebook. Thus, React is no minnow when it comes to the world of coding. But the noteworthy thing at this stage is: you do not need to learn React to work with Gutenberg.
If you are looking to building blocks for Gutenberg, learning React is entirely optional. You can use any other JS framework of your choice — Vue.js or Angular or likewise, or even go sans a framework. This is the good part about JavaScript in Gutenberg; there is no requirement on the developer to work according to a specific set of rules.
The Role of npm and Packages
npm is an actively maintained repository of packages that you can use in your JS projects. It is comparable to the WordPress plugin repository wherein you can search for and download the plugins of your choice.
However, npm does not always require you to download a package. You can use a package without downloading it via a command line interface, or share your existing code with other users as packages. Wish to modify a package or use it as it is in your project? Yes, npm supports that too.
It is a good idea to refer to npm documentation and start working with it from the beginning. npm is where all the JS developers collaborate and help each other, so if you are looking for a thriving community, make sure you know your way around npm.
Where Can You Learn JavaScript?
Now that we have established the important role of JavaScript in Gutenberg, where exactly can we learn JS?
The options are plenty. You can start from online resources, such as:
The above are just some of the useful resources for learning JavaScript for Gutenberg. In the subsequent posts on this blog, we will be discussing the anatomy of a Gutenberg block as well as how to get started with building blocks for our projects. As such, it is a good idea to brush up some basic JavaScript skills in order to get the most out of Gutenberg development.
Thank you! I don’t know if this is the right place to ask, but do you know of any resources about how to render **dynamic** blocks inside the editor (backend)?
I spend a long time searching documentation for Gutenberg but find only here and there some information.
Thanks!
Hey Chris,
It really depends on what kind of dynamic block you’re looking to render. If it’s something like social media icons, you can simply render a representation of them in the editor. If it’s something a little more detailed, like posts, you’ll want to actually render that list of posts. Here’s a simpler example of rendering a dynamic block in the editor. Zac Gordon’s Gutenberg course covers dynamic blocks a little bit and covers the basics of how they work.