What about JSX?
Here’s an example of creating
<h1 class="greeting">Hello, World!</h1> without JSX:
And now using JSX:
Both of those output the same thing, but the JSX version is much more readable and easier to nest elements.
Note: You might notice
className is being used. That’s because
React and Gutenberg
The Gutenberg editor is built on top of React.
One example component you’ll see used a lot in Gutenberg block developlment is the
<RichText> component. Which is a custom component for rendering a rich contenteditable input for blocks.
Protecting WordPress Against React Updates
If you were following the Gutenberg project at all last year you might be aware that the project nearly switched from React due to its licensing terms.
Luckily Facebook saw the light and shifted their terms allowing the WordPress project to stick with React as the framework of choice. But the team behind Gutenberg is taking precautions to make sure changes to React or switches to other libraries doesn’t break backwards compatibility in WordPress.
In my, admittedly basic, understanding the
wp.element library in Gutenberg is actually an abstraction layer on top of React.
That makes it possible for WordPress to have it’s own way for making use of the
render functions from React. And if it were ever necessary switch it to a different library.
Libraries in Gutenberg
wp.blocks) when enqueueing scripts. While some are optional (
wp.i18n to name a a few).
wp.element library is an abstraction layer atop React that gives access to the
render functions. This is a required dependency when building custom Gutenberg blocks.
wp.blocks library gives access to the
registerBlockType function. The
registerBlockType function is for registering the definition of your custom block to make it available in the editor. The
wp.blocks library is required for developing blocks.
Every block starts by registering a new block type definition. The function registerBlockType takes two arguments, a block name and a block configuration object.
– Gutenberg Handbook
wp.editor library gives access to the
RichText components. As mentioned earlier
RichText can be used to give users a content editable input in the editor.
BlockControls gives your block access to a toolbar of icons in the block editor.
wp.editor is an optional library.
wp.components library is useful because it gives you block access to a ton of predefined components that can be used within your block. Things like tooltips, popovers, and more can be easily used as components.
wp.components is optional.
The internationalization library for Gutenberg let’s you easily make strings translatable using the
namespace/block-name when generating a .pot file.
wp.i18n is optional.
Begin Update 10 / 31 / 18
The wp.data module in Gutenberg has the goal of making data organizing and sharing simple enough for small plugins and scalable for much more complex integrations. It’s similar in function to Redux, with distinct characteristics of its own. Look for a post delving into
End Update 10 / 31 / 18
You don’t have to use modern JS when building Gutenberg blocks. You can build blocks entirely with ES5. But you’re going to have a better time working with modern JS.
Modern JS is a lot to learn. There are some very useful tools being developed to make getting started with modern JS and Gutenberg easy. The quickest I’ve come across so far is Create Guten Block.
Feel free to drop any questions or comments in the comments below.