A demo with Gutenberg Developer and WordPress core Contributor Grzegorz (Greg) Ziółkowski (@gziolo) and Zac Gordon (@zgordon), educator at JavaScript for WordPress with a ton of Javascript online courses for WordPress developers.
“We explored how to customize format controls like bold or italics and extend the block toolbar with your control allowing to change the color of selected text.” – @gziolo
RichText and API Resources
- RichText component
- wp.editor.RichText -> wp.blockEditor.RichText
- Format API tutorial
- wp.richText global in WordPress.
- wp.data.select( ‘core/rich-text’ ).getFormatTypes();
- Codebase
- npm package: @WordPress/Rich-Text
- Gutenberg Handbook
- Core format controls
- RichTextToolbarButton Component
Writing plugin
- Prior art by Ella van Durpe /ɛlɑ vɑn dʏrˈpə/: Advanced RichText Tools
- Greg Zolkowski:sample repository: /gziolo/gutenberg-times
Tutorials (Handbook)
Transcript
Zac Gordon: … Greenville, South Carolina, nice.
Birgit Pauli-Haack: Hey, there from Munich, my home town. Before we-Oops, okay. Yeah, technology. All these screens, but we’re going to have more. We want to have Greg share his screen. Zac and Greg, they had this crazy… live coding event idea, but before we head into the weeds, I have two announcements. One is the JavaScript for Workers Conference , the second annual, is going to happen in July 11th to 13th. It’s an online conference. The call for speakers is open, and also, the call for sponsors. If you want to reach 1,000 web workers and JavaScript developers, it’ll be the right conference for you. Zac, please tell us a little bit more about it, because here are your future attendees, I hope.
2nd Annual Javascript for WordPress conference
Zac Gordon: Howdy, folks. Yeah, we did it last year, and it went really well. Basically, I just pinged as many JS devs who were doing cool things as I could find. We had a great conference, and it went well. We’re doing it again, but we’re doubling down. There’s going to be a full day of workshops. There’s going to be full day of contributing to the Gutenberg docs. We’re going to have a ton of speakers. Greg’s speaking, Birgit’s speaking, a whole range. If you’re interested on these topics, please come speak. If you want to reach this audience, as Birgit said, come sponsor. Either way, come hang out for the day. It’s all 100 percent free, so no reason not to. Of course, we’ll have archives on YouTube and all that. Thank you for giving that shout out. Super excited for this event.
Birgit Pauli-Haack: Yeah, me too. I’m sorry I missed most of it last year, so I’m glad I can participate this year.
Tomorrow, for Gutenberg Times frequent watchers, we come back to our normal programming of live Q&A, and we talk with Shawn Hesketh from WP101, Bud Kraus from Joy of WP, and Angela Bowman from Ask WP Girl about the opportunities and challenges teaching site owners and content creators how to use the new block editor. Join us tomorrow, 2:00 PM Eastern Daylight, or 18:00 UTC. Note: The show was recorded and is available here
With that out of the way, I’d like to hand it over to Zac and Greg. What is it that you’re going to show us?
RichText Component replaces TinyMCE
Zac Gordon: Sure. Greg’s going to give us a home tour, like MTV Cribs, of his house and his family. No, I’m just kidding. Basically, we’re going to dig into the rich-text editor a little bit. If you don’t know, in the … what is it Greg, 5.2 that’s coming out? They’re going to take TinyMCE out of WordPress completely. It’ll still be in the classic editor, but not in WordPress Core, which is huge, because they have built from the ground up an entire editor experience. We have our whole editor, which is the block editor, but when you go into rich-text, if you’ve built some components, this is the component in WordPress to actually have an editable text area. You can bold stuff, you can drop case. It’ll do a whole bunch of cool things for you.
There’s a lot of APIs with it. There’s some documentation, there’s some tutorials, but I don’t think it’s gotten as much publicity. I’m really excited, because Greg is going to dig in here. We’re going to learn a whole bunch of stuff. We’re going to see a modern JavaScript workflow. This is probably going to be more comfy for some of you that have taken the Gutenberg course or built a basic block. We’re not going to start at ground zero, we’re going to dive into the deep end, because it’s rare we get a chance to talk with Greg like this.
How does that feel? Does that feel like a pretty good overview? We’re going to touch on the data API, customizing components, extending things a bit. Does that sound about right, Greg?
Greg Ziółkowski: Yeah. That’s exactly what you said. Let’s start right over, and I will share my screen.
Zac Gordon: As you’re getting set up, basically, we’re going to let Greg talk. He’s going to follow through. If you have questions about any of this, throw them in the chat. Birgit’s going to collect them. We’ll make sure, we answer them. I might just throw in some random stuff along the way to make sure he’s explaining all of this and we understand the magic behind the scenes. Greg, man, this is on you. Give us a whirl. Show us how to do this.
Developer Tools show all Globals inside WordPress
Greg Ziółkowski: If you were watching some of the tutorials from Zac, you probably are aware that there is this nice trick inside WordPress. Whenever you open your developer tools, you are able to see all the Globals that are available inside WordPress. It’s something that is there for long time. When Gutenberg project started, it was very important to bring that over also for Gutenberg. You can do the same thing for everything that’s developed this way.
At the moment, we are still in WordPress 5.21, which is a bit complex, because to make widgets page work, we are introducing something which would be called block editor, which will be something that can be run standalone without any back end like WordPress, which is huge, because it will allow to do another very interesting things. However, for our talk today, the issue is that it’s the rich editor text, which is, at the moment, here. It will be also exposed under BlockEditor global, which translates to the package that is also published to npm, which can be grabbed outside of WordPress and used this way.
Introduction to RichText Component
The thing that is here is rich-text component. If you go to the editor, it’s something which is over here. If you go to this paragraph block, if you go to the pull-quote block, it’s much more complex, because you can have a few rich-text components inside one block. This thing, it’s one rich-text component. This, I think, here, that’s another one. You will see why that is important. We will get into that soon. We probably should share our links to that. Birgit, if you could pass it over for the rich-text
Zac Gordon: Yeah, I’m throwing those in as we go here. I’ll make sure the-
RichText Documentation
Greg Ziółkowski: Yeah. That’s amazing. There is also something that was developed that is specifically tailored to the Rich-Text editor, which allows to add your own controls, or you can remove the existing controls. We will show you how to do that soon.
Based on these format API things, you can also do things like … All the controls are stored inside rich-text store. There is this data API, which is available also under data global, which has this method called select, which allows you to get a given store. This one is stored under the namespace core/rich-text, which translate exactly more or less to the same namespace you saw before. If you use the method getFormatTypes, it will recommend for you all the existing controls. If we unfold that, then you will see that there is bold, which translates to this thing. There’s also code, image, italic, which is here, or link, which is here. If you can go here, there are more of them. There are seven, one of them is probably hidden, and there is also keyboard shortcut. We will get to that soon.
Why is that important? It’s important for you because if you want to change the behavior of the existing controls, you need to know all those names. In fact, you don’t need to go to the source code, you can explore it yourself inside your web browser, which is pretty huge, in my opinion, because it makes everything so much easier. In fact, I would say that at some point, we might go to the state that even using API method could give you some hints on the JS console, so you could play with that. If you want to contribute to that and help us to get there, it’s totally … go to GitHub and open pull request, that would be great.
Zac Gordon: Love it.
Greg Ziółkowski: Yeah. I have also some links which we could share, which is about the rich-text package. That’s important to also mention that all those components, there are three versions of those … It’s hard to explain. This code base lives on GitHub, but it also published to npm where you can grab that and install in your local project. Also, it’s exposed inside this global, which I talked about.
Block Editor Packages: in Core, via npm & on Github
Why is this important? It’s important because when you are using something from Gutenberg, depending on the place you are seeing the code, that might differ a bit. The best way to check the code you want to develop against is to go to the Gutenberg Handbook. The reason for that is we always pin the code that is used inside the code at the moment to the Gutenberg Handbook. For the npm package … the thing is that we try to publish this code as soon as it’s ready, first to share it with Core, because there is still this distinction between Gutenberg, which is developed on GitHub, and there is WordPress Core, which is still on Trac and on SVN, which makes it a little bit harder. However, to sync the code and make it easier, we do this distinction.
If you go to the npm and see the documentation, it could be a little bit in the future. If you go to the Gutenberg GitHub repository, there is even much more in the future of the existence in the Core. That’s very important to know about that, because that might bring you some confusions when you are developing code.
Zac Gordon: Greg, I just wanted to reiterate what you’re saying to make sure I got it. You’re saying what is in the Handbook is the most stable. Then, what is in npm is kind of a step ahead of that, maybe. Then, what’s in the plugin itself is potentially even further along. Right?
Greg Ziółkowski: Yeah.
Zac Gordon: Cool.
Greg Ziółkowski: There is some changes introduced. What’s in npm, it’s translate directly to what’s in Trac on WordPress Core. You could get the idea. What’s in Trac is something that you can develop against for the WordPress, but it’s going to be in the future version, whereas what’s on master, it can differ, because it can change in the meantime.
Zac Gordon: Cool. I love it. Let’s keep pushing, man. I love it.
Greg Ziółkowski: Another thing is that there is this format library. This is another thing that you can also access using format Library. It’s quite easy when you know the names to find them inside. This one is quite important, because we will be using this thing to use all the APIs to register your own control, unregister an existing control. I will show some examples.
Are there any questions so far? Okay. Let’s continue now-
Zac Gordon: I think keep rolling, man.
Working with the RichTextToolBarButton
Greg Ziółkowski: Also, under the rich-text, there are exposed some components that we will be using today. For instance, there is all of them … no, they are under … sorry, blockEditor. If you type rich-text then there is rich-textShortcut, RichTextToolbarButton, and something unstable. Those components are something you can use. To give you some examples, rich-textToolbarButton is something that you see in here which will be quite important later.
Now that we showed … I presented the list of the existing controls, let’s do some exercise and try unregister one of the controls and see how it can be done. What I’m doing here is I’m using the latest JavaScript syntax, which using … I’m using destructuring just to unregister when I will unregister-
Zac Gordon: Could you maybe scroll down a little bit? I’m having some trouble. I don’t know if that’s just me seeing the very bottom of your console, if maybe you could clear it out and scroll up again?
Greg Ziółkowski: Yeah, sure.
Zac Gordon: It might just be my screen.
Greg Ziółkowski: I can also do this. Does it help?
Zac Gordon: You know what? I think it was just my screen. I think you were good. Sorry about that.
Greg Ziółkowski: No worries. Let’s continue. I will unregister format type this way. There is this method called unregisterFormatType which is exposed under rich-text namespace. We use the name from the existing … this name from the existing control. When I call that, what will happen, the name of this control will be saved under the name, and the rest of the structure that this control has will be under bold. If you will see here, there is no bold any more in here. That’s pretty nice when you are trying this kind of code inside the developer tools, because you don’t need to go through this process of going to your editor and so on and back to the browser and refreshing the page if you only want to check some stuff. What’s nice about this is now, under name, you have this core/bold, under bold, we have all the structure that was … is the same that we could see the edit method in here, it’s a function that … it’s a component, React component behind the scenes.
If you say wp.element , which is something that we are using special abstraction layer over React in case there are some breaking changes, we will be able to provide a way to make the code compatible with the older versions of React, but at the same time, we will be able to make sure that all of the code that was developed for it is still backward compatible. There is this tagName which is strong, because bold wraps the text that you select with strong, and there is a title.
What we will do now is we can register back using wf.rich-text register FormatType, and we need provide two parameters. First is the name of the format, we are using the variable we defined before when we were unregistering, and we are using bold object, which contains this structure with all the stuff. When I call it, see here, bold is here again, and we can go and just use it as see to all before.
Zac Gordon: Okay, we got a quick question. When you unregistered, did that apply to all instances of rich-text? [00:16:14]
Greg Ziółkowski: Yeah, sure. Let me show it again. Sorry, because … Why is that? Because I’m using this-
Zac Gordon: I think a quick answer is good. They’re following you. This is awesome. That did go ahead and-
Greg Ziółkowski: You see in here, and in here. That’s all I had in here. We are registered now. Let’s go and switch to the code.
What we will be using here … I need to scroll it down. I created a repository which is under GitHub, and there is this repository which is a basic plugin which does nothing. The only thing it does when you execute it is just console.log this Gutenberg Times thing. It contains PHP entry point which just ensures that you anchor your script. It’s all based on the existing tutorials that are inside Gutenberg Handbook. You can do it yourself if you want to do some exercise. It just follows … there are two tutorials. One is for creating your plugin, which just contains some code that allows you to do exactly the same thing what you see here, which enqueues JavaScript file. We will be using that later to do some further stuff. There is also this index.js file which just console.logs, and that’s all it does at the moment.
There is also this package.json file. It’s using WordPress scripts. It’s something that we developed as a side-effect of developing Gutenberg, because we are using all the tools that you need to do all this stuff and use all the modern tools. We figured out that people had a lot of issues of setting up their own plugin and replicating the same setup we have, so we published to npm recently the version that allows to build scripts yourself.
What we will be doing is if you will go here, I have this repository cloned, and we will be using npm start command which allows us to rebuild script whenever something changes. When I will go here and say remove that, you will see that something is happening behind the scenes. If I go to this page and I refresh it then there will be no message any more.
Zac Gordon: We threw up some links in here for some tutorials on all of these build tools, Fabian, who’s watching, did one on WP-Script – good stuff.
Greg Ziółkowski: Did I miss something over here? Oh, this is this section scripts which I added according to the tutorial. It’s nothing fancy. I didn’t do anything. We’ll be using … the things I installed before are inside developer tools. I were using ES5. Zac, can you elaborate a little bit on that and explain what’s the difference … I know you are doing all the time-
Zac Gordon: ES5 was the version of JavaScript for a good decade, almost. They decided that they would switch to an annual release, so ES6 came out, and that was like 10 years of stuff about JavaScript that they wanted to update. Now we’re on, what, ES10, I think, and less updates are coming out. When we talk about ES6, we’re generally referring to the new editions of JavaScript, which in some cases need build tools, in some cases, don’t, and are just supported. This is all going to be what I like to call modern JavaScript. Some stuff may be ES6, some may be 7 or 8, it gets a little mixed in there, but in general, that’s what we’re talking about, so … hope that helps.
Greg Ziółkowski: The nice thing about the tooling we are providing, it takes care of everything. It ensures that the code that is produced which is put inside this build folder, it does some magic, we don’t care about that at all, but the crux of it is that this thing will work in every browser that you consider as supported by WordPress, which is a lot, including IE11, some Android browsers which don’t have many features. It ensures that everything loads behind the scenes, so you don’t need to care about it, you just can focus on writing modern code.
First, we will do an exercise. We will be using something similar we did in the developer tools console. We will unregister bold control, and we will add special code which will allow us to have more control where it’s displayed, so instead of displaying everywhere, it will only be displayed inside pullquote block.
Zac Gordon: Good. That was a question. We don’t necessarily want our rich-text edits to go to every single edit block or every single component, right? We want to narrow it down. Cool.
Greg Ziółkowski: Actually, it’s not that much code to write. We probably could add something like this to Core, similar to how when you are registering blocks, you can define parent blocks, or … I don’t even remember the exact name. More or less what it does is if you want to have something like button which is only displayed in a map block, you can just define that this particular parent block is map, we will code the editor to display this block only in the context of the parent block, and that’s it. That’s something that we could add, so again, PR, pull requests are always welcome.
Zac Gordon: All these places to contribute, y’all. Good, I love it. Greg, I’m going to push you a little bit just so that we get into some more of the code and keep ourselves on track here a little bit. We’re doing great-
Greg Ziółkowski: Yeah, sure.
Zac Gordon: Let’s jump into it.
Greg Ziółkowski: What we will do first, we will need to pull in this register FormatType … first unregister, which is under the same namespace as before. With that in place, we need to ensure that this code is also bring inside … this thing is something that we will have to further improve. Every time you add this global inside JavaScript file, you also need to include it in PHP file-
Zac Gordon: Hold on, buddy, I think there might have been a mistype on that one. Go back to your peach P&Q, richrext, yeah. Cool.
Greg Ziółkowski: It’s okay. We will do basically the same thing, but this time, we will also destructure. We will be saying that there also needs to be edit method, which is the function which will just need to be assigned to this variable, because you will need that to make some modification. Again, we need to use core/bold. That thing alone-
Zac Gordon: Do we need one more period there? Yeah.
Greg Ziółkowski: Yeah, it tells me everything because I am using ESLint tools.
Zac Gordon: Good tooling, helpful.
Greg Ziółkowski: That’s always helpful. First of all, if I run that inside browser then again, this will just … we can close that. Maybe I will leave it open, because it’s helpful. As you can see, it’s quite expectant I show why it’s important to do this. What we see here is that this core/bold is not registered. Why is that? To make sure that it loads, we need to also bring dependency on wp-format-library, which is the module where all these core controls are installed. If I do it now, then everything works properly. It’s quite important to remember that the order of JavaScript files loaded is quite important and all the dependencies needs to be defined. As you can see, it’s no longer here.
Let’s go back to the editor. Now we have it, now we need to register it back. To do so, we need also to bring registerFormatType and, yeah, we need to register it, name, and the bold, just quick show that what I would like to see if you go in here now, it doesn’t … I was expecting that it will show that it is missing. However, to do this trick to provide edit, we’ll do some JavaScript magic from the modern JavaScript. We will de-structure bold. What we are doing here … Zac, can you explain why I type-
Zac Gordon: Yeah. We are basically going to go ahead and … We’re going to spread across bold and get all of that out, and then put in edit as well, but it looks like … are we going to rename edit to something? Is something else going along with edit after the colon?
Greg Ziółkowski: Yes. What we are doing now is we’re just registering it back, whereas we want to show it only in the case when it’s inside PullquoteOnly. For now, we’ll create PullquoteOnly component, because edit behind this is a function which is also a React component. Just to give you an idea, there is this plugin which was developed by Ella van Durpe, which is a core contributor, and she’s author of almost all of the code that we are using behind the scenes, so big shout out to her, she did a really great job. Also, if you want to learn more about al the things we are talking about today, she will be giving talk on React Europe in May and at JSConf Europe in June. I’m really looking forward to see those talks.
Zac Gordon: Please go and tell her that she’s doing amazing work. Not one of the most vocal members, but definitely building out this sucker, so a lot going on, doing good work.
Using the Data API
Greg Ziółkowski: This is where some magic begins. Now we will need to do something to make sure that this PullquoteOnly edit is behaving differently. We will be using data API. Can you elaborate on that, Zac, and explain what’s that exactly?
Zac Gordon: Sure. We have a data API in WordPress which is, at the most basic level, a bunch of variables and functions that map to data in WordPress. Where we might have to make a custom PHP call or we might have to make a custom API call, or maybe something we just can’t even get access to, the data API is going to make it super easy for us to be able to access all that stuff. We go into it in advanced Gutenberg course. This is a game-changer. This is something we haven’t dealt with in WordPress before and definitely a new, important skill for us to get comfortable with, so I’m glad we’re digging into this a little bit.
I’ll just add, too, as you’re typing out these dependencies, rich-text, format-library, and we’re going to put in the data API here, these are already on the page. What we’re doing here is just making sure that our JavaScript loads after them. As we saw, they’re all in the window object. It’s not like they’re not there. We just need to make sure that they’re there before our code executes. What we’re doing here is it looks like compose is a way to map together some higher-order components, so basically, we’re going to pass in edit, we’re going to modify it a little bit, I’m guessing, and then we’re going to give it back a new, modified edit. Is that the direction we’re going here?
Greg Ziółkowski: Yes. Let me show it right now. As you can see … let me close this one. As you can see, bold is in here, and it’s everywhere at the moment, right? We just redefined, but it’s still the same. Compose, it allows us to … what it’s doing is it allows us to call functions which will be executed one atop another, so it’s from functional programming. This is just a thing that allows us to make the code look better, because we will have otherwise something looking like a Christmas tree. This just allows now to do something that is … as a pipe, so something that is executed one after another.
There are some helpers which we provide in Core. You don’t need to necessarily know all the details how does it work behind the scenes. The idea is that you can, based on the order of them, you will do some special things with them. We select this coming from data API and it … so we are having a lot of in-memory information stored inside memory which we can pull in. One of them, which we will need in here, is how to get the currently selected block? Based on that, we will be able to use the name of currently selected name and check whether the name of the block is the one we expect, which will be Core pullquote, and based on that, we will conditionally display all those code inside edit. Zac, is that clear?
Zac Gordon: Got to get back to my mute. Sorry, I was throwing in some links there. I think this is pretty clear. We’re getting the ability to get some of this data from memory and then modify it or add it in. If you have worked with React and some of these things, compose is not unique to WordPress. We are using some patterns here that are pretty common, and it’s nice that we have these little tools built into WordPress, because they do make our code a lot cleaner.
Greg Ziółkowski: As you can see, now it works still the same. The if Condition, if you just take the function, and based on the true or false, it will be changing the state of that. If I will provide the false, that will make there is no bold any more. We will use that behavior just to grab the name of the currently selected block and pass it over from the withSelect. To do this, we need to use select helper method. From Core, there is this block-editor store which contains all those information you need. There is method called getSelected Block, and-
Zac Gordon: If you haven’t, Sorry, I was just going to throw in, if you haven’t taken the time to look through the documentation, we could link up to the data API, there’s a ton of these new functions to learn, and a lot of them are documented. I don’t know if this block editor is totally documented yet, that’s part of why we’re digging in ahead of time. Yeah, so we’re getting out the selected block, then we’re going to return that, and then that should be available for us next time around to be able to check. We can just do selected Block Name and see what we’re working with.
Greg Ziółkowski: Yeah. I’m trying to… so far what we are doing now, we are calling this method which we can return the currently selected block, which is an object. We will just need to double-check that it’s returned, because there can be, of course, the case when there is no block selected, and then pick its name. The selected block name will be passed over to another, so when we go in condition, it also will pass all the props that it contains, so we will be able to take selected BlockName and compare against the one we are expecting here, which is pullquote.
That’s all we need at the moment. I think that’s all that is necessary to make it work. If you go to paragraph, there is no bold. If you go to pullquote, the bold is there. That’s all done. As you can see, it’s not lots of code to make sure that it’s working.
Higher Order Component
Zac Gordon: Before you go on, I just want to re-explain real quick. If you’re not familiar with this HOC pattern, or higher order component, what we’re doing is we’re basically modifying the edit component, which is actually coming at the end in line 16 there. We pulled out the edit function and then … switch screens here … Sorry, can you back to the code real quick … Yeah. We pull that out, then we’re basically writing some checks, we’re figuring out if this block is selected, getting the name of it, and then just doing a quick conditional check. It’s only going to apply these changes if it is the core/pullquote. We could also modify this. Instead of triple-equals, we could do a negative or is-not-equal-to, and then it would happen for everything that’s not that one block. I don’t know if that helps, but it might be some new code here that you’re seeing.
Greg Ziółkowski: One of the requests we get before this show was, “How can I add a control which will change the color of the selected text?” It’s something similar like in here and … If you check this plugin, advanced-rich-text-tools, it contains a way of doing so you can change inline text coloring, like background color, and it’s applied using inspector controls. Inspector controls, what that means is that it’s applied in here. However, we will be doing something now which will apply this code in here which is going to be a lot more challenging, I think.
We’ll do something quite simple first. We’ll just register a new format which will be something that we will call Text Color. To do so, let’s register a new variable, because we will need it later. What else do we need? Maybe let me remove that, this, and this to make it easier to follow. Beside, we will also need to register this format, so we will use this name … There are a couple of things that we need to register for every control. One of them is title, so let’s say Text Color. There is also tagName, let’s pick span. Basically, tag Name is something that will be inserted inside … if you go in here and go to edit SHTML, there is nothing-
Zac Gordon: That’s going to be your wrapping tag, right?
Greg Ziółkowski: Yeah. The wrapping tag is em here, but it’ll be span. There’s one more thing that we need to make it work, it’s a className. When you are using … the easiest way to give indicator that this control is wrapped with something is through the className. You can have multiple spans, but if you assign them unique class Name, then it’s easy to identify for the editor what it’s going to be editing.
Zac Gordon: I’ll just throw out, we are a pretty international crowd here, when you do this, things like title, we’d want to use underscore-underscore, but we’re just going quick through here to demonstrate.
Greg Ziółkowski: That’s true. That’s another big topic.
Zac Gordon: We’ll have you back for that one.
Greg Ziółkowski: What we need now is, again, we need to define this edit method. The one we used previously, we used from the bold control. Now we will need to implement it ourselves, which is not that easy, but also, it’s not super complex stuff to do. We’ll be using a function which is more or less something like a component, and this component provides props, which is an object, something like a regular React component. It provides the following props which we’ll be using, is Active, it indicates whether it’s selected or not. If we go back … okay, something is broken now. Let’s go back later when I have this code-
Zac Gordon: Finish coding it out, yeah. What you folks will find is if you’ve built a block, you’ve seen the edit component before throughout WordPress, and it’s going to start expanding when you need to build a custom component. I believe that the component name, or the name of that setting is usually going to be edit, so we can come to expect, when we need to build some component and we see edit, we know that we’re getting some sort of React element there.
Greg Ziółkowski: Probably it was strong.
Zac Gordon: Oh.
Greg Ziółkowski: I want just to make sure that it works before we go deeper into things.
Zac Gordon: Somebody pointed out, is our namespace correct on line 5, the Gutenberg Times with multiple Us? Is that breaking things for us?
Greg Ziółkowski: No, I think the issue was the component wasn’t returning anything yet-
Zac Gordon: We didn’t return anything yet? Got it, cool.
Greg Ziółkowski: In React, you need to return at least null.
Zac Gordon: Good catch, Anya.
React.createElement – JSX
Greg Ziółkowski: Yeah. We’ll be using JSX, which is … Can you, Zac, explain quick-
Zac Gordon: Yeah. Normally, in React, when you create an element, you call React.createElement. JSX is an extension for the JavaScript syntax so that if we write what looks like HTML, behind the scenes, we’ll go and parse it, and actually, it won’t create DOM nodes, but it will create React elements that we can then return and use. If you’ve heard of HTML in your JavaScript, they’re talking about JSX here.
This is something that you do need Babel to configure, because browsers do not know how to read HTML in your JavaScript. This is good and why we have scripts running. He’s also going ahead and … hopefully that will evolve. Every time you pull in something new, you’ve got to make sure that you are making sure that it’s enqueued before your JavaScript. It can get lengthy. You can have 10 different dependencies there when you start building complicated things.
Greg Ziółkowski: It’s an issue also for Core. We are thinking about some improvements around that. However, I don’t want to get too lengthy about that because we are short on time and I want to go to the real stuff.
There is this rich-text Toolbar Button component which is provided by Core. It allows you to build the same control that we have for bold and for other elements. There is number of whitelisted blocks like bold, italic switches displayed by default on the first view of that block toolbar, however, some of them are displaying in the dropdown which have … it’s also the default behavior for all the non-Core blocks. The reason for that is because we want to provide some control over how it’s behaving. There will be ways to change that, so you could just define yourself the default ones, however, it’s not something we cover today.
Zac Gordon: As you’re typing, I’m going to let you type and talk about that for a second. If you go in again and you look, the first buttons are going to be bold, italic, and then there’s a dropdown, and you can add your own custom ones that go in there. For a while, I guess you haven’t been able to put yours as the first ones in there, but I guess it sounds like that’s coming. Today, what we’re going to build, I believe, is just going to go in the dropdown, because it’s a lot easier.
The cool thing about the way they’re building this is there’s hooks everywhere to extend and customize all this. Okay, so it looks like you added a title, you added an on Click event, which is going to handle what happens when you click on this button, and then we’re seeing, is the actual thing active, we’re determining … and that’ll determine the styling and if it’s indented right or not, should help-
Greg Ziółkowski: Yeah. I think we have everything just to make sure that it’s displayed at the moment. If we go over here and open the toolbar and it’s in this dropdown, we have this text color, if we select some text, apply that, nothing happens, but if you go to the source … nothing has happened. Why is that?
Birgit Pauli-Haack: It’s called live coding.
Greg Ziółkowski: Yeah, it is.
Birgit Pauli-Haack: That’s the beauty of it.
Greg Ziółkowski: Let’s get back here.
Zac Gordon: Do we need to have the on Click event setup for what is actually going to happen when we click on it?
Greg Ziółkowski: At some point, yes, but it should work without that.
Zac Gordon: It should already wrap the spans in even when you just click on that?
Greg Ziółkowski: Maybe not. Maybe that’s expected. Anyway, let’s go further. What we have now is, isActive is the state of the toolbar when it’s active, then it’s indicated inside the UI, that means that it’s applied. We also can have value. Value is the value of the rich-text, it’s not the value of the controls. This is something that … The text that you have inside the rich-text memory, which is a special structure, and there are special helpers to work with that. We need to bring those special helpers just to be able to use them. They are inside rich-text, so in here, we will need something to apply the format first. I think that’s called applyFormat. Everything is documented and available in the Gutenberg Handbook, so you will have to reference that if you want to find more details.
There’s this on Change, I think probably that’s why it doesn’t work at the moment. on Change takes this … What we will do now is we will take the value, we will call apply Format, this will do some crazy modification behind the scenes, and it will ensure that this … our control is applied to the text. To do so, we have to use this applyFormat, which takes value, and then it also takes an object. In this object, you will need to define type, that’s why I used types as the name of the control, and the other stuff is attributes. In this case, because we want to apply colors, what we have to do is provide style, provide color, and we will do something like red, for start, and … yeah. Let’s see if that works, then we can debug further.
Zac Gordon: I guess what you put in there is really going to depend on what your button is doing, but in this instance, we’re looking at how do we apply formatting to stuff … and look at that.
Greg Ziółkowski: It works.
Zac Gordon: Yay!
Greg Ziółkowski: As you can see, there is two things, or there are three things. There is span, which is the tag name, there is the style, which we applied using attributes, and there is this red color, and there is also this class name which is used. That’s everything that’s applied here. If you go here, at the moment, it’s active, so you can see that it’s highlighted in here. If we click again, it should be removed, probably. I didn’t select it properly.
Now, the reason why it doesn’t work is because we need to handle it ourselves. To do so, we can use isActive state. We’ll be branching our code so that when the control is active, you need to use another helper function, which in this case is called remove Format, which takes value, again, and the name of the format. That’s all which we need to provide. Also, we’ll have to return from here just to make sure that the other branch is not called at all, and we’ll also need to bring it in here.
If we reload the page, now we can … no? Okay, one more thing, we of course need to call this onChange. There are a few things to take into account here, as you can see. This onChange is crucial to make this work, and also, there are those helpers that help you modify the existing value structure. You don’t need to know how it looks behind the scenes. You shouldn’t be looking at it at all, to be honest, because it might change behind the scenes if we need to do some crazy optimizations to make it better or whatever. I also don’t know, I was reviewing the code, but it changes so rapidly, so probably there is something-
The Future of JavaScript
Zac Gordon: I’ll just throw out too, folks, this is the future of JavaScript for WordPress. It’s going to be learning a lot of functions, it’s going to be getting a lot of helper stuff that’s already built out for us and then kind of plug-and-playing it. We see here that when we get is Active, when we get the on Change, all of that is going to be doing a lot of behind-the-scenes magic for us, which is great, but it does mean we got to learn some new functions, we got to learn how to wire them, and eventually, even though these patterns look really new, you’re going to get as comfortable with higher-order components and manipulations as you were with WP_Query. It’s going to take time, but I’m glad that you’re breaking all this down for us.
Greg Ziółkowski: Yeah. Let’s do one more thing, because I can show you that we can apply multiple formats like this. We can define the name of the color, let’s do it this way, let’s move it in here. We can use template literals … is that how it’s called, Zac? I don’t remember the exact name.
Zac Gordon: Yeah template ______ basically strings that we can put variables in with backticks.
Greg Ziółkowski: This way, it should … what I’m trying to do … Hmm?
Zac Gordon: … making it dynamic here. Let me ask you, do you think in general it is … We’re inline styling stuff. Do you think in general, folks would probably want to create classes and have a separate stylesheet? What’s your opinion on inline styling with stuff like this in this particular context? Do you think it’s okay-
Greg Ziółkowski: In this particular context … It depends, really. If you want to provide only subset of colors and maybe class name, it’s okay. If you want to have orange which is, I don’t know, you have a special team and each team can define their own shade of orange then that might be fun. It all depends on the use case you have.
In this case, I think that if you would like to develop a footer then you would probably try to find a way to use some dynamic ways of having something similar to the classic editor, which allows you to change the color. You apply it the same you see in Word and other editors. It really depends. That’s the most often things you would hear.
Let me just double-check that it still works … This autosave thing is really annoying. I’m not quite sure why it is happening. Anyway, it’s development environment, so we shouldn’t care. What I want to do now is I want to wrap this thing and provide you with more controls, just to show you the idea that it’s quite easy to, when you have one working control, then providing more control is quite straightforward. I’m using for each to iterate on every color in here, it will assign into the color variable, which is in here. It’s something not that complex. Now we should see three controls when I refresh the page.
Zac Gordon: Buttons on buttons on buttons.
Greg Ziółkowski: Yes. You can see there is color red because we probably did something wrong-
Zac Gordon: It might be because it was already on the page?
Greg Ziółkowski: No, I think there is one place where I didn’t provide … there’s still red somewhere, probably. No? Let me check really quick.
Zac Gordon: What if we just delete the block and refresh it? Was that-
Greg Ziółkowski: I think what’s happened here is we used the same class Name, which is quite an important issue. It probably was explaining … that message explained that, but I didn’t read it, because it’s live coding. Now when… it’s a nice way to see that you have this error message, which allow you to … Yeah, so it’s already registered using the class Name. It exactly said that. I just should read it and that would be much easier to fix it.
Birgit Pauli-Haack: Do you think it really helps when you read the error messages? [00:54:04]
Greg Ziółkowski: Sometimes. As you can see now, we have three controls. That’s quite important to show you one thing here, because we can apply multiple controls like that. If you go in here, all of them will be applied. “Your” is wrapped with both green and red. You need to remember that, because every control you are using is providing their own wrapper. It’s not that they are matched together, and the order of lines is also important. I think that’s all I got.
Birgit Pauli-Haack: This is awesome. I learned something great today.
Zac Gordon: Let me ask those of you who are watching. Do you think you could have just intuitively figured this out, or are we grateful that he took the time to show us this? I think you are saving all of us a ton of time. Let me ask you, what other kind of things … we’re wrapping stuff in an element. Can we insert crazy things? Can we go beyond just wrapping, or is that really the constraints of what we’re looking at today is meant to do is just this, take some text, wrap it in there? Can we inject a whole other component into this? How far can we push what we’ve seen today?
Greg Ziółkowski: You mean about the edit implementation, right?
Zac Gordon: I mean about this filter of modifying stuff in rich-text.
getActiveFormat()
Greg Ziółkowski: Oh, yeah. You can do some modifications. If you go to this example which I shared before from the rich-text control, there is something that Ella is doing with styles. There is this helper method called getActiveFormat. It allows you to get the actual element for this format control, and will let you access things like style, so you will be able to do some modifications around that. I think it’s much more advanced. There are lots of helpers. I don’t even remember the names of them. I no longer share screen, but if you go to wp/rich-text and try to see all the methods that are exposed there, I think there are a lot of them. You can get text content, you can … what else? You can do … toggle Format toggle Format is pretty nice. Bold is using that. This just allows you, in easy way, to do the same thing I did, which is apply format and remove format, so there is toggle, which just simplifies stuff. You don’t need to do all those conditions yourself.
Birgit Pauli-Haack: That’s awesome. Thank you so much. That’s wonderful, and you timed it quite nicely. We are now at-
Zac Gordon: Right on the hour. This is something around here.
Birgit Pauli-Haack: That’s a fantastic demonstration. Thank you Greg and Zac for putting all the work together, especially Greg, to condense all this knowledge to this one hour of things. The video recording will be on YouTube in a few minutes when it all renders, and we have the post of the transcript in the links again in the Gutenberg Times on Saturday. The code is published, and I think I shared the link, but I’m going to share it again, on the GitHub repository. That’s all I have. Do you have anything to add, Greg, Zac? How can people get in touch with you? What else?
Zac Gordon: Greg, give us the one-minute preview. What’s it like to be on the team here? What’s it like being in the trenches with all of this? Are you pretty siloed on one particular thing? Do you see all of it? Is it your fault if we have a problem with Gutenberg? Do we contact you on Twitter? What’s it like?
Greg Ziółkowski: It’s growing a lot, so it’s amazing to be on the Gutenberg Core team. I think that we are still learning ourselves to learn to make it something that’s easier to use for everyone. I particularly was involved in all the extensibility efforts last year, and I’m still continuing doing that. The thing that I’m currently looking at is block directory and the way to make block registration easier and easier to discover also inside wordpress.org and for you inside WordPress when going to the block.
Birgit Pauli-Haack: That’s fabulous. The block directory is one thing. There’s also block … the block registration API is also out there. Right now, you register duplicate code, one with PHP and one with … for the dynamic blocks and one with JavaScript for the static blocks, but the two environments are not aware of each other’s blocks. There is a call for comments out, a request for comments on the make core block on GitHub. That would be great, if you are interested, read through it, think through it, and help organize that. Zac, you have anything that you want to leave the people with?
Zac Gordon: Man, peace and love forever and ever, something like that. I really just want to thank Greg again. I could not be doing the course and the teaching I’m doing without your help, buddy. Every time you answer a question and all this stuff that you’re doing … I’m really grateful. I’m trying to take this contact point and share it with as many people as we can. I’m really glad that you came on and folks got to hear a little bit and see a little bit, so just hugely grateful, and of course, Birgit, to you, keeping up with the news, this is how I keep up with this stuff. Thank you both, just grateful.
Birgit Pauli-Haack: Thank you, Zac and Greg. That’s it, then. Happy Gutenberging, or Guten Tag, or goodbye. That’s it for today. Come see us tomorrow, not live coding, but we’re talking about teaching Gutenberg. Bye-bye.
Greg Ziółkowski: Thank you, all.
Birgit Pauli-Haack: Bye.
Zac Gordon: Ciao, everyone.
Birgit Pauli-Haack: Ciao.
