 Helo! So, I hope everyone had a great lunch and I said my name is Tammy Lister and I'm the design lead for phase one of Gutenberg and that's the editor. And today I'm going to be taking kind of a deep dive into what really makes a block from a design perspective. This talk isn't just for designers and it's also not going to be a technical talk or workshop. This is for anyone that really wants to understand more the design and some decisions behind Gutenberg. It's also going to hopefully be useful to those of you wanting to make blocks and create using Gutenberg. If possible, I've got a lot of sites to get through in a good way and we can have some questions at the end and there will also be a link at the end for resources. I'd also like to say that these screenshots are valid because about a week ago with Gutenberg it's actually a project still being worked on and there are probably going to be some things that are going to change as we move forward to release. But the principles and the patterns are really those foundations so that's kind of what I'm going to share today. I'm going to start with the vision of Gutenberg and then I'm going to start thinking really about getting into the blocks themselves. This, in short, is the vision. Everything is a block, text, images, galleries, widgets, short codes, little tiny little bits and big bits of HTML, no matter if it's created by plugins or otherwise. You should only have to learn how the block works and then you know how to do everything. A lot of this is about unification. There's lots of different ways in the WordPress ecosystem to do lots of the same things and that's not great from a usability perspective so we can kind of level that a little bit. From an inspiration point of view there's lots of different things and everyone involved in Gutenberg has their own inspirations as well but I thought I'd just share some of these and there are Ulysses, Living Docs, Notions, Sketch, Keynote, it's a long list but they are all amazing and a lot of them are apps but they all add up to that product that is Gutenberg today and respond to the outside WordPress and what is going on in design we can now bring that within to WordPress. This is some of the existing design patterns in Gutenberg and I'd like to kind of share some of these so these kind of are outside of WordPress and these are something we're bringing in so the forward slash command, auto complete, add the block library from things like Squarespace but also there are elements that are already in WordPress like the toolbar and the sidebar and of course the ellipsis menu. Let's move on a little bit now into thinking about the design language of Gutenberg. There are very specific elements worth noting before we dive right into those blocks themselves. Let's start at the beginning because that feels like a good spot to start after lunch by panning right out to the entire editing screen. Here it is broken down into shapes. It's pretty familiar right? Kind of looks like WordPress when you take a rail of the new design kind of colours or any elements it's the shapes and the patterns that you recognise and you use regularly. Here is Gutenberg itself sitting in WordPress and it replaces the editing experience. Again though you can see the roots here there's the sidebar and you have that feel of WordPress still. This is a little bit of difference when you close the sidebar and you get that more minimal writing experience. Let's move on to a few elements themselves and we're going to start with the action bar. This is the top toolbar in Gutenberg and this is a blueprint of what it looks like. If you dig into each element you'll see there's a way to add a block there's an undo and redo a way to let information about the content and there's also the publishing flow and a status so you can find out what state your document is in as well. Then you have access to additional settings. Saw it a little bit earlier so let's dive a little bit more into what the sidebar is and what that contains. This is what it looks like as a blueprint. This is how you get to it with the advanced settings in the toolbar or by the block. This is the document sidebar itself that you get for the whole entire page and this is the first tab of the sidebar. I'm going to walk through this and all the things that you would expect to have with WordPress you have a way to do status, you have revisions, you have an exit, a featured image and a way to do discussions. There's all stuff you'd kind of expect with a WordPress page or post. Let's move now on into the action at the heart of Gutenberg and that's adding a block to your content. You can do this in a few ways. There's a plus icon in the action bar and there's another below the block and this one has handy little suggested blocks which are a mixture of frequent and recent blocks and you can even hover and then click in between blocks and easily see the handy plus icon again to add a block so you have these multiple ways depending on what content you're writing and what your flow is. One feature of Gutenberg that I find really helps with the flow is using the forward slash command. Just like in Slack and other apps you can do this to bring up various block types and you just start typing and once you've clicked in you can use it with your keyboard to add different types of blocks that creates a flow to writing. The library is where all the amazing blocks live. This allows you to browse each block. First you see the most used blocks and then you can search for the blocks in the library or scroll through a sectioned list to kind of drill down into sections. Here you can see the common blocks for example gallery and audio and embeds also have a section of their own and shared blocks are actually a great way to save and reuse a block. For those of you who don't know about shared blocks you can do this to any block you customize it exactly how you want and then you reuse it throughout your site. No coding needed and this means that you can then also preview them in the block library pretty handy. Blockchip is the name for the icon and this goes without the title. You can see it appears in the library. It also appears beside the formatting options in the block toolbar and this doubles as a block type indicator and later iterations we're going to see this used a little bit more and I'm going to get to some kind of future stuff in a little bit as well. The ellipses or the more menu is a core part of the way that Gutenberg gives you more options and this is a common interface pattern outside of Gutenberg. It simply means more hence the more menu. In the toolbar the ellipses show things like switching between code and visual editing. Also fixing the toolbar to the top we'll get to that in a little bit later as well. Each block also has an ellipses and this has a common features across all block like a quick access to those extra ones such as editing HTML or transforming. Each block can transform into different ones. One kind of key concept I'd like to share is placeholders. These are a great way to have in maybe a custom post type or just on the page itself as you're writing that loads up to you easily see how you can add different types of content. It's so much better for a person to interact with that than an empty page with no guidance whatsoever. Here you can see the difference between the image and the quote placeholder. The image one is a call to action to add an image but you can also drag images as the text suggests. The quote is just to show the potential format and encourage a citation. Let's move on past that design language and vision and really look at the heart of Gutenberg and see what a block is made of. This is it. This is a blueprint of a block. It's pretty simple, right? A tool bar a more menu and some up and down arrows. First we're going to look at the tool bar for the blocks itself. Here you can see a paragraph block and this has the tool bar beside the block. You can change the position of the sidebar. The next question you're possibly asking I don't want to read your mind but is why would you change the position? In usability testing it was found that people were split in the tool bar. So the placement of this has gone back and forth and for now we're leaving that option there to get more feedback and so we can really find something that works well for everyone. Remember the document sidebar? Blocks have it too. Here you can see the entire sidebar for the paragraph block. I'm going to say something which is one of the key foundations if you're going to make a block today and that's the difference between primary actions and secondary actions for a block. The tool bar of a block itself has the primary actions. These are things that a block shouldn't function without. For example here you have a way to add a link or a way to make something bold. Secondary actions are anything else. They are nice to have. They're additional. The block doesn't have to have them but if it has them that's pretty nice and greens that extra functionality. As I said earlier almost all blocks can be transformed into another type of block and this allows easily for changing content. You can do this by either clicking the drop down in the tool bar or through the ellipsis menu. Here you get a list of everything a block will be transformed into. Each block is different. For example you can change a paragraph to a list, a quote or even a heading. It's worth adding that there is work going on to move transforms to just one place. At the moment we have it in two places and have this resemble a little bit more like the block library. This is one of those little unifying improvements that we can work within Gutenberg as we get that feedback. It's important to look at the states of blocks when talking about designing within Gutenberg. Here we have the unselected placeholder and this shows when you select the block and you have no content at all. This is that encouragement that called to do something with that type of content. Then you have the selected. This shows after you add content or select a block you get this state. Then you have unselected but contains content. There's probably a better name for that but let's go with that. It looks pretty much how it's going to look like on the front. Then you have the hover state. This indicates the type of block as you're interacting with it. Now I've done a bit of a whirlwind and I've covered the basic anatomy of a block. I'm going to have a look at some examples and see how this applies to them. I'm going to look specifically initially at the gallery block. Here are the placeholders of the gallery block. We have an upload, a call to action to do something and also that encouragement saying what you can do and then allowing you to do that. When you've actually unselected it, here's the filled out state. Looks pretty much how you're going to have the gallery on the front end. Look. Then you have the selected state when filled out. You see here that little upload it says, hey, here's a little bit of a call to action to add an image as well. Then you can hover to actually add captions or interact with that gallery block itself. The toolbar has all the must have actions like editing and alignment and then the ellipsis allows for further actions like advanced settings and converting a block. For gallery, it can only be transformed into an image and that kind of makes sense. Some blocks are not going to make sense to turn into multiple different things. The settings toolbar shows those nice to have extras like doing columns and doing different things with a gallery. I wanted to take a little bit of a time to pan out from the block and share some hints and tips now I've got some of those basic bits about the design of blocks and to really hope that these will provide an easier way of you designing. The first of these is to really keep icons simple and signify what the block is. If you can imagine blocks in a block library from a scanning point of view, you really want to identify that. Every block can have an icon and some text and also has a title and keep that short and apt. Another kind of tip is to have good placeholder faults. When you're kind of thinking about those states of blocks, think about what that's going to look like on the page for the person to interact with. When unselected show a preview of a block make this look as close to the final output on the front as possible. Every block at a minimum should have a description of what it is when you view the additional setting. This would happen when you see it in the sidebar. That's some tips just some little points. Now I'd like to move on to some of the thoughts that would impart our answers to questions and conversations around designing for Gutenberg. I'm not going to get too in-depth in this but there are some points I feel important to cover in this talk. A lot of work has gone in and will continue to go into making Gutenberg a better adaptive experience for mobile and any other different device you want to use it on today in WordPress. This is important work and needed to set up the project for the future. Every single thing you should do is should be tested across different devices. If you're not doing that when you're making a block I would encourage you to start doing that. Really consider what the interactions are going to be like on those different devices both the front and within Gutenberg itself and how that adaption happens as it goes on to different devices. One of the big questions is where should blocks live? Should it be themes or plugins? The question probably should be answered with it depends because there potentially is an argument for a very particular theme that has a very particular block to have that block only in the theme. But the majority of situations your blocks are going to be in plugins. So I would encourage you to consider putting them in plugins so they can be reused and not tied to that theme specifically. One term that comes up when talking about Gutenberg is whether it has direct manipulation. I'm going to take a little bit of a pause and look at the definition of direct manipulation because I think it's one thing that sometimes different people have different ideas about. Here it is. It's an interaction style in which the objects of interest or the things you are interacting with in the UI are visible and can be acted upon physical, reversible, incremental actions and receive immediate feedback so it's that I do something, something happens. As you can see in Gutenberg, we have that. And when creating a block you really need to consider that and consider that direct manipulation. Consider how things interact. Someone experiencing the interface expects this now. This is like a baseline interaction that everybody wants to have with an interface. While it's possible to create a style and share that through a shared block, actually having a set of pre-styled options per block is something that we've heard as feedback as a project is really wanted. And I think that would be a really useful thing that most people would agree on. Well, block styles, also potentially called variants, we haven't worked out which way we're going to call those yet, are a great way to do this. Right now as you can see with these designs it's being explored. And the keen-eyed amongst you will notice there's three different approaches here. And it goes to show how several designers can approach the same interface in different ways and that's why I wanted to share this with you. This is how Gutenberg has been designed in the open with multiple people working through ideas and contributing. And you can follow along this issue and see how this evolves and how those discussions happen. It can also have styles brought in from the editor to get things nearer to that what you see is what you get kind of experience that feel. Gutenberg editor styles allows you to do simple and also powerful changes to styling of blocks. For example, you can set a colour scheme or you could go further in each block even. And you can find out more of these links. As said, I'm going to have some slides at the end a link for my slides so you don't have to copy these links down. When should you build a block is a common question that's often said around Gutenberg? Mostly it's going to be a block that you're going to make but there are also other options. And this is where there is a lot of potential to create a more native, seamless, additional experience within WordPress and truly extend not just build on top of WordPress. Being able to hook into the cyber is a really strong design pattern. Imagine something like this. There is the ability right now to pin and have custom cybers. The potential for this is going to be really exciting and I'm kind of really excited about seeing what someone realises and what is created in the community from this. Imagine scanning your content and getting back information on how to make it more readable. That's pretty good as you're writing. This can be done through a plug-in potentially hooking into the interface and this would truly take Gutenberg to a more app-like experience that sets WordPress up for that future that we all want to be part of. Collaborative editing is something I know I've heard a awful lot of feedback about that it's wanted. It's really something that would simplify a lot of publishing flows that people have outside and then bring into WordPress. This is just a mock-up but the future where this is possible is close thanks to the work that has gone on so far within Gutenberg. Commenting, that's come a long way since the first idea within Gutenberg. You can follow on the issue here and it's really a fully fledged vision now and being made into those final mock-ups. On this issue are prototypes and I'd encourage you all to check it out as it's something people have really wanted native within WordPress and it's going to be a powerful feature. Tips in their first form and I'm saying the word because that's kind of what we're calling them for now but they are a kind of new user experience guide. It's a short step through a little bit of a story as you first load Gutenberg that points out the little points on the publishing flow and takes you through that. In later iterations there is a possibility that this could be developed into something like helpful tips that levels you up as you're doing certain different actions but of course it's going to be able to be turned on and off and extendable. The hope is this will ease people into the new experience and also provide a design pattern that can be used by other people. So that brings us to the end of this whirlwind trip for Gutenberg design. There's a lot of work to still go on but day by day the project is shaping and we're finding into being the product that you'll be able to interact with. I'd like to take a little moment of pause to say thank you for anyone that has made a contribution to Gutenberg. Every single contribution matters and contribution is not just code. Gutenberg has got this far through all the amazing people that have got this product and it's been a pleasure to work with everybody and a particular pleasure of mine to work for the designers with the designers that have made Gutenberg. Here are my resources and on that page it's also a form link where I would love to hear anything in this talk that I didn't cover that you would like to know more about maybe there's something we should be including as a project in the Hamburg or a post written or even in future talks. I wanted to also give some time for questions so I hope you have your questions ready. Thank you. So we have two microphones on stands here in the center and if you're stuck kind of in the middle of a row if you wave your hand around we've got some folks with microphones who can run to you. Do you have any questions? I have a question while folks are trying to come up with something. What is kind of harkening back to the question that was asked of Matt during his keynote what's your favorite part of the new Gutenberg interface? So I quite like the forward slash command because once you know it it's like one of those level up points once you know it you can just write really quickly. I also absolutely adore the new block library. I feel that that has been something we've done a lot of iterations on and I feel like we've really got to a point with that now. So yeah. Anyone else? So we've got shareable blocks when I change the content on one page the content changes on the other pages. Are there also block templates that I can that have the same structure but I can use with different content on different pages? So at the moment you can do that with custom post types. So there is a way that you can have with the placeholders but elements like that there's some prototypes of what phase 2 is going to be like when we're moving to customization. So we have a start of that and that's definitely going to be the route we're going on. Thank you. Hi Tammy, really good work. It's really exciting to see what's happening with Gutenberg. Can I ask a bit about column blocks because Matt said that this is one of his favorite features at the moment. I know it's kind of experimental at the moment and I know that there's some issues around kind of wrapping blocks in other blocks. Can you talk a bit about how the progress of that and if it's not going to be ready for 5.0? So that's been iterated on column blocks have come on quite a journey so they started out as an experimental idea and I feel they've been iterated on and little tiny improvements. We haven't got that there yet. They definitely are still experimental and I really hope with contributions I guess that's the kind of answer like columns is something everybody wants so if we can turn that into contributions we can really get there with columns. Thank you. Hey Tammy, it's John. As an early critic I have to say it's come so far, it's delightful to see what Gutenberg has become so good work to everybody. Question as I see it continue to evolve kind of twofold, one I see blocks getting wildly out of control very quickly is there anything being done to curate them and then second question you brought up themes sometimes being a place for blocks obviously themes are often the starting point for users is there going to be any way a theme to install a plug-in that contains a block permanently or some kind of block registration system that transcends each individual theme? Can I ask what you mean by worldly out of control? When I look at Gutenberg now there are a lot of blocks and once you get three or four plug-ins installing a dozen blocks each I can see it being a big mess for users very quickly. So I definitely think we have now the new interface of the block library and I think the next stage of the block library is getting better searching and that's something, the way to surface the right block at the right time is something that we will be iterating on. So I definitely also have a concern the more blocks that we have imagine searching for file on your computer that's a similar problem, right? You have lots of files on your computer and you have to find the right file at the right time. So I think that's going to be a process to go through but I think that's a conscious point so thank you for reminding that point. Could I ask you to repeat the second bit? Sorry. The themes being able to install plugins that enable blocks rather than themes directly holding blocks themselves. So there's already been some themes which come of a plug-in which have a suite of blocks so I've already seen that so I think that's definitely something that people are doing. For core to enable that? I can't come up with a core to enable that specifically but I'm not sure it needs to do that because I feel that if you are doing a particular theme that needs particular plugins particular blocks that's something as a community we can kind of negotiate on. Thank you. We have just a couple more minutes so let's keep the question short and maybe we can go on and see what Tammy feels like. Two short questions. So I noticed screen options is gone in Gutenberg it is in the classical editor in the top screen options So it's now code view to get to the code view Is that what you're trying to get to? No, when the classical editor you have some different options in the top. Oh the toolbar at the top. That's gone in Gutenberg. I lovingly call that the kitchen sink. There are plans to implement this in Gutenberg. So we have a classic block so you can still get that back you can use a classic block to get the kitchen sink back and you can do all those interactions and you can also still write in classic mode so you still have that option if you want that back. I think for the whole of Gutenberg what we're working on is surfacing those really useful things that were that toolbar it was useful if you knew what every little one of those tiny things were but generally for a lot of people it was quite overwhelming if you see too many things so there is an experience of that when you have a too complicated toolbar so it's about finding the really useful bits of that and then bringing them over into Gutenberg itself. Thank you. One more question. Welcome. So will we be able to make our custom categories when you select a block will we be able to make our own categories? Yes, so there is a way that you can put them within the block as well. So you can say this block goes here in the sections. No, when you add a block to your page you can select from a few categories like common layout. It would be when you would make the block you would say where that block would go. For shared blocks specifically they go in the shared block. Can we make our own categories there? I think that's possible, yes. Is it possible? I think it's coming possible. I will check that for you because I don't want to give you a fact check Thank you. We're just about out of time but I think Tammy if you're up for it we can take these last two. Okay, yeah. Hi Tammy. How will we be able to nest blocks? You can already nest blocks. Okay. How do we do that? So you can move a block within a block and that's how you get nested. Just drag it in. Great. But I would say that feature is something we're really refining the experience right now. And does that work with layout as well? So layout, the more layout beyond, so columns you can add a different type of block within the columns, that's one good way of doing it which I would say you kind of get those different blocks in. But to actually kind of go beyond that then that's where you're and that's probably more the answer you're saying with the question is when we get into more of the customisation. That's great, thanks. Hello, I'm Tom on the VIP team. I did have two questions but I'm going to ask them both and then you can pick which one you want to answer. Saving time. The first one. So at the moment you go to the post screen and you can see Gutenberg but throughout with the old Classic Editor and Tiny MCE we had the WP underscore editor function so I could convert a description in a term field into a Classic Editor or something on the user profile is something similar in the works for using the block based editor because I can see maybe if you have a user profile someone might want to go in there and maybe expand it more than a paragraph. That was question one and question two a while ago we saw especially when the status of how meta boxes were going to be in Gutenberg was influx and now that they've settled down more there were some ideas that were put forward which looked pretty interesting for example if you have a product you would have a inline price block which didn't map onto content but rather onto post meta and I know since then we've had templates but templates can change and be removed and changed around and I just want to see what your thoughts are with moving forward with that and is that the future that you envisage things going forward in or? So on both of those questions I would be quite cautious because I am more on the design side so I don't want to give you a wrong development answer so if you can see me afterwards I will get those facts maybe for that one so I don't want to give you the wrong information there I know everything is influx at the moment so nothing is truly set in stone as far as APIs are concerned so I'm okay but absolutely I will try and get that information to you Tom Thank you Thank you for your applause for Tammy