 I have been working and messing around with Gutenberg since basically, you know, it was in beta stages and it was starting to come out. And I would be really interested to get an idea from the room who here has not yet had a will hands-on play with Gutenberg. Wow, that's a lot of people considering that it's actually in WordPress, you know, it's like it's actually released. And I'd say most of the people here haven't used Gutenberg. Out of the people who have used Gutenberg, on a scale of like one to three, one being you don't like it in three years, you love it, how do you rate it? Can I get, or even if you've messed around with it a little bit, can I get your one's hands up? A couple of twos, okay, and threes, okay. Most people in two, most people right in the middle, okay, and then gosh, all this hands-up stuff. So I also want to know, I want to get an idea of where do you sit in terms of technical ability? Put your hand up if, and we'll keep it up for this one if you've modified your theme before. Okay, and keep it up if you maybe have written your own theme or plugin with PHP, and keep it up if you've got some experience writing JavaScript for Gutenberg with React or something like that. Yeah, there's still some hands up, but a lot of them have gone down. And I wonder if that's partly the reason why maybe this room in general hasn't got such a crash-hot opinion of Gutenberg. And for me, I love it. I use it every day, I blog with it, I'm all over it, and I develop for it, and I have a lot of fun with it. But I absolutely see this need for regular people, for regular agencies, developers who might not have taken the leap to learn JavaScript deeply, that there's this real need to figure out how can we embrace Gutenberg, how can we give our clients the Gutenberg experience? And that's something that's kind of difficult and kind of hard to wrap your head around until now. And that's what my talk's about today. So here's my second slide. So today's talk is for you if you're the kind of person who wants to learn how to build blocks, and you're the kind of person who is familiar and comfortable with HTML and CSS, maybe even comfortable with putting in a little PHP template tag, and that's maybe where your ability stops, or maybe it goes beyond there, but it's always nice to do things a little bit easier when that's possible. So what we're going to do today is a little bit out there and a little bit nerve-wracking, and it's the sort of thing that they tell you when you're a speaker, never do this. We're going to do a live demo, and not only are we going to do a live demo, but we're going to build a block from scratch, and you are going to decide what block it's going to be. How does that sound? You think we can do it in the space of this talk? You think you can build a Gutenberg block? Yeah. All right. So the first step is we've got to figure out what sort of block we're going to build. Has anybody here had an idea for a block that you wished existed? Maybe keep it on the simple side, given that we're limited in time, but yeah, go for it. A table. It's a good one. There is actually built into Gutenberg a native table block, but we could explore building sort of a custom table. Is anybody else over there? A team member? Oh, yeah. I like that one. That's pretty good. So you'd have a profile picture of them, maybe their title and their name. Oh, yeah. That's great. Yes? Testimonial block. Testimonial block. Also really handy, yeah. Pictures and people. Yeah. Yeah. That makes sense. One other or? No. Well, why don't we take a vote? We could do testimonial block. We could do a table or we could do the team member with the photo and the title and all that sort of thing. So hands up for the first one, the testimonial. Hands up for the table block. Hands up for the team member. Oh, looks like the team member wins. All right. Cool. So when we start thinking about building blocks, the first thing that we really want to do is figure out what the block looks like. So I don't know what design tools you might use. I know, I work with some agencies that like have embraced Figma, Figma's fantastic or maybe you're on Sketch or something like that. But I always just like to start with pen and paper. So let's start thinking about this block. We'll put it in a rectangle. Now, team member, what do we need? Call out to me some of the things that's going to be on this block. Photo. Photo. Photo? What can we do? Photo in a circle. What do we want to put in the middle and the side. Top optional top left middle? Okay. We can make all these fields optional. You know this, I heard someone laughing at my picture. That's not very nice. I heard someone laughing at my picture and that wasn't very nice. I was offended. All right, I think we should feature their name fairly prominent up here. Maybe like, and then below that, their position, yeah, the title, yeah, all right. We'll put that slightly lower, anything else? Contact details, I heard, all right, yeah, that's a good one. I'll put that on, yeah, about a little description. All right, we'll go with that. So let's set aside an area here for, this is gonna be, you know, some text, and then maybe we'll put like, our social buttons at the bottom, like email, Facebook, Twitter, yeah. All right, how's that look to everyone? Good, so let's think about this a little bit more. We're gonna need, from over here, we're gonna need an image. We're gonna need, what's this, this is their name. Now, we might call this like a profile, photo, and that's an image, we're gonna have a name, that's just gonna be a text field. Same here with their position. Over here, this would be, what do we call this? Bio, nice. That's more than just one line of text, we might use a text area for that. And then we're gonna have these three social buttons, and they're all gonna be URLs, yeah. Email, Facebook, and Twitter, URLs. All right, does this seem like a familiar process to you, in terms of design, how you would normally go out about building a website? Cool, let's put it together. This is where we move into the live demo mode. If you don't mind, I'll just drop the lights down a little, because, so that you can see my screen, a little better, how's that? And, all right, well, this is code, but let's switch over to WordPress. All right, so this is a WordPress install I've put together just now. I'm gonna switch to my child theme so that we can make some changes to the theme later on. And to build what we've designed, I'm gonna open up BlockLab. So BlockLab is a plugin that's available for free, that really sort of enables us to get through most of what we need to do here. All right, I got my design, I got BlockLab here. I'm just gonna trash this example block for now, add a new one. So what's it called? What are we gonna call our new block? Team member, that's it, yeah, team member. And before we add our fields, I like to just go in here and choose an icon, that one works nicely, and we'll put it in, ah, common will do, all right. And we'll go ahead and add our fields. So the first one was, we'll put in their name first, and that's just a text area. And BlockLab has these extra fields here for help text and default value, placeholder text, that sort of stuff, but we'll leave that for now. We don't really need that for a name. Can put in here title. Oh, no, we're gonna call it position, when we, we're gonna have their profile photo. Right, and here we change the field type to an image. You can see the options for that changed a little. Close that. And then what have we got next? The bio is gonna be a text area. Close that. And then we have email. We'll put it, we'll ask for the email address. And then, and we can do a mail to link that way. We might put in the Facebook URL and Twitter. Now, if I was doing this for a client, I might choose to fill in a little bit of help text here, like I might put in here a link to the team members Twitter. Because we don't want just the at handle, that's not gonna work for us. Although, you know, we could work around that, but there we go. We could even put in some placeholder text to help with that, okay? And we'll hit publish, and that's done. So, pretty quickly, we've already built out the structure of our block. And now we're just gonna work with familiar languages like PHP, HTML, CSS to build out the block itself. Now I'm not a CSS whiz, so any front-end devs in the crowd might have to give me a hand as we do that. So what we have to do is we're just gonna create inside of our theme a new theme template for our block. And it's in here 2019 child slash blocks slash, I'm gonna copy this block dash team member. So here I am in my editor. I've got a blocks folder already in my theme. Got a new file there. Blocks dash team dash member dot PHP. I'm good to go. I can start writing out my template. So what's it gonna look like? Start with a div. Now we want the profile photo. I could use flexbox or something fancy here, but I might just float it to the left if that's okay with you. I'm even just gonna use a straight image. We'll just leave the source out for now. Then we want the name. We might put that in the H2. I'm just stubbing this out. We're gonna put the position in H3. Any SEO experts here have a problem with that? We'll put the bio in a paragraph. Let's just put a few little comments in here. Make this the name, position, bio. And we'll put in maybe these social things inside of another div. Let's get super fancy actually. Instead of using a div, we'll use a UL. What do we think? Good call. We're gonna have email, Facebook, and Twitter. Obviously this is gonna be blank to start with, but just to test that it works. So that's it. That's my template. Pretty straightforward. We'll have to make sure we fill all this in in a second. I actually put in these values, but let's just see what it looks like so far in WordPress. If we refresh this page, we can see now this is the template that it's using. And in a new tab, I'm just gonna edit my hello world post here. All right, I'll skip these tips. Insert a new block. Here's our team member. All right, none of these actually do anything yet, but why not fill it in? Call out a name to me. I miss that, sorry. Fred, Nirk. Nirk, okay. Silent G, oh, thanks. How's that? And Fred's our resident. Sorry? Techhead, all right. Oh geez, in anticipation of this talk, I did download a couple of example images we might use, but I don't know if I got any of a person. Let's find out. We've got someone pouring coffee. That'll do. We'll drop that in. And all right, any copywriters in the audience? Oh yeah, okay. Oh, dollar. Yeah, and you're okay. Oh yeah. We'll leave out Facebook, because yeah, Facebook. The real Fred Nirk. All right, now if we click away from here, we'll get a preview. Now our preview isn't what we've planned for it to be, but you can see already that we've got that H2 happening in there. We've got our dot points, which is really nice. I've noticed that, I've just noticed this now, is that our 2019 theme includes some predefined styles for the H2 that I kind of don't like. No, I could sort of just counter those in my style sheet, but instead of doing that, I think we'll change to a H3 instead. See if that helps, we'll change this to a H4. It is just a quick work around because I don't like those 2019 things. That's a bit nicer. All right, back to our template. Next step is we're gonna use a couple of really, really simple PHP functions to pull through the data from our block into the template here. So we need to know these field names. That's what we're gonna be using. First one is name, and we can do it really simply here. Just get rid of this. We're gonna use block underscore field and then put in name. So this here, this name is this here, all right? And then we can do the same thing. We just copy paste this. Block field, what do we call this one? Position. All right, and then we can even do the same for bio. Now, the image, let's just see what happens when we put in block field image. What did we use? Profile photo here. Okay, we'll come back to the social in a second. Let's have a look. We can just click in and then click out. It loads it again. We got our image. That's nice, and our name. That's all looking good. Obviously, we need a little bit of style happening, but we'll get there in a second. All right, let's put in our socials now. What I'm gonna do is I'm just gonna add a little bit of a PHP chunk at the top here, and we're gonna pull through into variables, our email. And instead of block field, which outputs the value, I'm just gonna do block value, email. And that returns it so that I can put it into a variable. Hopefully that makes sense to you. We're gonna do the same for Facebook and Twitter. I'm just gonna check that those are the right names. Email address, there we go. And then down here, what we can do is we can just do a simple if block. We're gonna do if not empty email, and then we can do echo email. All right, so we're just checking to see that we've actually got an email address in there. And if there is one, then we'll output it inside of a list item, okay? Now I'm in favor of coding standards as the next guy, but this is a live demo, we wanna get it through it quickly. So don't nitpick on me for that. All right, so if empty email, I'll put the email, empty Facebook, empty Twitter. Anyone see any mistakes here? Looks good. Okay, let's have a look, see what happens now in our block. We just click in here, click out again, there you go. And so you notice we didn't put in a Facebook, so we didn't get that out again. So that's how we use block field and slightly different block value. The next step, you could probably imagine, we're just gonna get a new file here, block, same name, block-team-member, but instead of .php, we'll call it .css. And now we can start doing things like this. Let's see here, we're gonna go our float left, height, well, like 150 pixels with, it's gonna be auto, something like this. It's not gonna work with border radius if I just did an image, so I have to put it image inside of a wrapper here. Span class equals profile photo, border radius, 75 pixels, and then we can do this image with 100%. That's a, like I said, whoop, I'm not a CSS expert or a front-end expert, but I think that should do the trick. Yeah, maybe, no. We might have to refresh to get that CSS. Overflow, really? Oh, yeah, you're right, I need overflow here, nice. All right, let's, sorry, I forgot to save it before I got rid of that, now we have to put Fred back in. Ah, sorry about that, everyone. Okay, well, it's getting there. Slowly, we're gonna need a bit of padding here. Why is that overflow not working? Oh, not padding, margin. Who called out display block, nice work. Oh, no, no, I'm just gonna update this, isn't it? There we go, look at that, hey. That's, we didn't actually need too much more than that. So, of course, all we have to do here is view post, and we'll see it on the front-end, same here. I guess we maybe want to write some CSS because our wrap is not working. I'm guessing there's some styles applied to the header, but you get the basic idea. I won't put you through the ordeal of me trying to get those into circles, but if you're a front-end developer, I'm sure you can do that. But you get the basic principle here. Some of the things you can do with this, though, is it can really go even much further beyond this. Like, you might decide that you wanna build a block for your, we're commerce products, right? And you might wanna put them in a slide show or something like that, and you can put in a repeater and have, you know, populate them with each one with a product or something like that. And you can go nuts. You can use WP query inside of your block to create a query and pull through particular posts and show them that possibilities are as endless as any old theme template, which is what's really exciting to me. It makes building for and developing for Gutenberg a lot more fun and a lot more accessible. So, that's me. That's BlockLab. Hope that you found this talk useful. If you wanna check out BlockLab, you can at getblocklab.com. I would like to take questions. Yes. Hang on, just bringing this. So the million dollar question is, why is WordPress not built this into Gutenberg? Why is WordPress not built this? Well, sometimes I wanna answer people, well, you'll have to ask WordPress, but of course you can't because WordPress isn't any one person. It's a community of people making decisions together. I think part of the reason, speaking honestly, is the earnest of Gutenberg. And if you'll allow me a little side thing here. Okay, so I'm gonna go off track a little bit. This'll be fun. So the best internet ever was the internet in like 2004, right? 2005, something like that. When there was no sort of centralized place for everything, everything was messy, everything was kind of ugly, and it was hard to find stuff that you needed, but gosh, it was fun and you could discover and you could explore, right? And the essential idea of the internet is that it's a distributed system, right? So web distributed around the world and you can end up anywhere. These days it's getting less and less distributed, right? Like we have Facebook, lots of people think Facebook is the internet and you can find almost anything there. Google is now not letting its visitors see your site, it'll pull through the content of your site onto the search results, right? It's becoming less and less distributed all the time. I think that's a real problem because I believe in this vision of the internet. I believe in this idea that the way it should be distributed, that content creators like you, it should be easy for you to put what you want out there. But the reason why it's becoming more and more or less and less distributed, more and more centralized is because consuming content on those platforms is a lot funner. It's a lot more user-friendly. It's a better user experience, right? And so it's sort of hard for us as publishers, as content creators to put content out there that competes with that. So how do we find a solution? Well, to me, that's what Gutenberg is about. Gutenberg is about making it easy for content creators to put stuff out there easy for people like us to create these highly engaging, interactive, like high quality content all over the internet, not just in one place. But in order to do that, we need to build a product at Gutenberg which isn't only working with this major driver of the internet WordPress, but also works with a lot of other platforms. Did you know lots of people don't realize but the latest version of Drupal has Gutenberg built into it. Gutenberg was originally created for the current version of Drupal, works with Gutenberg. And Gutenberg was created for WordPress, but the big picture of Gutenberg, at least to me, is to get these tools to create these engaging experiences into the hands of everybody who wants to create content on the web, not just WordPressers, but anyone in the distributed web. So in order to do that, we can't be platform-specific, we can't be just tied down to PHP. We have to build something that uses some of the more difficult modern technologies. Sorry, it was a bit of a rant, but hopefully that answers your question. We have time for more questions. There is also a bit of a change in tact. Our speaker for the next presentation has not showed, so we're gonna do an alternate session. So while we're organizing that, let's just keep the questions going. Yeah, I have a question over here to your right. It's Pat, I have a question about that block. So would it be easy enough to then create a block called Team List that you could drop onto other pages using that content that you just created? Yeah, absolutely. The only change that I would make in that case is that I would create a repeater field as my first field in BlockLab, and then put all of those fields that we did create as sub-fields of the repeater. Hopefully that makes sense, but that would just then allow us to go new team member, new team member, new team member, new team member, and fill out all of those fields. Okay, yeah, cheers, thank you. Given what you said about Gutenberg being used in Drupal and there's a Laravel plugin for it too now, how easy is it to export from BlockLab into a format that you can use standalone without having to install BlockLab? Yeah, it's a great question. It's something that we get asked a lot, which is wouldn't it be good if I could take my blocks that I've created and export them to put them on my client sites, maybe without needing BlockLab installed? And the answer is that in shipping in WordPress 5.3 in November is a new block directory. And I'm still coming up, like still learning about what it does, but my understanding is we're gonna have, in WordPress we're gonna have plugins, gonna have themes, we're gonna have blocks, right, as a separate thing for the first time where you can install these custom blocks. And this is a new thing coming to WordPress and we've been waiting to see what that looks like and see what the format for that is before figuring out how to export. Does that make sense? So long term vision is maybe if we can, BlockLab would love to be able to export blocks, but we're waiting to see what that looks like in core. Big round of applause for Luke.