 Thank you Okay, hello. Let's build a Gutenberg block go Just kidding. We need a little a little more information there. Um, so hello My name is Laura shank. That's my Twitter handle Cool. Um, so I'm here from Los Angeles. Definitely my first time in Belgrade. It's pretty cool. Very exciting I can't say I really had heard of Belgrade before I don't know if anybody else was in that position, but it's really exciting to be here. Um It's a little about me. I'm a freelancer. I work with a couple different creative agencies, but I'm a front-end developer I absolutely love CSS really kind of my thing as well as WordPress, of course So I really got my web development career started by building WordPress sites And I also love teaching so I like kind of sharing all the stuff that I learned and especially with Gutenberg This is something I've put a big effort into learning over the past year and a half or so And so I'm really excited to kind of share that with everyone because it's not necessarily Intuitive coming from traditional WordPress development to get into Gutenberg and kind of all the different concepts that introduces There's a little monster because I like drawing them. I drew all my slides. They're a little bit sloppy, but hopefully fun Okay, let's talk about the big topic at hand JavaScript whoa Okay, how do we feel about JavaScript in here like general temperature of the room? It's crazy Okay, cool You're kind of like you're kind of like oh man I was like great HTML and CSS and like PHP and I could build themes and that was awesome And now I'm like what I have to do all of this other stuff that I for me. I kind of avoided for a long time I was like oh well jQuery's fine like that's great And now it's like oh my gosh. I need to understand like react and all these new things so That's kind of where we're coming from. You know the the learning JavaScript deeply task I was at a Word camp us when Matt and I like announced that and I was all like yes absolutely I will and then you know a three months later. I'm just like well. No, I don't need that we do now So Gutenberg It's kind of the premise of this workshop and kind of how I've set up everything I want to think about Gutenberg kind of as a little bit of a book here So we're really gonna focus on reading code like writing code of course, but the big picture of stuff So like understanding what you're reading There's so much syntax involved especially in modern JavaScript And I want to try to encourage everybody to focus kind on the big picture So if we think of Gutenberg has a little book of all the JavaScript, right? Before this workshop it might look like this like whoa, what is all what is going on and after we can kind of tease out some Basic concepts and so when you read code from Gutenberg You're able to figure out what what's doing what and compile things together. Of course, there's gonna be some stuff You still don't understand agenda Okay pair programming There's a lot of people in pairs some people not in pairs so the premise of how we're gonna do all this development work is pair programming and How many of you have pair programmed before like at work or in general? I mean it can be a very informal thing like oh, I'm sitting next to someone in a writing code But how many of you have done that like formally at work pair programming Okay, a few yeah formally and informally So I want to approach this like somewhat formally where we have to so each person really has a specific role of either the driver Or the navigator when you're working on code and working through different tasks So the driver is gonna be the person at a laptop So we only need one one laptop and that's gonna be the person writing the code and the navigator will be Directing the code and of course like little things like oh, this doesn't work Why don't you think it worked navigator and you discuss that? And Yeah, so try to try to keep that situation going and we're gonna switch drivers at different at different points in the exercises And then once again big picture over syntax, so there's gonna be like Lots of little ES six nuances. We're kind of just diving into everything and try to not get bogged down by that We're not gonna understand every line of code, but understand what things are doing is the most important part It's okay to feel lost That's kind of like our job as developers in a lot of ways It's like just to kind of be lost and fail over and over again, and then you get little wins here and there So if you feel lost, that's fine. You can always raise your hand. Someone will come help you if you're like, I totally don't get this I'm not having fun. Let us know Okay, now our block. We're building a block. What's gonna look like? So I'll try to think of like a simple component That like a common UI pattern that we see all over the web that's not necessarily in Gutenberg So Gutenberg comes with a lot of its default blocks but certain things like What you might call a call-out block or like an alert block could be a little section of Content that's pulled out from the general flow of a document. So It could be something like this. So these are these top two are taken from the WordCamp EU site So kind of same structure, but slightly different characteristics of the bottom ones from a smashing magazine the blog some salesy thing So there's kind of like a kind of break this down into a little structure So it's a section and then there's maybe a little title of a section and some content and maybe a flexible content area Towards the bottom. So we're gonna try to build something like that and it's gonna look like this So coffee tasting so I love coffee and very impressed with the Belgrade coffee scene. It's been good so far. I like it Okay, so that's our block on the front end. This is just in the 2017 theme So you all should have local installations of WordPress ready to go with Gutenberg installed and a basic theme 2017 works great So this is what the block is gonna look like on the back end Yeah, so there you go kind of similar what you see is what you get strategy and Just to break this down into a couple of different Components of what we're gonna be looking at in Gutenberg. So block controls So whenever you see a block, that's a different part of a block than the normal content areas and then these couple of editable content areas and then Some nested blocks so good where you can nest blocks rather than building out our own gallery block or building out our Own button block we can reuse nested blocks now and then finally the inspector controls Will allow us to change the blocks color and kind of repurpose it in different ways There we go tasting canceled And a couple other uses of that block. So let's get started part zero pair up So if you if you're at a desk by yourself and you're like I don't want to be with anybody That's fine But if you want to move now is the time to do it if you want to or maybe you guys can pair up Yeah, and then everybody please select what laptop you're gonna be using and go to this URL Anybody not have that website up stop talking Thank you. Wait this the way this is gonna work. There's if you're on that website There's like a big huge list of tasks. So I mentioned like pair programming Navigator and driver so the navigator is gonna be looking through those tasks I'm gonna go in and I'm gonna kind of introduce each section with a lecture. So, oh wait I guess you are introducing yourselves. Is that okay? Is everybody good? I was forgetting what tasks I put on the part zero Okay, let me introduce part to the lecture. So first lecture here We're gonna talk about Gutenberg as a single page application. Okay, how many how many of you are familiar with this term? So a single page app is kind of a new way of building websites That does not no longer relies on a page load for fetching information And we have something like this beautiful client side so our laptop on the front and then a server the bottom and so our Traditional page request would go something like this. So the client says, okay, give me post php Please of course and the server says, okay, here is the HTML CSS and JavaScript from post php and then We get the front end is rendered. So that's kind of our traditional request and that's what would happen Whenever you press update previously on a post you would resend that request and all of the kind of front-end assets would reload With a single page app. The difference is if we click up. Oh, sorry Single page app. So if we click update instead of having that page reload again We have a little being Here I decided to personify as a small ghost That saves the con saves the data to post content through what's called an Ajax request. So it's this idea of asynchronous Communication so rather than reloading the page We are using the same HTML CSS and JavaScript assets from post php But the the data is being sent asynchronously so we're not reloading the whole page This presents some interesting like issues as we will see as we develop the block because when we are when we change Our JavaScript or php. We need to reload that entire page So the Gutenberg development process is a little bit cumbersome because you're constantly reloading the editor And there are certain things that don't necessarily sync up. So it's not the ideal developer experience yet I think you know in the far future of Gutenberg. It'll become a lot a lot smoother But a key part of this In dev tools we can take a look at the network panel. Have you anybody opened this up before the network panel? Okay, yeah, so we can see the different requests that are coming through and that of course is our Ajax requests So if you were to click update you would see you know four or five different requests go through and that's Gutenberg kind of updating behind the scenes WordPress had a lot of these single-page app qualities previously Through like the media library, etc. But now Gutenberg's really capitalizing on that Okay, so now you can finish your introductions to each other because I know I've rudely cut everyone off. I was like I forgot that was part and I was like wait. Why are you all talking so much? Oh, I told you to okay So now I'm gonna be quiet for more than five minutes Probably and go through part so finish part zero and go through part one and kind of check everything off And then we'll feel around and see when everyone's finished. So I'm good Do you see what I mean part one? So scrolling down on the same website? You don't see that on that website. Yeah, so this website here So everybody should be here and you should see I can bring it up on the here, oh Wait, no, so part one you should be here. I'll work through all that I Update I I I I Okay, everybody hear me good Okay, let's start another little baby lecture here for moving on to next portion so the point the point of that Little orientation was just to in case anybody hasn't played with Gutenberg and a little bit and to see what's happening behind the scenes with those Ajax requests. So did anybody see anything interesting or surprising when you followed? The request URLs Yeah, so using the rest API so that if you saw anything that was WP slash json slash V2 post maybe a post ID that is hitting the WordPress rest API and the rest API provides a json response With data in json format Really really cool, and I wish more people not in the WordPress community knew about how awesome the rest API is But yeah Okay, so now on to getting our development environment set up for working with Gutenberg So the modern JavaScript Workflow can be a little bit more like a black box. I think then Some nice organized gears. So we see I'm Working with kind of this node and npm like build tool ecosystem for me previously It takes a lot of extra effort to kind of go in and open up that box and see what's happening under the surface So it's very easy to kind of Throw the carpet over what's happening so to speak so that that black box idea So just to go through Some quick definitions for terms we hear a lot when we talk about the modern JavaScript workflow So node node refers to a server side implementation of JavaScript So JavaScript is a programming language on the client side of a website and node is a Separate server side language, but it uses the JavaScript syntax so that Now JavaScript developers can also write server side code. So you only need to learn one language for those two parts NPM how many of you have worked with NPM before? Okay, how about a through maybe like gulp and grunt these task runners? Yeah, okay lots of hands cool so npm I like to think of as a Little app store for JavaScript so to speak so you're kind of pulling in different tools from third parties Then we have webpack How many people have worked with webpack? Okay fewer hands. How many people have set up their own webpack config from scratch? Yeah, cool. So My hand is not raised so webpack in a to Put a very blanket statement over it and combines smaller files into a larger file. So it's known. It's a bundler so we have Lots of small JavaScript files like it's kind of a known fact that it's nicer to work with smaller chunks of code Then really long chunks of code. So Webpack can handle those files and combine them in a very smart way so we can make one request and then Babel turns new JavaScript into old JavaScript essentially so Babel is a compiler for JavaScript that allows us to use all of these new ES 6 and now yes 7 I think yes next features So like the new features that are coming out in JavaScript We can use those before the support lands in browsers So you can write this new JavaScript and then Babel will translate that into JavaScript that is friendlier for old browsers Put a little groundbreaking quote here. I Just don't feel like configuring a build process right now. A Lot of people have said this so the thing is with this whole ecosystem. It's incredibly powerful And allows us to do so many amazing things with the web that we have never been able to do before but it's also very complicated and That's led to the development of tools such as create react app Have we had anybody heard of create react app before a couple? So create react app was developed by the in the react community as a zero configuration process for Starting a react app so you can essentially type in one line of code into your terminal and that would scaffold a react application for you So no config required however when you do that it means you're You're skipping a lot of steps and skipping a lot of understanding So it's a little bit dangerous to rely on tools like this completely But for the purposes of getting coding and in something like a workshop. I think they're fantastic So someone in the wordpress community amanda ways created create gluten block So piggybacking off of the idea of create react app It's a scaffolding tool for creating a Gutenberg block and it's fantastic So wonderful to be able to just write one command and have all our files and the whole build process scaffolded for us So create gluten block is available on the npm registry So npm again is that little app store so to speak and that will allow us to rather than configuring the whole build step we have our two main source and distribution directories ready to go so the source directory is What we're going to be coding in so that contains our The new JavaScript file so to speak so all the code that we're writing the react code Etc. And that's then going to be compiled down to the disk directory and those will be minified Things you're never supposed to touch because that is not code that humans write That's kind of what's created from our code in the source directory So how do we start using that in the terminal? So how many are comfortable in the command line? Okay, cool. Good. Don't have to be comfortable. I would say I'm like medium. I know comfortable is maybe a strong word sometimes So for create react app Hopefully this goes well and the internet doesn't like bunk out, but We're going to first you're gonna change directory and make sure you're inside the plugins directory of your local WordPress install And Then you're gonna run this This command and all of that I'm gonna change this slide because it's all in the part 2 So all the commands are in the part 2 so we'll take a few minutes to work on that now and this is where you can switch drivers, so whoever's coding you can maybe switch and Have the next person let me see what you're Yeah I I I I I I I I I I I I I I I Okay, so it looks like most people have the create new block installed Which I'm pretty happy how smoothly that went that was cool And we're gonna like quickly bleed into part 3 here. So Before part 3 you are going to start seeing this in in your block development So this means this is when you update the a certain version of the block and it's not matching What's in the database which is kind of by default what is going to happen as you're developing with Gutenberg? So don't worry about that when you see it and just delete the block and recreate it and refresh your page So part 3 the block files, so you should see some tasks under there in part 3 I Well I I I I I I I I I I I I I I I I I I Sometimes it's problem. Hello, okay Mm-hmm inside in it Dot PHP. Oh, this is I can't see anything. Hold up. This is Gutenberg itself wrong thing Hold please Okay inside a knit dot PHP Which is inside SRC here There this is where your styles are in queue and the and the JS is included here So if you uncomment this file M time function, that's going to add a version number to cash bust and Then also very important add a comma right here because that's typo and create good block my future open source Contribution will be adding this comma And then you can also make sure you do that for all of these so this is the CSS And then there's two CSS files and a JS file and so make sure you uncomment that and then whenever you reload your browser Do a hard reload so you can hold down on the Reload icon and do an empty cache and hard reload Okay, what what sorry everybody one more announcement because we're running low on time. Oh We started late. Okay, so we're running a little bit low on time. So just to plan out the rest of the Thing here So we're working on this stuff feel free This is cool, and I encourage everybody to do this But I would rather have everyone get into the building block part and digging into some react and like reading more code together So you can skip part four and go to part five after you kind of have your block loading and You're gonna go into the GitHub pay the github Project for this repository And then there are branches also you can like totally do this on your own later But there are branches that introduce little bits of code that are gonna Apply certain of these characteristics to the blocks like the editable area adding the toolbar And so what your task will be is to compare what you have with the answer for adding an editable area in Block J s on this branch And then see kind of see what the changes are so practicing that like reading code and copying over the chunks That are in this file that are not in the other file And then when you save the changes should be applied so you can kind of step through building the block in that way Just means you give a dynamic version so every time you save the file I You don't need a candle every time I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I