 I think everybody is here We'll start a little bit early because I know there are going to be a lot of questions at the end of this And I'll give you a five-minute count down when we get close. Okay, I've kept it a little bit shorter intentional because I figured it would be awesome. So, hi, I'm Doug. This is my friend Kevin Ease I'm glad that I can call Kevin my friend and Kevin and I have spoken at several work camps together over the years Kevin is the CEO of a company called RoboJuice and they do really cool stuff building websites for people Kevin also happens to have been building a card game. I'll let you ask him about that He's been building it for a long time. So he has a cool prototype and that's something that's interesting to me So, I was going to talk about Gutenberg blocks and I think you will find this very interesting Thank you Doug and thank you everybody for coming to this talk I hope that the time that you give me is a worthy investment for you and you get something out of it about it As Doug said, my name is Kevin I've been doing WordPress stuff for a little while now probably since early 2000s maybe I guess 2007-2006 And so I learned a lot along the way and I've seen WordPress kind of grow and evolve over time I remember the introduction of custom post types That was quite a day Mainly because what you expected custom post types to do they didn't really do that well at first But WordPress has come a long way since then And so hopefully as we take this journey into where WordPress is today we can reflect on the past and really history in general as as far as publication goes and really take a look at why WordPress has introduced this thing called Gutenberg and That reason really comes from this stinging problem in the WordPress ecosystem that a lot of really good developers and really smart minds have addressed through different features advanced custom field building their field plugins For the lack of like an API and WordPress for that kind of thing But also these page builders right like beaver builder and element or and others making Divi There's just so many of those that exist and so Why are these things being created? What problem exists that WordPress is trying to address these other systems are also trying to address? And that problem is this right when you're building a WordPress site and you're kind of new to things and Somebody's built your site using older techniques You kind of experience this this is what you you see in your mind Okay, I'm not touching anything And if I touch it it will crash and you know, it might not be so fun for everybody If you remember back in the day before custom post types And solve this problem you did a lot of this we still kind of do a lot of this There's just a page template for everything and then there's these instructions right have these instructions that say If you want a portfolio you have to go to your blog post you have to tag them With portfolio tag that way I can use the query system to pull in all your stuff So you have this unique page because I didn't have post types the time does anybody remember those days Or you would have to go into that. This is very early on But even still today we still have this problem and I think this is mainly what WordPress is trying to solve is the problem of We look at the web and in context of pages like full-on pages and Each page that has something unique about it. We have to make a new template. And so every time we want to build something Two columns three columns. We have to take that goober But basically we want to produce like these Every page is like this different thing But we can't really take the bits out of those pages that we can use in other places And so we're essentially not reusing our code like we should be And the interesting thing here is we've already solved this problem in code if you code at all You know what this is about. This is about looking for patterns What things are being reused here the first thing and then what happens if I want to change the person's I have to update it twice, right? So we introduced this thing called variables and now hey, I want to You know You know Hanna's Gutenberg and I want to use his name in place of mine. I can drop it in now But up to this point WordPress really hasn't done this very well when it comes to use your experience And that's what Gutenberg is trying to do is trying to take these little bits of things so we can reuse them Much like you do with this and what would you do without variance? Right, so I don't think there's anything to be upset about when it comes to Gutenberg It's actually a very good thing. It's a very good thing for user experience It's a very good thing forward for WordPress and while there's a lot of debate on good bad decision the right way wrongly The right thing is really that they're making a decision here They have to move forward we have to move forward as a community and embrace the way the web is today And this brings us to some history, right? So what is it about this who has? Gutenberg guy that that made him so special, right? And I think we're gonna learn a lot from this because this is where we are today This is how we're going to embrace what's happening In his time a lot of people were handwriting All the text for these manuscripts and books and it you'd be lucky if you got your hands On one of those things because it was either written by like a monk who just spent all of his time writing everything down in great detail and there's a lot of craftsmanship a lot of artisanship in That process and so that was very revered as an industry thing And you have this thing called movable type that had been taking place and you know Asia and those parts are quite a while But nobody had really taken those ideas to the place that Gutenberg had if you don't know movable type is essentially Before Gutenberg really kind of brought this to the forefront of the industry you would Essentially write your letters on a piece of paper and then you would lay them flat down on a piece of wood And you would cut out your letters as a mirror image That way when you would stand something out it would come out opposite way so put it on opposite So when you stamp it out it comes out the right way It's kind of you know nearer things and the way they would do it is they would take the entire Document pretty much and they would just put it all in this wooden slab And you have a full page handcrafted each one What movable type does it says let's take the components like variables that are the same and let's reuse them And so you basically just line up all these little items here And then you can create lines and paragraphs and pages from these unique things And you don't have to cut out your piece of wood every time That's really a concept that Gutenberg didn't really invent but had been around for a while What he did was he combined it with the printing press and he combined this idea of Putting these letters together and then putting those letters into a machine that you would basically crank on and This this big basically wine press type thing would come down And it would press into the paper and get ink on you look that you have this really nice sheet of paper and So he's using these individual components right to to build These pages and now he can print hundreds of pages and build books and now you can have things like libraries For books because we have enough to share with people and make them more accessible There's a lot more about Boomer that's interesting, but I think that's what pertains to us today Here we have the old-fashioned way. I'm gonna take a big page I'm gonna you know do that one page and then now it's time to make a new one I've got to go to each name individually all over again, and you'll see it here, but more modern today You'll see like advanced custom fields where okay check this box if you want this to large appear on the page and If this select menu is done, I'm gonna have a conditional statement That's gonna give me another metal box because then you're telling me the page is gonna be different And so we have all these configurations that dashed with that we saw earlier To try to get around this but we really haven't solved the true problem, and that's what Gutenberg is after and we've seen this with Design in general with the web which is good I think mobile has really moved us into that category because you have these center displays We need better ways to display content whether we want complex layouts or not and You know you have pages like this one that You would expect to see on a mobile device and more desktop because people were doing mobile first nowadays Like you don't have sidebars, you know you're used to the sidebar Layout so what we end up having is like with this page you have different blocks different sections of the page that you can reproduce with different types of content into it and So that's what we're gonna look at. We're gonna look at building out these blocks with Gutenberg and how it uses them So with that being said everybody ready All right, so the first step you have to install a plug-in first WordPress made it to where you can just go to their WordPress plug-in repository go on there download a plug-in Install it and you should be good to go So what does Gutenberg look like if you haven't installed it? What is well? Gutenberg basically makes it easy to go in if you've used medium or something like that It makes it easy to kind of go in and start adding different Components to your page and so it does change the writing experience. You're no longer using that Microsoft word as editor Everybody's basically based everything on Microsoft Word up to a few years ago really and so you can go through You can add different blocks and things to paper So here I'm adding a quote before I had a headline there was an image up before and it's not I'm not pulling those things into an editor I'm creating blocks of things And so even in Gutenberg I have two separate blocks here those two are obviously separate But it kind of knows that both of those are paragraphs So it's like that now it combines those two blocks and the once now I have a one paragraph So it's it's smart about how it does things the writing experiences actually fairly good if you're doing fairly simple Configuration if you get into two column layoffs that kind of stuff some more good stuff might Feel a little different, but that's ultimately what Gutenberg does now The question then is how are blocks stored? How's all this data stored? So it still uses the W are the post content section But then it goes into these comments. Who's aware of like it doing this? Who is this new to? Who's who's the new to the idea that this stuff gets stored in the comments? so that's how Gutenberg is going to store your stuff basically And the nice part about this is because there are comments if you turn Gutenberg off you still have all your content in your site So that's very intentional doing it that way They're also trying to maintain some level of backwards essentially it's sort of these like codified comments and If you were to do some more advanced configuration Let's say we wanted to control this block here You'll see that they give you this background capacity control here They're also going to store those kind of meta that meta information inside the comments as well And you can do this for some blocks some blocks you can So now as you can see here, we have this dimension ratio 60 over here which Is basically that? Jason code is the configuration to that lock And if you were to go and edit this code within there You're gonna be this like a modified this might have broken something So in that regard, you don't really want to go into the code and things at this point they may address that Obviously, Gutenberg is not quite ready, which we can get to those sorts of questions in but Essentially Gutenberg is going to store everything inside of that old editor database section So let's look at coding a block So here I'm going to create a basic block And you'll see that I've recently used that so the blocks that you've used recently will go into that Okay, and if I click on the Gutenberg basic lock it has there it says hello world And we'll get making this in a second. I can remove it. And then you also know that If you click on something underneath you also have like the block available in that short cut section I haven't really figured out when that gets triggered if it's a recent thing But essentially you can get it there And So that's the block we're going to build we're going to build this hello world block. Okay So PHP, what's the PHP stuff? How many PHP developers in here? Okay? That's gonna be easy so the first thing I'm going to do is I'm going to find a Constant that way I can access my directory because I need to be able to load some JavaScript for Gutenberg Gutenberg's pretty much written in JavaScript strictly CSS using Okay, so I'm going to use this book Which is a q-block editor assets and the editor assets parts was important here because this is the assets for the editor on Backend, okay, so this would be where I load my JavaScript in my CSS For the Gutenberg editor on back end and then what script am I going to load up? Well, I'm going to load up one called block JS. You can call this whatever you want and I'm going to give it a handle with your computer with handles and I think you these groups It basically gives you a unique name for your script so you can reference it later and that reference Can be used in what's called dependencies So this GB dash block basic is my handle that I can tell this other scripts that This specific block JS file is required for that other script or does that make sense everybody anybody who's confused by that statement? So then down here is my dependency left list, which is the wordpress handles Okay, and it's basically saying in order for me till before I load this block when I want to make sure that We're pressed blocks. JavaScript is loaded. I want to make sure that I have my translation stuff That's what that is. That's just for multiple and depending on your users and what you're building you do you don't have to use that It's pretty easy to use so there's nobody's about to but budgets and timelines and then you have these WP elements Handle which is going to load in some more JavaScript So we need those three really to make a good per block. That's it then we can get into Adding that into our hook here. Just pretty simple I think most of us know how to do that and then we get right into the JavaScript So this is where things get a little interesting And basically You've got to know a little bit of react at this point. Since this is not a react Talk, I'm just going to focus on showing you the brevity and how quickly you can make these blocks I'm not going to essentially get into the fine-grained details of every little piece of block I'm going to essentially be walking us through how to code a block and get it into the page and then a very very basic Version of how to make a block a terrible and then once you have that information. I feel like that'll Remove some of the stress or confusion that you might have around how these things work So that's the goal here But the first thing we have to do like with anything in WordPress you have to register things You know that's registered post-hike. You've got to register all kinds of things taxonomies and so Number blocks are no different. They're going to work with that similar pattern So it doesn't feel like you've to learn something new every time. However, instead of in PHP It's a JavaScript. And so the way we load that up is through the WP global object So how many people have access that WP global object up there? To do anything if you make like a custom image uploader or you access the whole back home stuff that WordPress has That's where you're going to go. And so all I'm doing here is I'm Accessing that register block type method from the WordPress global state that way I can call it down here Okay, so I'm creating that variable so I can use it as a function and then As part of the registration process, you're going to do what you've always done You're going to have to prefix or name space Your block that way if I created this ball called basic and then Doug who's introduced me introduces His own block and his plug-in. That's also called a sick We're going to collide and now it's a race condition who gets there first, right? Who gets there first Wednesday if they don't collide with each other completely just break things so Essentially what we want to do is one thing space the way we do that is by adding our prefix to the being with a Forward slash or is that a backslash? So in this example, I've just Prefixed it with GB, but it doesn't have to be GB. It can be your initials or the company or the theme or the plug-ins acronym whatever you want to use there and Then that's going to translate later, which we'll see into our thing, but that's how you kind of name it then the next bit here is What we care about if you remember in the admin we had it said GB basic was our block and we clicked it at a hello world It also had that shield icon on it and it was under the category of common So if we look at that What you'll see here is that under this box section? I have a shield. It's called you basic and it's underneath the comments Section and there are a lot of other sections. There are basically common formatting layout widgets and embed and each one of those sections you get to control where your kind of block shows up and That's how you're going to organize them into the menu and those are your categories Then you have the list of dash icons that come with WordPress so WordPress really has a lot of icons that you can use to access and Those are going to be available on the WordPress side really and just look out dash icons The ones that you're probably wanting to use are the miscellaneous icons They're typically worth bottom down here You can see how the shield icon that I had selected and then what you'll have to do is you won't use the dash Dash icons that I should just use that kind of shield all section there And that's what's going to be the code that you use For your icon and the JavaScript and then you've got all these icons available to you Obviously get fancy with your CSS if you want and hack things. There's no reason you can't You use your own code and whatever way you want. There's no reason you can't use a little JavaScript to do whatever you want It's those are that you guys that WordPress provides to make the experience easier And then we get into Once we have all that so that's pretty simple. That's like registering the post I've not to partner Well, once we get into that we need to know like how do we actually get that element that pops up on the screen to show there? specifically on the back end and the front end and so the back end there's this property called edit and That's going to require a function and look here that I only reference in the functions. I'm not calling the functions Okay, so that's something that I do quite often is I'll need to reference something, but I'll actually call it So I'm whatever you call it you put the double parentheses to end and that calls the function We don't want to do that. We just want to reference it and For the back end and the front end I can use the same code for this basic block because I don't want to be edible I just want to put that like paragraph tag on the page and put hell of a world in there And so here's all the code that I need react wise to Load up that basic block into Cooper and here within probably about 23 lines of code I already have everything I need to make my first Cooper block. I mean, that's pretty good. I like that a lot and Basically if you're familiar with react Then this shouldn't feel very familiar to you But ultimately if you're not you just create you get this create element object or method or whatever you want to call it and You simply pass in some parameters and I'm going to say I want p-pack, which is what this is here This class name props class name. I Can tell you where that gets pulled from later, but essentially it's gonna be a Yeah, I'll tell you later and then there's the text that goes inside of the element Okay, so again, like I said, you're gonna have to know some react to start really building these and so this The section where says class name colon props class name. What does that do? well, that's gonna add the class name to our paragraph tag and Basically, it's just gonna take that GB forward slash basic It's gonna remove the forward slash replace it with a dash and then a pin wordpress dash block at the end And what we'll end up with whenever we click that GB basic Gutenberg block in the admin is this is what we'll end up inside of our Code so it's very simple block. It's crazy paragraph tag. We can't do anything with it, but it says hello world And that's really that so then we have CSS and The CSS bits go underneath where we included our script. So just the back-end CSS here or to do a basic Adding of CSS. We're gonna require that the blocks CSS is already been loaded and Then we just drop that in line with the rest of stuff So pretty easy php-wise and that's that's really all the php were ever really going to use for the back-end So then let's style our hello world instead of just being plain old text Styles on there and see what happens So I'm gonna take that class name. I had earlier on the p-tag Put some styles on it misty rose a red, you know border and that's how I get that So when it comes to the front-end, it's a similar process this time our book is a little bit different instead of editor assets It's just Thank you block assets and that's gonna drop it in the front. That's we're gonna be able to override the front-end I think you will find if you use this you don't check for is admin within it You'll actually get this same code on the back-end as well So you can end up with if you only wanted to do this for CSS for now that would work But I would encourage you just use this for the front-end stuff And then you know, we're just gonna drop in some front-end CSS into that section and Then the same thing applies whatever the markup was in Gutenberg on the back It's gonna be the exact same markup on Front-end so when we look at that in our design on the front-end I'm just using the 2017 theme, I believe and I've styled it yellow for the front-end instead And so that's what shows up. It's just the block there, but that doesn't really do much interesting That's just our hello world example. What about making these editable blocks, right? How can I be able to type into this so if I want a block that Maybe is a Twitter call out for example, right? That would be pretty warm that would be a little bit more interesting So how do I make it to where I can type some text in there and then do more interesting things? So if we look at this I'm gonna show you a bit of a block here If I go to blocks, the icons change a little bit and now it's a blue box But instead of the world, I can now go type inside of that block So certainly this has to be like a lot more complicated, right? Well, it's not too much more complicated when it comes to the JavaScript You just need to add a few extra elements here and the first one of those is this attributes Property and we're gonna access this thing called WP block sources children over and say that is a variable You can obviously access that directly or right here. That's what we're trying to access it We're just gonna essentially say hey, we will look for a content of our children paragraph tags for our block and Then we're gonna update our edit and save methods to be this instead of gd underscore basic We're gonna have some new methods and and because the back end is gonna be editable But the front end is not gonna be out of it. We're gonna need different methods We can't just share that same function between those two properties So for the edit bit really only a few things Change here. Okay, this isn't too much more code. However, we're gonna load this editable Block component and we're gonna use that as our element instead of the paragraph tag Okay, so now I have that that I need to clear what my tag name is I could call it a p-tag or if you wanted to do like a link to that I hashtag on Twitter or something You know you can make it an a tag, right? So you can just start to play with the onus here in that So we're changing our our placement of some things and then we're adding a little bit more functionality here, so we're saying Whatever the content changes whenever I'm typing in a box and that changes what do I need to do? Well, I need to tell my attributes that I had created earlier That there's some new content and I want to save that content to that area and then This other stuff here isn't so important as to it should simply map kind of to those places the attributes property and Then just some other little little notation there but that would essentially give us what we need and Then on the the basic save section, which is for our front and we don't really have to do a lot more here We can simply just make sure that we're grabbing the content that we created earlier in those attributes So that way we can instead of hello world right here We want to grab the content from our our attributes that was in the registration process And we just want to know that out right here on the front and inside of the p-tag And then we have our class name here if we wanted that And then for the CSS We we do the same things that we changed the registration name here instead of GB slash basic It's dash at it and Then our class name would have changed so now I can apply different styles. Let's add a little content I have this variable here that we kind of represent the output that you get and you change some things and add a different color style to it and Then on the front end, but I don't want to change the front end look and feel So I'll just change the actual class name on that CSS and That is how you would end up making an editable block and WordPress Gutenberg Now there's some valuable links here. I don't want to go into much more detail about Gutenberg blocks because Mainly you really have to have some knowledge of react here And I can't really cover the full scope of all those things, but I do have resources for you if you really want to dig into How this works more and I'm going to fill all your questions as many as you can to answer But there are there are some really good links here That you can take down And I'll also provide these links and slides to talk published earlier I'll give you plenty of time. I'll leave these up But basically there's this really nice boilerplate That took a lot of example today from so you can kind of go in there and it shows you how to make that basic block it shows you how to essentially Create the editable block it shows you how to create a block that would be like that tweet link and It has plenty of comments and really great resources in there, and that's Just great resource and that's gonna be updated over time And then you have the plug-in for Gutenberg itself plug-in slash Gutenberg and Then you have these these other two courses that go into a way more depth. They're also Mention these but I think these are really good places if you really want to get into Google or blocks You're gonna have to take some steps to learn some new things when that will accept learn JavaScript deeply He really was speaking to the future of the word press Because while we're accustomed to building most things in PHP and word press these days that is changing Especially as the rest API Continues to grow more or more press to development is going to be geared toward that rest API Which you will interact with with the job of scrim so knowing these tools Especially react because that's what word presses decided to use for a lot of other things It's going to be good to learn now React for beginners is excellent very very good highly recommended Westboss does that your community with him and then You have course where you can take what you've learned from react and start implementing more things like basically That customization piece or change the opacity of the image you got you gonna have a whole lot more there that you can dive in with so Thank you so much for your time. I'll hopefully this this dip your toes into What word presses trying to do with Gutenberg? And I'll open it up to questions and any kind of Questions about you know this group very actually can happen that kind of stuff, but whatever we want to talk about now