 Okay, thank you so much, Joe. So, yeah, my name is Rua, welcome everybody, fantastic to see a packed room, a little bit daunting. This is my first word camp, I'm from New Zealand, I'm over here from Dunedin. I don't hate Australia, used to live in Sydney for a while, kind of enjoyed that, Brisbane's really nice. So, I work for automatic, I've been working for automatic for about a year and a half, and I work on WooCommerce.com, so I don't work on WooCommerce the plugin, and I don't work on WordPress, but I do work on a website that is a WordPress website and uses WooCommerce to sell WooCommerce plugins. So, I'm here today because I'm quite excited about Gutenberg, and possibly most of you know this already, but maybe not all of you, so Gutenberg is the tech behind the brand new block editor that's coming out in WordPress 5.0. I'm not going to use the clicker. So, just before I get started on the talk proper, let's do a little show of hands so I can get an idea of where everybody is on their Gutenberg journey. So, throw your hands up if you are excited about Gutenberg like I am. Okay, thank you for those of you who are. So, now throw your hands up if you are using Gutenberg for posts or pages, not all of them, but just any post or page on a real site. Okay, great, similar number of people. So, the last one, extra for experts. Throw your hands up if you have built custom blocks or you're playing around with custom blocks right now. Okay, this is perfectly pitched. So, this is a warm-up talk to get you excited about building your own custom blocks, among other things. Okay, so what is it that gets me so excited about Gutenberg? It's because you can build a block for anything. So, I really love the idea that WordPress and sites built on WordPress can become more diverse, more interactive and more engaging. So, it's not just about blogs and it's not just about text with media embedded. It's about much more than that. So, Gutenberg or Block Editor is a platform that we can use to build those experiences from richer units. So, we have had richer units of content in WordPress for quite some time. This is a short code, which I'm sure you all recognise. It's a short code for a gallery. So, you can do a lot with short codes right now. But I think with Gutenberg, we can really build on this and make it a much better experience for authors and build some cool new things as well. So, here's what a gallery looks like in Gutenberg. I'm sure you've all seen this already. It's much more WYSIWYG. It's much more live. And so, this talk is kind of centred around that kind of transformation. It's about making really nice interfaces for your data, for your authors, for your sites, that really are close to what you're trying to express. So, if you're building a site right now or if you're working with a client and there's something particular about that application or the market that they're in, think about that as we go through the dry technical details of the talk and hopefully you can find some things that you can use this for. So, Gutenberg, as we all know, is the Block Editor. But it's more than just the Block Editor. It's actually a code library full of useful things that you can use. And so, I'm talking about one specific thing in particular today in this talk. So, I'm talking about components. So, before we launch into that, let's talk about what components are. So, I've got this definition out of the React documentation. And so, components let you split your user interface into independent, reusable pieces. And this is the most important part for me. And they let you think about each piece in isolation. So, you can break down your user interface or your software into smaller chunks that you can then trust and rely on to do a particular job. So, what are we actually talking about? Components might be a bit abstract. So, in this component library inside Gutenberg, there are some things that you've seen before. Things like buttons and controls for collecting user input, like text edits, date pickers, things like that. There's also things like menu bars. And you can also have components that are made up of other components to build a more rich unit. So, we're going to look at some examples in a minute of these. Before we do that, I'm just going to do a very, very tiny introduction to React. So, maybe another quick show of hands. Who's heard of React? Who's scared of React? Yeah, I mean, I'm comfortable with React now, but it still scares me. So, this is what React really is at its core. So, this is a JavaScript function and in comes some props, some little bits of data. So, think about this, like, what's the data that your site's all about? So, in this case, our prop is a name and it's Muriel, which I believe is a traditional Australian name. And so, that comes in and then our component spits out some markup and that's high Muriel. So, that's what a React component is. So, hopefully that makes React a little bit more friendly and you'll see this pattern over and over again when you're browsing through the Gutenberg source code or when you're building your block. Okay, so let's start off with a really simple component. This is the button component inside WordPress. So, I'm showing the code on screen here for these things. Don't worry about that. If you like looking at the code and reading what's there, then feel free. All this code is lifted directly out of the Gutenberg project, so it's all there on GitHub and you can go and check it out later. It's just to illustrate what I'm talking about. So, we can see that this button has props, those green things, for different kinds of behaviour and properties that you might want. So, this one here is a small button because it says is small and it's also got some other props to control its behaviour and to show a value. And the label for the button is the text that is in between the opening and closing tag. So, very similar to HTML. Here's a more interesting component. So, this one gives you a lot more out of the box. This is the form token field and so, this is what would be used in a post for selecting tags, but maybe with sites you're building, you can think of other things that you might want to use this for. And it gives you all that behaviour of adding new tags, killing tags, all out of the box in this nice, clean little bit of marker. And here's a much more rich, detailed component. So, this is a media placeholder and this is what you present to an author when you've got a block that needs a piece of media and it's flexible, it can be used in different blocks in different ways. So, this is a media and text block which is reasonably new. It wasn't in 5.0, I don't think. It was soon after. And so, it's got guidance for the author about what to do next and you pass that in as a property. And what's really cool about this and what's really powerful about components is that within this, in a innocuous-looking mark up here is all of the code to handle a file upload, making sure that's the right kind of file and that's all very easy to express what you need. So, we've got here what kind of file types we accept and it's just going to take care of that for us. So, that's a little dive into some components as they're used inside Gutenberg. So, you're probably wondering what can I do with these? Where can I use these components? And there's a couple of answers there. Obviously, you can build your own custom blocks and if you're going to do that, you're going to be right in there and all these components are going to be really useful to you. But you can actually use components from Gutenberg for other things as well. So, the idea is with this component library that you can use it for building experiences in WP admin. So, if you're building a plug-in that has an interface for your site administrators or your authors, that might be nothing to do with content. It might be something else to do with your site. You can use these components to build that as well. So, it's going to be pivotal for WordPress going forward to make the admin experience much more targeted at what people need it to do and be able to focus in people's experience on what they need to be able to do. So, here's an example of that. So, I wasn't personally involved in this but WooCommerce has a brand new sort of child plug-in that's going to be part of course soon called WooCommerce Analytics and it's been built using WordPress components and Gutenberg Tech from the ground up but it's nothing to do with content. It's nothing to do with the block editor. It's just about understanding what's happening with your sales and that's been built using WordPress components. So, that's an example of the kind of fun you can have depending on what your domain is and what you could use this for. So, you can see there an old friend. We've got our form token field is being used there and we can see a bunch of other custom components that team's built specifically for so, let me just switch out to my demo now. Yep. So, so now we're going to switch focus a little bit. That was a bit of a talk about technology and so the real reason I did this talk is that I wanted an excuse to play with this and make something fun for myself. I like music. I like electronic music in particular. I like all music but electronic music is what I'm obsessed with more. So, I thought what if I could build blocks that enabled you to add a soundtrack to a page so that you could have a richer experience when you're learning about, say, music genres or, you know, you might use this for other things as well. So, I'm not sure if this is going to... Okay. So, it's coming out of the computer right here. Can you hear that reasonably? Yep. Okay, good. And you can hear me as well. Good. So, at the top of the page I've got a play button block and then I've got a block that's an audio loop and this one is a very, very seminal classic techno track and then as we scroll down the page it switches over to another example of techno music from a bit more current and if the person's reading around in this page doing different things, it's crossfading between those two as they go. Thanks for that. So, that's the experience that I wanted to build and Gutenberg was the tool that I used to build that. So, I think we'll just go back to the presentation now. So, that's up live if you want to have a play with it. There's a few other pages to play to look at. Okay, so how did I do this? So, I'm going to show you another thing that is really useful if you're getting started with this or if you're quite experienced in this area it's just really useful anyway. So, this is the WordPress Scripts package and so what this gives you is a way to get all the dependencies you need to build on Gutenberg library and to build a custom block and to have one dependency for all that and not have to wrangle all the different versions of things obviously with JavaScript and NPM things can get quite out of date quite quickly it's very hard to stay on top of so this helps you with that and it includes Babble so you can write modern JavaScript which is much more nice to work with, it feels much more close to traditional programming and there's also linting tools to keep your code standardised you'll see here there's a start script which you use when you're developing and it'll watch your files as you edit on them and it'll build as you go and that'll allow you to iterate quickly and have fun building as you go and when you are done there's a build script which will build a production version of your plugin which you can then release out to your customers so yeah, have a look at that it might be a little bit alien right now but if you're going to start down this journey it's a fantastic place to start and there's lots of docs about it on the WordPress.org website so a bit more detail about how I built my thing so I used a placeholder so we were talking about placeholders before so when you first drag out the loop block into the editing area you haven't got any audio in it and so you need to choose some media and so that's what I've used the placeholder block for so I've given a little icon that looks like a record came out of dash icons and then I've given the instructions to the user you need to pick an audio file here again, all these codes on GitHub this is all open source so don't worry about it too much right now if you are interested you can have a good look later or you can contact me and we can discuss so there's a toolbar on each block inside Gutenberg which you've probably seen and so the way you build up that toolbar is that you use components for that as well so in our toolbar we have two buttons ones to hide the block from the front end of the site so that it's just sound and you can't see any evidence of the sound that's that little i button and for that one we're passing properties directly into the toolbar component we've also got a media upload button because it's got a media upload check component around it and that's going to handle all of our media upload or selecting from the WordPress media library so you get to build on all the lovely stuff that's in the platform that we've got in a nice clean way so the other block that I built is this play button box and you can have as many of these on the pages you want allowing the user to start and stop the soundtrack and it's got a very basic setting it's got the tempo and how fast you want the music to play and so that's in the sidebar at the right of the editor and so to do that we use an inspector controls component and then inside that we have a panel body which gives us a little nice place to book controls which can be collapsed away when the user doesn't need to see it anymore and then within that we've got a range control which is a way of setting a number between two values and you can see here we pass in playback tempo attribute from our block metadata and then when the user slides it around that'll get saved back in to the attributes okay so that wraps up the talk quite a rapid pace so there's a bunch of links there definitely come and talk to me if any of this stuff is interesting or confusing to you and of course working for automatic it's wonderful I'd encourage everybody if you're interested in that find out about it, it's a really great place to work and yeah there's the repo for the audio blocks up there on GitHub so thank you very much do we have time for questions? I think we have time for maybe a couple of questions so we are running about 10 minutes behind so we'll try and keep them nice and short and sweet and I'm sure the rua won't mind answering your questions after during the break all day he says so hold him to that so do we have any questions who wants to start us off everyone just really wants their coffee right now come on I know someone's got a betting question can we grab a mic up for this gentleman up here thanks I've built blocks using ACF I'm not experienced with React so any benefit that you get from React from working with React at its core versus using ACF to build in your own blocks that's a pretty good question so I'm not hugely familiar with ACF in fact there's going to be a talk that I'm going to go to later that I'm going to find all about that I guess if that's working for you that's great you know keep doing it there's a couple of benefits that I could see from going with the kind of more direct approach one is that you're kind of upskilling in an area that seems to be taking over the whole world right now so the more you can learn and be comfortable with React that might pay off dividends in other places and as far as keeping your site lean and your code base focused on exactly what you want to deliver then going straight to the platform that's built into WordPress is always going to save bytes on your server parse time compile time and run time JavaScript when you're editing in the block editor the more things you have running the slower that experience is going to be for your authors so that could be a factor but yeah thanks for the question awesome any other questions going once going to us yes we've got a gentleman here please there were a lot of references in your code to things that weren't previously defined where do you find all this stuff yeah so I've taken very tiny snippets of code out so yeah that code all came from the Gutenberg repo on GitHub which is right there so take a photo of a slide if you're curious I will put up a blog post about this at some point and are we making slides available to people I believe so find me I'm Hazari, anywhere on the internet is Hazari that's me or Cartoonbeats.com and we'll show you so all the code is in the Gutenberg project there is much more to it I wanted to present clean things that had missing references and the other code was in the audio blocks repo that's very small and fun to browse it's a little hack prototype and just by the way that demo is up live as well that URL is easy to remember it's camp.Cartoonbeats.com so feel free to have a play around with it or stick it on at the next party you're at awesome big round of applause for Roy thanks for starting us off thank you