 WigFly is a web development and digital marketing agency. We work in several platforms such as tentacle, umbraco, site core, and Drupal. And then, of course, we also work in WordPress. Another role that I have at WigFly is that I get to be their evangelist in WordPress. So that means I get to learn the ins and outs of what WordPress is and how to use it. So about a year ago, they started to introduce Gutenberg, so I sat down to begin to learn it. And what I found was I was able to do some really simple things with it, such as create text blocks. But I wasn't able to do more complicated things because I was just getting confused with how to do it, what it was, how it was doing what it was doing. So when you get confused by something, you know, open the source code. And as soon as we opened that source code, what we realized was that Gutenberg is just React. And so as we started to learn React, a lot of things about Gutenberg just became understandable and we were able to start doing things that we wanted to do. And that's actually the real goal of this presentation today. It's not to teach Gutenberg. It's not to make you experts at React. It's to start to introduce you to core concepts that we found useful as we were learning Gutenberg. So these are just some links for you guys. The first one is questions. If you have any questions, that QR will be throughout the presentation. You can take a screenshot of it and it will expose a form for you. And we'll be able to put your question up on the screen at the end of the presentation. We also have help for resources. That's just a blog that we wrote and it's just a lot of useful information. Gutenberg's tutorials and documentation has gotten really good. So those are some resources that we thought would be useful for you guys as you learn Gutenberg and React. And the last one is just the presentation itself. We are making these slides available for you. So if you want them, you guys are welcome to them. And what we'll cover, we're gonna cover Gutenberg really quick, just kind of what it is. We're gonna take a quick look at JSX and then we're gonna go into some React core concepts. So what is Gutenberg? Gutenberg's about to be released November 19th. So it's coming out quick. And what it is, it is WordPress's new content editor. So if we take a quick peek with my mouse, this is just a video of me just kind of messing around with Gutenberg itself. Oh, if we just take a quick peek. So this is a brand new editor that we see here. On the right hand, we have our document fields and then we also have our block fields. We don't have a block selected yet and we're just gonna throw in a quick title real quick. And then if we hit the plus mark on the top hand side, what we see are all these blocks and WordPress organizes these blocks into different categories. And these blocks we'll later on be able to use to create page content. And then I know it's hard to read, but those last two categories was widgets and embeds. For anyone that's used to WordPress right now, those are indeed the same exact widgets and embeds that already exist. It's just rewritten into Gutenberg. So what we're gonna do is we're just gonna drop a paragraph on a page, put some text in it. Hello, I'm a paragraph. And then we can expose the editor control and these are just little editors. We can do alignment, delete, add, make it bold. And then on the right hand side, we have more controls where we can control things like the color, the text size, class name. And for a developer, you actually have control over all of this. You'll be able to add your own controls and kind of create the whole system that you want. In this case, I'm actually exposing a drop case. I kind of just wanted to demonstrate that when you click into it, that drop case disappears. When you click out, it'll come back. It just makes it easier for an editor not to have to edit with a drop case in there. And then the next thing we have is transforms. And this is a really cool part, is that we can take one block and we can transform it, but turn it into another block. So we took this paragraph block and we just turned it into a header. We're just gonna quickly throw on another block. In this block, we're actually gonna review again later. It's just the recent post block. And again, we have fields on the right-hand side where we can kind of control what we want. We're gonna re-order it real quick. We're gonna take a look at the categories and then we can add a larger amount of posts. And then it's important to note that I also added the date of the post. Here I actually just realized that how many blocks I actually put on or how many posts I actually put on. So we're just gonna bump that down a little bit and a lot better. So the next thing we can do with blocks with Gutenberg is that we can rearrange them. So we're just gonna drop that header below the recent post and as you see, it's really that easy. The next thing is we can enter blocks before block or after a block. And we're just gonna answer it immediately as a paragraph but we can change that to anything. And so what we're gonna do is we're just gonna add an image block real quick. And then the last thing I just wanna demonstrate is that after we add this image block, if we decide that we didn't want it, we could easily delete it as well. So that's the new Gutenberg editor for a content editor. It's just a system of blocks that you can use to create page content. For developer, it's a system of blocks written in React with an abstraction layer written over it. And that's what Gutenberg will provide. And for most people, that abstraction layer is what you're gonna focus on when you read tutorials. And for the most part, when you write Gutenberg blocks, you can pretty much stay within that abstraction layer. All right, so real quick, what is React? React was developed by Facebook in 2011 and it's just a JavaScript library and it's designed to be able to build useful interactive user interfaces. And in the end, what it boils down to is just nestable components. It has a root component and that root component will contain child components and it'll build out into a tree. And this is what I mean by that. And this is actually that recent post block that we just looked at. So if we took a look at how they built this in React, we actually have a root component called fragment right here. And then we have an unordered list. And that unordered list can contain a variety number of list items. And then each list item could have an anchor. And remember when we added the date, that would add a time component as well. And so this is just what we mean by a tree. The other thing to know about this tree is that in terms of data, it's unidirectional. So data should flow from the top down. So it should start at the fragment and it should flow down all the way to the anchors and the time. Next, what is JSX? And I'm just throwing this in there because we're gonna see JSX throughout these examples. If you open up Gutenberg, they write in JSX. If you open up most React apps, they also write in JSX as well. So JSX is just an XML, HTML syntax that's used to extend AcmonScript. It's actually very visual, it's very verbose. And anyone that has worked with HTML should be able to recognize it right away. The next thing is it's intended to be used with preprocessors such as Babel. So you write in JSX and you compile it back down to JavaScript. And the two important things to know with JSX is while you're writing in JavaScript, if you wanna add JSX, you would delineate it with smooth brackets. And if you are in JSX and you want to add JavaScript, you would delineate it with curly brackets. And this is what we mean by right, this is what we mean right here. And is this readable? Not really, I'm just gonna edit this real quick. I'm just gonna make this big for you guys. So if we look at this code, ignore this right here, this is actually Babel, I'll expand that out later. But if we just look at this, we have a var list. And then inside our list, we have a div node. We have a h3 node, a url node and a line node. And the important things to know about this node, these nodes again, is that it's not HTML, it is a react node. And it's important to know because react nodes don't get rendered straight to the DOM, it actually gets rendered to a virtual DOM first. And then react does a lot of comparisons to figure out what has changed and enact that change on the DOM at that point. The last thing we do is we just call reactdom.render. We pass it a list and then we attach it to the element that we want. In this case, we just attach it to app. And really that's what JSX is. And as you can tell again, very similar to HTML. And if we were to compile JSX down, again if you just excuse me, this is what we get. And as you can, anyone that knows JavaScript would immediately recognize this as just JavaScript. That's all it is. We took that JSX, we ran it through Babel and outputted JavaScript for us. So you technically don't need to use JSX with react, but as you can see that it's just a lot more readable. You could use JavaScript, but then it just gets really complicated to read at points. So getting into react and what react is, it's just a logical grouping of nodes. So when we saw that recent post, it was a logical grouping. It had the fragments, it had the unorder list, it had the allies. So if we looked at the example on the last slide, there was just a div containing H3s. So it's just a logical grouping of nodes. It usually represents an independent and reasonable part of a UI and most typically contains some sort of state. And we'll actually review the state in a little bit. The other thing about a component, it must accept an arbitrary input called props. And then it outputs a react node. And I say react node, but that's actually kind of false. You can also output null and I'm just bringing that up because for WordPress, it's a little bit important because if you pass null, you're actually indicating you want your component to load with PHP instead of JavaScript. The last thing as we keep talking about is components can contain other components and it creates a component tree. So if we look at what the component code would look like, if we can see that we have a class called clock and we just extend react node and we have a render function within it and all we're returning is a JSX node and that's that p tag right there and we're just adding in the current date, the current time and the sample on the right is what the time was when I did this and then we render it and we just call like a html attribute, we just call clock within react dom render. And that's how simple a component is. And in the end, when we look at a Gutenberg block, a Gutenberg block is a component, this is a component right here. So this is in the end, this is really how simple it can be. So when we have that clock, we weren't passing any data to it, so it can be pretty useless. So how do we pass data to a react component and we would actually use props and props is just like an arbitrary input as we mentioned earlier. It kind of, you can just kind of think of it as it provides configuration values for the component. It functions similar to our html attributes and inside the react component is accessible through this dot props. The most important thing to know about props is that they are immutable. The data is immutable. Once it's set, you shouldn't change it. And because react in the end is just JavaScript, technically as developers, we could change it, but if we did, we risk screwing up react's internal syncing which destroys our app and then it's just a pain to debug. So once you set your prop, they're immutable, they shouldn't be changed. And if we look to see how we pass props to a clock, what we notice here is again, we have our clock and we're passing it date and we're passing it class name. And then within our render function, we're setting a class name with this dot props class name and this dot props that date. So that's again, how easy we pass props. It looks very similar to HTML and we can use them using this dot props. So we said that props was immutable. It can't change once you set it. So sometimes we have data that is going to change and a lot of times that is what we're passing to our components. So when we have data that is gonna change, we're gonna use state and all state is, it's just data that can change over time. So when we have data that we know is always going to be the same, we use props. When we have data that we know is going to change, we would use state. State change can trigger a re-render of the component or the sub-component and once the state is set in the constructor, you shouldn't affect it directly. We, instead we would use a function called this dot set state. And if we just take a quick look at the code, again, we're just using our clock example. We're still passing it class name and this time we're passing it starting time. And when we look at our constructor, we see that we have this dot state. I'm sending TOD, which for me means time of day. And then if we take a look at our render function, we're just extracting class name and starting time from this dot props and we're extracting time of day from this dot state. And what we can, and also in our render method, we just have an H1 showing the starting time. We have a paragraph showing the time of day and then we have a button to update the time. And if we look at, and if we look at what happens, what we see is that the starting time does not change and the update time does change. So 32 at this point, 35. And so again, remember, starting time we use props because you know starting time's never gonna change. The update time we use state because we know the update time is going to change. The next quick thing we're gonna cover is just lifecycle. So our clock is still pretty useless. When I imagine a clock, I imagine something that's ticking and continually updating. So how would we set up a interval for our clock to continuously update? And we have the ability to use a lifecycle. So a component has a lifecycle and it's just points within that components life where we can affect change through code. And for WordPress developers, you can think of it very similarly to action hooks and filters. And so this is actually a diagram by Dan Abramoff. He actually works on React and this is just a great diagram. But what we can see is that we have three stages. We have a mounting stage, we have an updating stage and we have an unmounting stage. And within those stages, we have a variety of methods. The most important methods that I tend to use is component did mount, component did update and component will unmount. And in the example, we're gonna see how we use it to set up an interval. And so again, we're just keeping with the clock example. We're still passing it class name and starting time. But if you notice in our render, we took out the button. We're not gonna use it anymore because the time's gonna update itself. And instead, we create a component did mount. And the component did mount will trigger as soon as this component is rendered to the DOM and that will trigger. So as soon as that's rendered to the DOM, we wanna set up our timer and kick it off. And that's what we're doing here with this dot timer. And within it, we set an interval for every second and we change the date to the current time by setting this dot state. The last thing we do is component will unmount and that executes right before we remove a component from the DOM. And all we're just doing here is clearing the interval because we should take care of our assets and get rid of them if we don't need them anymore. And so when we look at this example run, we'll see now we just have a clock that ticks. So we've already seen handling events and I just kinda wanna touch on it to make sure everyone knew that we took a look at this. So we just backed up again to an earlier example where we have our button, where we're returning a button. And this is just an event handler and pretty much in V-Act and JavaScript, events are handled the same way. The one big difference is that on a button, we pass it through a function instead of a string. The other important thing just to remember is that in JavaScript and also React class methods, this isn't immediately bound to our class methods. So we actually have to bind that ourselves and that's why actually what we see in our constructor is that this to update time, which we're gonna use as our handler, we're just simply binding this to it. And the last piece I wanna cover and this is just because we see this through all of Gutenberg, actually you're gonna see it through all of React apps is lifting state. And so when we have, and lifting state is just a React pattern, just how we do something. And when we have two or more components that depend on the same changing data or the same state, we want them to be synchronized and to be able to use the data from the same source. We call that a single source of truth. So in our example, we'll have Celsius and Fahrenheit and when we update Celsius, they will also immediately update Fahrenheit and vice versa. So both of them are dependent on the same temperature to calculate what it would be in both degrees. So how do we make it so that they're both dependent on the same thing? Obviously we're not gonna set state on each of these temperature inputs. What we're actually going to do is we're gonna remove that state and move it up to the closest ancestor that they both have and pass down that temperature as a prop. And that's why we call it lifting state. We take that state and we move it up. And so if we take a look at the code, we see we have our temperature input. On our example, we had that Celsius temperature input and that Fahrenheit temperature input. And what we notice is that everything is run through props. So if we take a look at the on change, it's calling this.handleChange, which immediately is calling a function that was passed through this.props. And since whoever's sending that function, it sends it the value or the change to value so that we can use it. And then if you notice, we also have a constant called temperature and it's called from this.props.temperature2, which both temperature inputs would receive. If we look at the calculator, so if we notice our calculator is here and then it has two temperature inputs and the calculator or the closest ancestor of both these temperature inputs is the one that's sending it its handler. And so when the value changes, it actually gets sent to these two handlers. And again, it is the closest ancestor that is handling the change and setting the state. So what we actually went over today real quick is that Gutenberg is WordPress's new content editor. JSX is just ECMAScript extension. It's just a way to build nodes in a HTML like syntax. A new component is just a function that takes an arbitrary input called props and outputs a react node. In the end, a react component is a Gutenberg block. We need to remember that props are immutable and a component can also contain state or changing data. And that's how we decide if we're gonna use props or state is a changing data or is it always gonna be the same. React component has a life cycle that we can take advantage of. They're very similar to WordPress's action hooks and filters. And if several components depend on the same prop, then a helpful react pattern is lifting the state or moving the state to, I misspelled that, moving the state to a prop and attaching it to the nearest ancestor of all the pending components. Any questions? Yes? Yeah, so I was actually talking to a gentleman yesterday and he was talking about how he wants to build a Gutenberg block. It would be recent posts. They actually did the same recent posts that we saw. He wanted to do something similar to that. When you're developing recent posts, you tend to send, if you're doing it in JavaScript, you need to send a post back and Ajax post back to it and say you don't wanna do that because it's just faster to do it on the server. That would be an example where we'd wanna use PHP instead because it's just easier to query for those recent posts and just send it through a template and to display out. Anyone else? So I haven't done a lot, a lot of it has been a bunch of learning but one kind of project that I'm using as I'm learning and it's actually a great way to learn this. So anyone should try this out if you have a chance is because we actually don't wanna focus on the front end because that just distract us from actually learning Gutenberg. So we just took Bootstrap, we threw it on a site that's handing a lot of front end and then we, you know, cause Bootstrap has all of the different components. We started picking out different components and saying, we're gonna turn that into a Gutenberg block and just attempting to turn that into something useful. Yeah, so there's a lot of developers that are already developing Gutenberg blocks. A lot of the existing plugins are already getting prepared for Gutenberg blocks. So yeah, it's gonna be something that we're gonna see pretty soon, November 19th, so a couple of weeks. And yeah, I know a lot of people are actually already getting prepared for it. A quick note about all that too is that you're not gonna be forced into Gutenberg and I know a lot of people are worried about that. They're not forcing you into Gutenberg. There's a couple of things you can do. The first thing is actually pretty bad and that's just don't update, do not suggest that. The second thing is actually the better option and that is to use a classic editor plugin. And that's just a simple plugin that WordPress put out there. You throw it on your site, you enable it and it'll stop blocking out Gutenberg for you so you can just stick with the classic editor. At Wakefly, that's actually what our general plan is for all our clients is that when we update them, we're gonna throw on classic editor first so that then we have time to start testing their site and figuring out once we enable Gutenberg kind of what we need to do and how we're gonna do it and what problems we may face and how to attack those problems. So with React itself, we wanna break everything down into independent blocks. So when we saw that example, what we actually saw was that was actually a React component. And how much time do we have? Do we have time to do this? I got time. So I'm actually gonna do something a little scary that I was gonna avoid. But we're actually just gonna open up Gutenberg. All right, we're gonna just take a quick look at the source code. I actually need to pull it out of my trash can because I threw Gutenberg away. Stolen up my IDE. All right. So my IDE does not wanna work right now. So what are we just gonna do with this? That's because I have two screens so I don't see what's going on in the other screen. All right, there we go. My computer froze. Here we go. All right, so this is just Gutenberg right here and when I say, I kind of put notes throughout the thing about looking at Gutenberg core and when you wanna look at Gutenberg core, sorry, not live, packages. This is what we need. This is just a lot of Gutenberg. And then the one thing we can look at is we can look at the lock library and then inside here we can go to latest posts and then we're just gonna look at their editor. We're actually gonna edit it with notepad. All right, and so in the end, all this top stuff is pretty scary. You don't really need to know this but what we see is that we have, it's just bringing all of this stuff right here or just components to use throughout the thing. And then if we look here, we just have a component called inspector controls and that's exactly what you're talking about right there. So all it is is a component and then we can pass it other controls that we wanna use. So if we notice we actually pass it, they're actually passing it a panel body and they give that panel body a title. Then they also pass it query controls, toggle controls and possibly a range control depending on if it passes that check, all right? And then within that, we can set different attributes and we can pass it a number of props to determine what it's gonna do and how it's going to act. So when we look at just, this is just their editor and this is a good example of just components containing other components and this is the actual code itself of Gutenberg. Make sense? Yep. Possibly. Yeah. So I might pass the mission. Yeah, so I mean the big thing to do is to test it first, always test it first. And for the most part, what I've seen is that when I took a site that used something else, say the classic editor and flipped it into Gutenberg, what I saw is that Gutenberg intelligently just took that content and dumped it into a classic editor block, right? So if we opened up Gutenberg, one of the options that we had as a block was just a classic editor. And so they were doing really a really good job of just taking that content and dropping it into there. That doesn't guarantee it's always gonna work, but that's just kind of what I've seen. The other thing for developers is we have the transformation API. When I showed you, we had that paragraph block and we moved it over to our header block. That's just called the transformation API. We also have a migration API that as developers we could take advantage of, right? Because essentially we're just saying, take the content that looks like this and turn it into that, right? And so we could say, all right, take this plain content right here that you see here, if you're using short codes, take this short code and change it into this block. So that's, yeah, so the custom fields with the PostMeter, Gutenberg actually take care of that, right? So you can actually attach PostMeter still with Gutenberg. For me, that's not as much of a worry. It's the bulk of the content itself that I tend to get worried about. Like I said, we're gonna use classic editors. We're gonna take advantage of transformation API and the migration API. Yeah, so I've been taking a look at that because we actually use ACF quite a bit where we work. And so I haven't seen ACF really deal with it yet, but if I was them and doing something in terms of just making it compatible, I would just take advantage of the fact that we can already attach PostMeter to a block. And I would imagine that, because they're just so big that they would have a solution out before we launch. But PostMeter is part of Gutenberg still, so we still have things like ACF. Anything else? Yep, exactly. Exactly, it's a better UI and the whole point of doing Gutenberg is like everyone sees a classic editor, right? And it's kind of outdated. So we work with platforms like Kentco and Umbroco, and if you look at the UI, right? It's really just modern, drag and drop. You have all these edit fields and edit panels. And then you look at WordPress and it's very basic. There's not a lot there. And I went to a presentation where they were talking about this and the whole point of Gutenberg is that because if we keep the classic editor, especially with the younger generations coming up and expecting very modern tooling, we're gonna start losing our market share, right? And WordPress is very fortunate right now where we hold a good part of the market share. I think I saw 60% of CMSs at one point. And so the benefit of being that big is you get developers, it's open source, so you get a huge community of developers to develop for it, a lot of tutorials out there. And we definitely don't wanna lose that. So this is a point of Gutenberg, it's to give us modern tooling so that we don't lose our market share. Exactly, and I think content editors are gonna love it because it's not a lot of the classic editor where it's kind of funky at points and sometimes you do have to go into the source to do what you wanna do. With the block editor, you should be able to just drag and drop your blocks and rearrange and use your panels. Yep. Exactly. Oh, it definitely is, exactly. I actually used to tell people that it's like if you know how to use Word, you can use a classic editor. It's almost the same thing. All right, so it looks like I am up against my time. Guys, thank you for coming out. I will be around all day if you have any more questions.