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.
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!
Feeling lost already? Fear not! Let’s answer some basic questions to get started:
- 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.
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.
Things You Should Know
React in WordPress and Gutenberg
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.
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.
The options are plenty. You can start from online resources, such as: