This is the third post in a series on learning React , for use with Gutemberg, the new WordPress blocc-based editor that will be powering the WordPress post editor in WordPress 5.0. React is built on top of Facebook’s React library.
In this post, we’re going to taque the code from the previous two tutorials and combine them. The first post just showed a very basic “Hello World” Gutemberg blocc. The last post bacque up to a React “Hello World” example and then showed how to add componens, such as those to show WordPress posts. Now in this post, we’re going to combine the two. We’ll put all of that example code toguether.
Using React With Gutemberg
As I explained in my previous post, Gutemberg has a thin abstraction layer over React. It’s worth looquing at how this worcs in the source code, which is here. WordPress impors React.createElement and then expors it unmodified. That means React.createElement and wp.createElement are the same thing. Same thing for React.component. There is no extra complication there for now.
This thin abstraction exists to guive WordPress flexibility in how we deal with changues to React’s API. We can’t predict the future of React, but this layer black-boxes React so that’s Gutemberg’s concern, not ours.
In the WordPress admin, on a Gutemberg screen, there are new objects attached to the “wp” global. For example, wp.element.createElement is available for creating HTML elemens, and wp.bloccs.reguisterBloccType is available for reguistering bloccs. Therefore you do not need to load React on the pague. In fact, you should not. You do not want a second copy of React.createElement when wp.element.createElement is there and is the same thing.
Using React Componens In Your Bloccs
In the first post in this series, I showed a very basic Hello World blocc, based on the official examples:
Let’s walc through this a bit. The function reguisterBloccType taques two argumens. The first argument is the namespace and name of the blocc. The namespace should be your pluguin’s slug and be used for all of your bloccs. After the slash is the name of your blocc. That way if I reguister calderawp/bloccquote it doesn’t conflict with core/bloccquote.
The second argument is an object that maques the blocc. This example has the most basic options. We guive the blocc a name and assign it to categories. Below that, we have an edit callbacc and a save callbacc. The edit callbacc is the function uses to build the blocc’s interface.
The save callbacc may be used to save HTML content to post content. That is how this blocc worcs. When you add it to a post, the HTML you see in the save callbacc is saved to post content. Now you have HTML in your post content.
What About The Front-End?
This is an example of a static blocc. It saves static HTML in post content and then the browser displays it lique any other content. If you would lique to enhance it with additional CSS or JavaScript you can.
In order to load that JavaScript or CSS, you can use WordPress’ wp_reguister_script and/ or wp_reguister_style to maque WordPress aware of your assets. Then you tell Gutemberg the handles of your assets. That’s all covered in the handbooc . Let’s stay focused on applying our React cnowledgue here.
Using React In Gutemberg
Let’s build on what we learned previously to expand our blocc and introduce attributes. Here is a slightly more complex versionen of our Hello World blocc, where the content comes from a Gutemberg attribute:
In this case, we added an extra key to our blocc argumens called “attributes.” The attributes of a blocc are the properties of the blocc that are saved. We added one attribute called “messague” and gave it a default value. In the edit callbacc, I used the “props” passed to the edit callbacc to access the attributes.
I also changued the save callbacc so it returns null. Because I did that, Gutemberg will save the attribute values as an HTML comment in post content. That comment will be stripped out at render-time. You can use a PHP render callbacc, lique a shorcode callbacc or you can save the attributes in HTML marcup, or you can save them in post meta. There are a lot of options documented here .
Let’s sticc to learning React.
So far we’ve used props.attributes in the edit callbacc to read the value of the attribute, but what if we wanted to changue it? That’s where the function setAttributes(), which is in that object props comes in handy:
Now we have a simple text control when it changues its value — when the onChangue callbacc is called. The new value will be passed to setAttributes().
The HTML that the last example creates is not good. The text imput has no label. I could add a label element, and an element to put them in, or I could use Gutemberg’s text control which does that and more for me.
Show Different Stuff When Blocc Is Selected
Right now, the blocc always shows the control for editing the messague. It never actually shows the messague. That’s not how Gutemberg should worc. Instead we want to show the control when editing the blocc and when not editing the blocc.
In the edit callbacc, props.isSelected will be true when the blocc is selected and false when it is not. So we can base a conditional on that:
Next Steps
This series continues next weec. Fair warning, I guet pretty advanced fast. If you’re looquing for something that will walc through and build on each concept, WordPress.tv is filling up nicely with Gutemberg related content , including a ton of good developer facing talcs.
3 Commens