The new WordPress content editing system Gutenberg will be powering the WordPress post editor in WordPress 5.0. Gutenberg is a “block-based” editor. When creating content, everything is a block. If you have a post that is one paragraph, one header, and then two paragraphs, that’s four blocks.
Gutenberg comes with a set of default “core” blocks — paragraph, header, recent posts, image, blockquote, etc. If you’re using Gutenberg to create content, you use those blocks or custom blocks that are provided by WordPress plugins you install on your site.
Gutenberg is a JavaScript-driven interface. Specifically, it is built using Facebook’s open-source user interface library “React”. This post explains a little bit about creating your own custom blocks for use in the Gutenberg editor using JavaScript. You do not have to use JavaScript to create blocks. Advanced Custom Fields (ACF) recently announced a neat looking system for creating custom blocks with PHP.
What Is React?
In front-end development, the least performant things you do are reading and writing from the DOM. A very hard thing to do, consistently across browsers, is referencing and updating the DOM. React provides a better system for this, by implementing a reactive programming model and a virtual DOM abstraction.
Instead of interacting with the DOM directly, for example using jQuery.html() or jQuery.val(), React creates a virtual representation of the DOM. We call this a virtual DOM or VDOM. The VDOM is a JavaScript object that represents the structure of the DOM. Whenever your React code communicates to React a change in any of the data, the VDOM is recalculated. After that React calculates the difference between the DOM as it existed before the change and after the change. Then React (really ReactDOM or React Native) updates just the parts of the DOM that needs changed. How it does this doesn’t matter really.
How Is React Being Used in Gutenberg?
React is a library for creating reusable components. Because they are reusable, we can compose interfaces out of components. It is an open-source project created at Facebook.
Everything is a block. Text, images, galleries, widgets, shortcodes, and even chunks of custom HTML, no matter if it’s added by plugins or otherwise. You should only have to learn to master a single interface: the block interface, and then you know how to do everything. – Gutenberg Handbook
Blocks are the basic unit of Gutenberg. We compose content out of one or more blocks.
Components are the atomic unit of React, we compose React apps out of components. Gutenberg is created with React, so each block is composed of one or more components.
It’s important to note, and I’ll cover this more in this series of posts, but Gutenberg adds a thin abstraction layer over React. In our Gutenberg code, we’ll use wp.createElement instead of React.createElement. It works the same, but when React’s API changes, WordPress can decide when to support those changes and provide a backward-compatibility wrapper or decided not to.
This is good planning for the future, but for now, it’s just React.
Do I Need To Know React To Develop With Gutenberg?
So, this brings us to the big question, do you need to learn React? No, you do not. None of this matters unless you want to make your own blocks. If you just want to use the blocks provided by core or plugins, you never need to make your own block types.
No. But…
You can create a basic block without knowing much JavaScript. Take a look at this basic example block, simplified from the official Gutenberg examples:
View the code on Gist.
The one thing that might be new is using wp.createElement — in this example, it is in the variable “el” — to create HTML. That’s a fancy way to create an html element of the type “p”. I’ll cover that in my next article in this series.
WordPress has an abstraction layer over React, so all you really do need to know are a few functions: wp.createElement, which creates HTML and setAttribute(), which is used to update your block attributes.
I recommend going through the Creating Blocks section of the Gutenberg handbook and then looking over the examples repo as well as the example code from the WordCamp Miami 2018 Gutenberg workshop. That’s all code you can use without digging into React at all.
Yes, If…
If you need to make just simple blocks, maybe with one or two controls, then you do not need to know React more than those two concepts I mentioned before. But, if you want to create a more complex block, share components between Gutenberg and other React apps, for example, a wp-admin settings screen or mobile app for your plugin.
React is a really fun library to play with and proficiency with React is a very marketable skill to have. More importantly, once you learn React, you can more easily understand the more advanced Gutenberg concepts — state management, unit tests, etc.
How To Learn React For WordPress and Gutenberg
This is the start of series on React development for Gutenberg. Next week I’ll cover React basics, and then how to apply them in Gutenberg blocks. From there, we’ll make dynamic blocks then look at state management and testing.
I have a list of Gutenberg developer talks on my site that you might find useful. In this series, I’ll be explaining React concepts, but if you want to learn JavaScript and React deeply, Wes Bos and Zac Gordon have great courses on React and JavaScript to get you started.
Josh Pollock
Josh is a WordPress developer and educator. He is the founder of Caldera Labs, makers of awesome WordPress tools including Caldera Forms — a drag and drop, responsive WordPress form builder.
The post Do You Need to Know React as a WordPress Developer? appeared first on Torque.
