 Do wych yn gwzio'i gwybod ffosglwyddon, ond mae'n gwybod weithio'r genun i'r hyn o'r gwerthu er mwyn bod nhw'n gorfan'r gwrthwm y cyflwr. i'w ffosglwyddon ar y cyflod. Pr Clan, rydyn ni'n gwybod mewn wizard, rydyn ni'n gwybod i ddaw i ddweud y viadau. Rwy'n ddweud mewn ymddangos. Diolch i ddim ni o ffrwng Iubol. Rydyn ni'n ddweud ymdangos y cyflwyn o'r gwerthu. Rydyn ni i gyd-wyr y fânf-ddangos. and this is not also a workshop on How to Build a Block, there's going to be lots of stuff like that these, a couple of days. This talk is also not just for designers, this is for anyone that wants to understand and really to look at the design behind Gutenberg as well. and hopefully I'll be useful for people that want to build blocks and start creating things with Gutenberg. In later I look at questions at the end. I'm hoping that at the end I have space for questions at the end I'm going to be going quite fast. I have quite a number of slides. Can anyone hear some feedback? Was that just me who's hearing that? Hopefully I'm going to go through those slides there. At the end, there's going to be a link for resources. As we go through that pace, hopefully we can get that. I would like to also say that these screenshots are valid as of a week ago. Gutenberg is a project being developed on, and it's still kind of things are going to be changing, but some of the principles that I'm going to share are not going to be changing, and kind of that. So I'd like to pan out, first of all, to the vision of Gutenberg, and then I'd really kind of like to hone in to blocks specifically. So in short, everything is a block. Text, images, galleries, widgets, short codes, even chunks of custom HTML, whether it's from the editor or if it's a plug-in, they all are a block. You should really only have to learn how the block works, and then you know how to do everything. So that's kind of the fundamental principles of Gutenberg that it's built. So let's kind of move a little bit out of that and look at some of the language used around the interface with Gutenberg, and really start looking at the specific elements which are kind of worth noting and those patterns before then we dive into looking at blocks as well. So first of all, we're going to take a look right at the beginning by panning right out and start looking at the screen. So here is it broken down into shapes. And if you think about it, it's pretty familiar, right? This is pretty word-pressy if you look at these shapes. You know, you have the patterns that you recognise. And this is Gutenberg itself, sitting in WordPress in the editing experience. And although you can see the roots here, you can also see some differences. One of the roots, for example, is a document sidebar. We have sidebars already within WordPress. And here you have it a little bit different. When you close that sidebar, you also get a more minimal writing experience. So that's the screen itself. Now I'm going to have a little bit of a look at the action bar. And let's kind of start at the top, which we're looking for the interface. And this is the top toolbar in Gutenberg, the action bar. This is what a blueprint really looks like for that. And diving into each element, we have a way that you can add a block, a way to redo or undo a block. Then you also have some extra information about the content and everything that's being written. Then you also have whether this has been saved or updated and you have publish and preview. And that little cog icon is where you can see the extra settings or the sidebar as well. Y gypsys is something we're going to get into a little bit later. That's where extra things are. So let's kind of look at the common thing with WordPress, the sidebar. We saw it a little bit earlier. And let's kind of examine that in the context of Gutenberg. Here is the pattern of the blueprint of the sidebar. And here we have, you can get to it through the action bar or through the advanced settings by the block. This is now being renamed to block settings because it's the block settings. So that's kind of where this is. Let's have a little bit of a look at the document sidebar because this is the first tab. And this really is the most common thing that you're going to expect. It's not blocks. It's not anything really different. You can see here you have all the things that you'd expect. Visibility, publishing. As we go in, you see all these revisions and tags and categories. It's all the things that you'd expect to see on a WordPress document that you can interact with. Now, moving into the action heart of Gutenberg, let's have a little bit of a look about how you add a block to your content. So there's a couple of different ways that you can add a block. You can do this by using the plus icon in the action bar. You can also do it by having after blocks. This is what you see when you first load the page, a call to add a block. Or as you're writing, you can go to the next block and this will appear. You can hit the plus icon. It will also suggest here a combination of frequent and recent blocks as well. There's a way that you can do it in between blocks. This is called the sibling way of adding a block. As you can see here, you hover and then you click and then you can add blocks in between. There's a way also to add blocks, which I really think is one of my favourite ways of adding blocks, and that's using the forward slash command. Just like in Slack or in any other apps, you can do this to bring up various block types. I don't know if anyone's experienced using this, but for me it's a really fast way of writing. As you start writing your content and you can use it, it's a great way to just use the keyboard and really create that flow as you're writing. So we've looked at how you add a block. Now I'm going to look at the library. This is where all the blocks live. This allows you to browse block by block as well. They're in different sections. Here you can see the most used blocks. Then you can also search for blocks in the library. We're working on different ways to iterate this, but this is the current status of this. Then you see a scrolled list, which is in different sections as well. You can see that embeds also have their own section in this. So that's things like WordPress TV, YouTube. They all have an block that you can just give your link in and it will magically pull the write embed through. Shared blocks are a great way to save and reuse a block. You can do this to any block. You customize it however you want it, make it your own, and then you just reuse it through your site. So you flag it as a reusable block, and then you can see it here. You can preview what they would also be like, which is great because you're customizing and doing different changes. So being able to preview those changes is great way to do that. Everyone with me so far. I'm going to move a little bit into some more bits now. The ellipsis is a core part of the way Gutenberg gives you more options. Some of you might know this from different mobile devices and other interactions. It's a pretty common interaction for people to recognize now. And it simply means more. In the toolbar, the ellipsis shows things like switching between code and visual editing so you can make those different choices. And you can also fix the toolbar to the top. And we're going to get that into a little bit later in the toolbar positioning as well. And each block also has an ellipsis. And this has common features across all blocks, like editing as HTML, deleting and transforming. Transforming is where each block can transform into a different block. Placeholders. Remember how I said that these design principles or placeholders really is a key part of this? Placeholders are a way that you can... Say you have a page template, for example. You could, rather than having a blank page loadup, you could load up with specific blocks already for someone to fill out. That's a lot better way for someone to interact with a page template. But placeholders also, as you're writing, maybe you're just blocking out the page. You're just saying, I want an image here, I want some content here, I want maybe a list here. And then you go and fill things out. And placeholders I'm going to look a little bit more into. This placeholder is going to be a common theme throughout this because they're really a key point of blocks. Placeholders can have outlines, but they can also have actions like here with the image block. So that was a fast drawn through some of the wider design language and vision of Gutenberg. I'm now going to, in the rest of this talk, really hone in a little bit more into what a block is made of. So looking at a blueprint, here is a blueprint of a block. Pretty simple, right? Has a toolbar, has the ellipsis, and has some arrows to move it up and down. That's what a block is made of. So, let's kind of look at a little bit of these individual things around a block. First of all, we're going to look at the block toolbar. Here you can see the paragraph block with the toolbar beside it. Remember I said there was that setting before where you could change and actually have the toolbar to be up or in the action bar? Well, that was because in usability testing we found that people were pretty much 50-50 split on whether they wanted it by the block or whether they wanted it up on the toolbar. So, for now, we have given people that option to have either of those. And we've really gone back and forth on that, but for now we're settling to let people have that choice. So remember the document sidebar? Well, blocks have one, too. And now you can see this, the entire sidebar for the paragraph block. You can see all these different settings that you can have. You can do drop cap. You can do alignment. All these different settings. And each block has different settings for it as well. Often asked is where do the settings go? So the rule of thumb is in the toolbar you have primary actions. And these are things that a block cannot function without. Whereas the secondary actions, i.e. anything else, goes in the sidebar. That's a good rule of thumb if you're writing a block to kind of think about. The primary is for toolbar and then the secondary is for the sidebar. So I mentioned briefly block transforming and almost all blocks can be transformed into another type of block. And this allows easy for you to change content, for example. You do this by either clicking the drop down in the toolbar, which will show you the different blocks, or through the ellipsis menu again. And ellipsis is your constant point for this. And here you get a list of everything a block will transform into. Each block is different. For example, here you can change a paragraph to a list, a quote, or even a heading. So when you're making blocks, I think one of the fundamentals to kind of talk about is the states of blocks. Here we have the unselected placeholder. This is when you just select a block, you just load it, you haven't added any content, you haven't done anything. This is for the image block. I haven't added an image, I haven't done anything, I haven't added an image block here. And this shows, generally in the sense of this, it would show an uploader, so it's a call to action to do something. The selected is after you've added content, and then I've selected the block. I get this, for example, with images. I now have a way that I can resize the image there. And this is unselected, so I've not clicked on that block, but it's actually got content. And this is where it looks pretty close at the front. This is scanning through your document, this is what you would see. That was a fast trip through some basic anatomy of blocks. I'm now going to look at some actual examples of blocks and see how that applies to them. The first of these is a rather complicated one in the sense of lots of options, and that's the gallery block. Here you can see the placeholder states. You have an upload and a call to action, and as you hover over it, you can see these settings as well. This is an encouragement. Someone would know what you would do with this. You can also drag images specifically for the image block. Here you have the unselected filled out state. It looks pretty much how it's going to look on the front. The selected state, when filled out, has a little plus icon that's not going to show on the front, but that's just saying, would you like to add any more images? You can actually, with the gallery block, go a step further, and when you go into an invisible image, you can actually edit the caption there and there, which is anyone who's kind of been using Word for us for a bit. That's a great way of doing it, rather than having to go in and edit and come back out again and do a thing, you can just change a caption right there. The toolbar, it has all the must-have actions like editing and alignment, the things that you really, really want to have with the gallery block. The ellipsis shows further actions in those advanced settings. And also converting. Sensibly, what would a gallery block convert to? Just images, and then it would be like a row of image, image, image. That's what it would convert to. And for gallery, it can be converted into separate images. The settings toolbar shows those nice to have, the extras, all the kind of different things. You don't need a crop. That's probably quite useful occasionally, but it's not essential for the block. The same as the different rows. That's a really fun thing to try. If you haven't tried the gallery block, just moving it up and then moving it down to do the different sizes of blocks. I'm going to have a look at a really basic one now, and that's a simple payment. But it's a really great illustration of how a block does not have to be complicated. I think sometimes we get very complicated in thinking about blocks, but the simpler the better when it comes to interfaces. Here we have the unselected state. And then here we have the selected state. Pretty simple, right? It just does one thing. It's a way it doesn't set payment. Now we've gone simple. I'm going to go even more complicated than the gallery, and I'm going to have a look at the slideshow block. This is similar to the gallery, so I'm not going to show every state, but this has a lot more options. You can actually follow this along on GitHub here. This is actually an issue where this is being developed. Probably won't ship with Gutenberg, but it's great to explore these blocks. Here, this is the advanced settings for the slideshow, because slideshows have that many settings, and it exposes them, but these are secondary. If you had these right in the toolbar, it wouldn't be a great user experience at all. But having these to the side, that works in the slideshow. I want to take a little bit of a time to give you some hints. Now we've gone through some basics of blocks, and I really hope that I allow you to make blocks a little bit easier. The first hint is when you are designing a block, all blocks have an icon and they have some text that says the name of the block. Keep the icon simple and signify the block. The same goes for the text. Don't have three lines, because if you imagine what that's going to look like in the library, that's not going to be good, so a short name and an icon that signifies exactly what that block is. Have good placeholder defaults, and really think of how that page is made up in a template. I really kind of have that vision as well, and I think I've missed the slide, but I'm going to add a slide that I would also like you to think about, how things work on different mobile devices as well. Think about how it adapts whether you're walking around or you're using it on a smaller device. When we use the word mobile, we generally mean a smaller device, not to say that you're just wandering around with it, because we use the iPad at home as well, right? We don't say be wandering around with it all the time, but think about that not everybody uses the desktop for everything, and have these good defaults. Think of a page made up in a template and think of what it looks like. When it's unselected, show a preview of the block like this. Make sure that you do that, make sure it looks exactly how it's going to look on the front. Every block, at a minimum, should have a description of what it's looked like when it views in the additional setting, so make sure that it does that. Say what it does. When you see in the sidebar, this is what it's going to show, so make sure you do that. I'd like to share some thoughts based on things that I've heard people say as well, or ask me about Gutenberg and specifically about blocks, and these are kind of questions, and we're going to have some time for some questions, but I hope I answer some now. This is what I was saying, like blocks should really adapt to different devices, and make sure your block feels or looks like on that device, test on those different devices, test that experience. Gutenberg uses existing patterns in WordPress, and I think that's something we need to remember. There are some new stuff, but there's also some stuff at the foundations. Gutenberg stands on the foundations of WordPress. So, for example, toolbars exist in WordPress already. Here you can see one, and then here you see another one in the editor itself. Sidebars also exist in WordPress already. Here you can see one, and then here you see another sidebar as well. And it's really important to kind of remember that these design patterns are still there. One of the questions, probably in the top three that gets asked, is where should a block live? Should it be in a theme or should it be in a plugin? The answer is it depends, but likely plugins. The reason is that there probably is a good argument in a minority of cases to have a block that only works when a specific theme is activated. But that's probably the minority. The majority people would want to use no matter what theme they had. So, it depends, but likely plugins. One concept that's mentioned is should we do direct manipulation? What is direct manipulation with regards to Gutenberg? This is a really lengthy way of saying that you see something, you click it, and it does something. But this is a great way of describing what direct manipulation is. And this is Gutenberg. So, this is direct manipulation. Gutenberg has direct manipulation. We sometimes add a lot more weight to that term than we probably should, but that's what you do. You're seeing it there, you're clicking, you're interacting. Everything with blocks is direct manipulation and should be direct manipulation. One thing I'd like to cover is what you see is not what you get. At Automatic, we have empathy challenges, which is experiencing something either someone does, testing, really getting a feel for something. And one of those was the designers had an empathy challenge to use Gutenberg. And Mel Choice, who's actually going to be the design lead for Phase 2, the customization of Gutenberg. She had this quote that just struck me. And I felt I had to really cover this in this talk. Just because it looks right in the editor doesn't mean it looks right when rendered on the front end of your site. And she's right. Themes can still affect heavily the output. There are, our theme supports and other ways to ease this, but right now the balance between an overly aggressive Gutenberg styling and leaving it up to themes is being struck. And that's something we're working through. We've gone different directions and that's something we're working through as a community. There are several GitHub issues that you can join in and have those discussions as well. If you look at it here, this is what it looks like in the editor. And then here is what it looks like in 2014. And then what it looks like in the Gutenberg starter theme. Where we go as a community with what you see as what you get is up to us as a community to go. I think sometimes people plant it and say, this is the line, we have to go to what you see as what you get. But it really depends on how far we go there. That's something we haven't got there yet with. And I don't think that's something we're going to necessarily have an answer today on. So beyond blocks. I'd like to kind of bring something kind of with Gutenberg, there's stuff. It's always asked, when should I build a block? That's a common question. Do I extend it? Do I build a block? Do I do? And mostly it's going to be a block that you make. But there are also other options with Gutenberg that I don't think everybody knows about. This is where the potential is for plugins to really create a more native, seamless, additional experience with a WordPress and to really truly extend it, not just build on top of it or around it and create that more user-term app-like experience, that kind of feeling of it. Here you can see, and I've got the GitHub issues here, some potential ideas. Maybe you have Wolfman Alpha in the sidebar like this. Or maybe you have something that I think WordPress really should have, which is collaborative editing. This is actually an issue. People are working on this and working through designs. Commenting is also something that's being worked on like this. And what about readability? So could you scan your document for readability using the ellipsis? And this is where you start to see that ellipsis is a little bit more of those application side. So I hope it's a speed-through, Gutenberg and a speed-through of the design. But you can see here there is actually a page which actually has all my talk. It has slides. It also has some resources, which I hope to share. I'm going to tweet it out as well. And there's actually a form on there. If there's something, and we're going to have some time for questions, but is this something that should be included in that talk, then please fill out the form, and I will happily add it. I'm iterating this talk, and I would really like to make it cover everything that people want to about blocks. I'd like to say thank you also to Joanne Matias and Mel, who really have helped with the design. Joanne was the original design lead, and Matias is a technical lead. And I said Mel is going to be the design lead of the customization phase. They are behind this design work as well. And I'd also like to say thank you to anyone that has made a contribution to Gutenberg. And a contribution is a review, is a no, is a comment, is an issue. It doesn't just have to be code. Every single one matters, and that's how we've got to this point with the product. So you can find me on Karmato's and all the things. And I'd like to take questions now if possible. Thank you. So controlling I think it's more a matter of education. So this is part why I'm giving this talk. So if we're educating and as a community we're learning these design patterns, then I think we can maybe not repeat some of the mistakes. I always believe in education over control. So I'd like to think we can try that route first of all. So the columns are experimental block, which that one has experimental by it for a reason. We actually have text columns, but we also have the experimental block where you can add different blocks already. Progressing, where you'll say. The idea of that is it might kind of develop more than that. We also have something called nested blocks, so you're aware of that as well. So that's a block in a block, or blocks in a block. But that's a way that we can maybe expand differently there as well. Okay, so thank you for the talk. Obviously I know we can install the plugin now to experiment with Guffinberg. Is there any news on when it's actually going to ship with WordPress? So shipping? No. But likely you're going to use the merge proposal in April. A merge proposal is a way within the community for those that don't know. Those who are making it say, hey, this thing is kind of ready. And that's something we're working towards. Anyone can help us with that. We have weekly meetings. There are 1300 DTC on Wednesdays in chat.wordpress.org, hashcore editor. I think I got that right. And also on GitHub. There's also milestones on GitHub. So if people follow those, you'll see there's a merge proposal milestone for each component. A component is a section of WordPress as well. So you'll be able to see that following along. And as that gets kind of less and less, you'll be able to kind of predict when those are going to happen as well. He answered my question. But I was wondering how much JavaScript would you be able to need to know to manipulate Gutenberg to do certain things out of the box? Could you repeat the beginning bit? Because I didn't hear that. I'm so sorry. Someone told me how much JavaScript would you need to know to manipulate Gutenberg to do things out of the box? So none, really. Because as you see with the paragraph block, right? I mean, it depends on what you mean by manipulate. Do you mean when you say manipulate? Because when I say manipulate, I'm thinking I want to change the background or the text on a paragraph block, for example. You do need to know no JavaScript to do that because that's already an option. If you, by manipulation, mean I want to make my own block or I want to extend a block, then, yes, you will have to know how to do that. There's an amazing course. I think he's giving a talk to Zach Gordon's course. I'm going to give him a plug. I would highly recommend to learn that. He also does a great JavaScript. There's so many different learning resources. There's also the handbook. WordPress.org. So the link here has lots of resources that you can get to as well. Yes. I mean, the Zach Gordon's course, this morning, this morning, we learned many. There's also some transport materials. Yes. Next question. I'm just wondering if you've got any plans in the future. If you want to do a custom page and then already have some block set up for someone to edit. If you want to select all pages, about pages or something like that, I'll put a people page or something like that. You already had a text image set up for people to click on. Have you got any plans to do that in the future? So there are lots of plans. So actually what you can do now is for custom post types or templates. You can do what I was saying with the placeholders when you just load it with Pacific. That's like step one. Step two will be looking at layout blocks. That's when after the editor phase, which is what I'm part of, is when Western router and El Choice will be coming in and they will be leading us through the customization focus for Gutenberg. That's when we're going to see a lot more that layout, that site building stuff. But already we have the taste of that with placeholders and page templating. Thank you. Problem. Next question. I tend to have pages set out so that certain page templates or certain custom posts will only use kind of a certain layout. So is there a plan, so say a certain custom post type will be allowed to use certain blocks but not others, whereas a page will use all of them, for example? Yes, so I mean blocks are going to be able to be user roles. There's actually, I can't remember the name of it. There's a couple of different plugins that people have been experimenting with this with block control. I think it's actually called block control or something like that. But there's plugins that people are already doing which I think is super interesting. Cos often things happen in a plugin that we then bring back into core, right? So there's some great community experiments happening. There's themes with blocks. There's suites of blocks that do things that we're not providing in core. It's really, really interesting in the plugin repository to already see what people are doing and outside as well. There's been quite a mixed reaction with Gutenberg. How has some of people's frustrations caused the design of it? Well, I think with anything in the community we listen, right? So, of course, I mean, I don't say think of frustration influences as much as hearing why someone is frustrated. So listening, of course, everybody who is developing Gutenberg has been listening, so absolutely the community has made this what it is. It's not just a group of people who are locked away making this product. We've been making it in the public and we've been making it with the help of contributors. There's been community have been helping this. So absolutely everybody helps and progresses the product. Just like with WordPress, right? What sort of workflow should you use when you've got why does something as you have just acquired something better than the text? How can we manage that on the web site? Can I pan out a little bit and say, do you write your own plugins at the moment? Exactly the same, then. Because I just wanted to know because basically I'm assuming you've been putting the blocks into a plugin? Yeah, I mean if you were doing that then the same, how you update plugins. Maybe you've got a multi-site, maybe you've got a deploy mechanism that you deploy, but exactly the same. The comments is actually an interesting one to point up on. So there is like four backs and backwards compatibility. So you have to be careful if you changed everything then of course you're going to have an issue there. We're looking at easier four backs for things like that and Gutenberg already does some of those because some of these blocks are changing anyway as the team are working on this. But I think the comments are in the editor but the output does not have those comments. If you view source, they're not there. They're just a way of saying, hey Gutenberg do this thing on the front and that's what it does. So let's have a question more of a statement really. I've been reading obviously some of the reviews from time to time and I just wanted to say that you're a better person than the one I am and responding to some of those reviews and you and everybody working on this project is doing a pretty amazing job regardless of what other people say. Thank you. Thank you very much. This is my last question. There will be any need for advanced custom fields because if you can create all these edited boxes why would you need advanced custom fields? I think that's up to people to decide. I don't want to tell people how to do any workflow. I think what we're doing with Gutenberg is we're giving a new set of tools and over time people are going to work with that. I know advanced custom fields are looking at how can they work with Gutenberg, how can they add things. There's going to be things that Gutenberg doesn't do, blocks don't do, extensibility, adding, converting, sites that already exist. So I think that's up to each person's individual workflow and I think that's something as a community. If you think the way that people originally worked with WordPress a few years ago changed it, right? So that's something with Gutenberg we're going to be finding these workflows. Thanks, it was a great talk. I just wanted to ask about multi-site and more complex WordPress setups with blocks. Is it something that they're looking into that you'll be able to share blocks amongst sites so you can have an organization level set of shared blocks? I know that multi-site is one aspect that we're going to have to out of the box work at least with multi-site. I don't know about the sharing that's actually an interesting aspect. I'm not sure that's actually currently being worked on. I would say that's probably like a version to whatever but I'm actually going to find that out for you and then I will try and tweet out that answer because I'm not sure specifically. Thank you very much. Thank you.