 Hey everyone. I'm Rich Tabor, and I recently joined GoDaddy as the senior product manager of WordPress Experience. My role at GoDaddy is to empower folks to build beautiful WordPress websites in the entirety of the user experience that surrounds there. Right now we're focusing a little bit more on the Gutenberg side of things, and that's kind of where my last year of development has taken me, so I thought it would be a good idea to dive into the things I've learned along the way, so that we can collectively build better WordPress experiences. Because realistically, if we're building these awesome great experiences and WordPress is easier to use and more delightful to use, we're all going to win, because then WordPress is going to get more and more popular and easier and easier to use. So if you'd like to follow along on your phones or tablets or anything, you can go to x.co.com slash Tabor, and the slides will pull up there, and they'll switch when I switch as well. You can also catch me on Twitter at Richard underscore Tabor, and afterwards I'll be right across the hall at the happiness bar for additional questions or chats of any sort. Will those slides stay up after you go? Yeah, I'll get them up there, yeah. Alright, so let's get started at looking at user experience from a very wide-angled lens. Designing exceptional WordPress experiences has never been more important than it is today, because Gutenberg changes the very foundation of how we manipulate content in WordPress. It's known for its, right now WordPress itself is known for its indirect manipulation interface. That's where settings and options are buried within different locations throughout WordPress. You'll notice a few of these. You've got admin pages, widgets, short codes, customizer settings and controls, and within the customizer there's various panels and various sections of controls in there by itself. Then we have third-party applications where you're signing out of your WordPress site into something else, configuring something and coming back into your WordPress just to add an empty widget or empty plug into a page. All of these collectively are making the WordPress experience kind of mediocre and kind of difficult, especially for anyone who's new to WordPress. Gutenberg, on the other hand, introduces a landmark shift in user experience for WordPress. We're basically starting fresh with the editor, and we really have a chance to make some vast improvements in this. For one, the new editor is using a new direct manipulation interface with blocks at the helm. In the context of Gutenberg, direct manipulation is an interaction style where we're editing and manipulating each atomic block in the context of itself. What makes Gutenberg so awesome is that its inherent flexibility, the different core design patterns that we can leverage, and the core components that are built into Gutenberg that when we're building our own Gutenberg experiences, we can leverage to build amazing experiences. Now, this makes the editor quite a bit more powerful. We all can agree, but at the same time, and as a consequence, it makes it a little bit more complex than the classic editor. But in all reality, complexity is not bad. It's difficult and challenging, but it's not bad. It invokes that difficulty and is challenging and engaging, and that's kind of the mark we want to hit. Blocks of any nature should strive to be absolutely reducing the cognitive load of using the editor. Things should be as simple, as seamless, and as cohesive as possible, because we want to design and build blocks that are inevitably complex by nature but are not complicated. So how do we do that? We start with the Gutenberg design patterns that are set already in place for us. These patterns are a combination of solutions bundled in a reusable manner for common behavioral, structural, and creational software patterns in an application. Why is this important? We must grasp these principles of these Gutenberg design patterns in their entirety to build remarkable experiences, not blocks. We're trying to engage the user at a very personal level when they're editing their content and build the experience around the block that they're creating and that they're using, not the actual block, because what matters is how they perceive WordPress in that atomic context of using that custom block. So in essence, we're hardly building blocks, we're really building experiences, little micro experiences within each block. So let's dive into the actual block level interface and take a deeper look into Gutenberg as a whole. So at the atomic level, a block itself is the most basic unit of the editor. Everything we are going to interact with within the editor is a block. Paragraphs are now blocks, headings are blocks, images, quotes, pricing tables. Every single thing you add within the white space of that page is now a block. With its direct manipulation interface, that blocks, settings, and controls are now controlled within that one atomic interface. So when you select a block, you're going to surface those blocks, controls, and settings. Now what this does is allows for a wide variety of advanced features and advanced controls, while also not overpowering the interface and creating a very complicated and complex solution. We want to make sure that things are not complicated even though they are complex. So there are three main areas where we can add our controls and our settings within our blocks. There's the block toolbar, the block settings side bar, and then the block content area. We're going to dive into each one of these and starting with the block content area. Now interaction within the block content area is the most intuitive to use and should be thought of as the number one primary interface for adding and manipulating content. This is when you're first looking at a block, like for example in the paragraph block, all you do is type. That's right there, it's direct, it's in your face and that's exactly what you all you need to do. If you want to do extra stuff, there are other controls elsewhere. Now there are two main patterns for interacting within a block's content area. It's using placeholders and contextual controls. The first type of pattern is the placeholder. Now the placeholder is content within the content area of the block that can be thought of as a guide or a placeholder or a set of instructions in the interface for the user to follow. Now the requirements here is that it must be thoughtful. It must be entirely relative to the situation that we're in when we're experiencing this block and it must be short and concise. Let's look at some examples here. This is a masonry gallery block I built into block gallery. Now this gallery block has a placeholder component with directions on how to upload or select media in this gallery. Once you add that media, the placeholder is in replaced with the rendered gallery, closely resembling what we're going to see on the front end. This is just one way of how to use placeholders. Placeholders can take quite a few different forms. For example, this pricing table block here has micro placeholders for the plan, for the dollar sign, for the amount and each of the features and even the buttons. Using these instructions, we're creating a pathway for users to create and fill out their pricing tables. That way, you're not going in and manipulating stuff, taking forever just to try to get somewhere. Yes. So when I first, right here, when I first add those images before you see the gallery, all it says is masonry gallery. It might be too hard to read. It says drag images or upload into this placeholder. So all I'm doing is dragging those images right into it. To just write. This is the placeholder there. So each, what we're doing and we type something into these custom blocks is it saving it as an attribute of that block. So that renders, basically, that's the data structure for each of these blocks. This is a block that I've created that's in there for you to use. Right now it's on the co-box plugin. It's within there. But yeah, I'm just showing, these are just more advanced ways to do things. Yeah. The plugin plugin. Yeah. Correct. Yes. Yeah. I'm just showing how we can use. Yeah. I'm just showcasing how we can use various placeholders in one particular block here. Yes, it does. Right. It should. Yeah. You just install the plugin and it should be working. The co-box plugin. Not this particular pricing table now. Yeah. And we'll go through the pricing table and a couple other block case studies at the end here in a live demo. Yeah. I don't recall. Yeah. All right. Gotcha. And here's another example. Now this placeholders, all it's asking for is a gist URL. Once you add your gist URL in there, it's going to start rendering the actual gist. So you can see the pattern here is the placeholders requesting information. And in this case, we're requesting that URL. As soon as you add that URL and press enter, it's going to actually render what it's supposed to render. That's kind of the pattern here that we're kind of reiterating on over and over. So aside from patterns, we have contextual controls. It's a alternative pattern choice and one of the two common aside from placeholders. And these are logical controls that are based on variables within this one singular block. Now these must be minimal and not disorienting. And I'll show you guys what I mean here. So as you select on this gallery block, we're going to see this new upload an image button show up. Now these controls are rendered based on the fact that we have media already and we need a way to add more or upload more. Otherwise we'd have to figure, you have to somehow like do something because we're going to want to edit our media and improve our gallery or switch it up with more stuff. And the important thing I'm doing here is it's a very minimal change. I'm not really disorienting the UI. I'm not switching things up to make it seem much more complicated than it actually is. And the core gallery block does the same exact thing. Yeah. Like with this gallery block, now these images are sized and properly work there. Would we need to plan ahead and edit our images to, we know they're going to look good in that size and that orientation. In this particular gallery, it just, it basically is a percentage base. So your images will fit masonry wise when whatever percentage base it's selected at. It'll change how tall they are technically like a very wide image would show super short. All right. A little bit. Yeah. So outside of the block content area, we have those other two methods, the toolbar and the settings sidebar. Let's take a look at the toolbar here. Now the toolbar is a very interesting because these, this houses controls that are 100% necessary for manipulating your block. These must be contextual as well fitting within the current UI. You can't add anything that's going to break the current UI model within the toolbar and they need to be again 100% necessary for managing that block. And that's really important. So here's a map block. This is also a block I added within co blocks. At the very top right there, I'm toggling an edit location toolbar control. Now this control is contextual. It only appears if we have an address or location saved within the map block. Otherwise we don't need to edit a location if there's not one there. Clicking on that control will reveal the original placeholder UI. It'll flip us back. If you can just imagine us kind of flipping it where we can edit it. And once we hit apply, it flips it back and we see our map once again. This operation is necessary for managing that block because we want to be able to change our location. Therefore it's properly placed within the block toolbar up top. So then we have our sidebar settings. Now while a block toolbar houses these controls that are absolutely necessary for your block, the sidebar settings is where you put all of the advanced functionality that is not necessary for your block. These also must be contextual. It's kind of a theme that we're going on. Everything we do in our blocks needs to have some sort of relative functionality based on something else. So here's that map block, the same exact one. Now we're looking at the setting sidebar on the right here. I have zoom level and an height and pixels level. And as you add an address, the zoom level and now the height and pixels options are now available to manipulate in this setting sidebar. Neither of those are absolutely necessary for this block, which is why they're placed within the sidebar. And if you look closely at the map block at the very bottom, there's this little blue nib when you select on the block. That little blue nib shows that this block is also resizable. You can click on that. It's a design pattern within all the Gutenberg core blocks. When you click on that, you can drag it. What I'm doing there is using that block content area as the primary interface of this block and putting controls in there that we can leverage so you don't have to go to the setting sidebar. Now, all of these UI pieces that have shown you, including that resizable box with the little handle at the bottom here, the zoom level and the height and pixels and even the icons within the toolbar up top. All of these are core components provided by WordPress. Now, these core components are provided so that we can have a level of consistency across all of our blocks, including and especially including third party blocks, because a consistent experience is absolutely paramount. Otherwise, we're going to have this fragmented some blocks were great. Some blocks are terrible kind of system where we almost have now when editing content within the classic editor and all these other different types of page builders. And then you end up doing this. So these blocks must be 100% familiar. And you know what? If you can make it feel as if it's a core block where you don't have to relearn anything new when you're manipulating this brand new block that you've never seen before, then that's when you're hitting right on the target. Let's take a look at some more core components within Gutenberg. Right now, we're just going to look at the paragraph block. Within the paragraph block, we have the font size drop cap and color settings options within the setting sidebar here. The font size component is called the font size picker. And this is built into core where you can also customize the actual number if you want to do like an advanced type sizing and you can reset it back to the default or pick one of the theme specified small, normal, large or huge. You can also use the toggle component built into core to add a drop cap option or whatever you're doing. And what's neat about that is we have the help tech help text underneath the drop cap, which right now says toggle to show a large initial letter. As we toggle that, we can switch it to be contextual where it will say showing a large letter or initial letter so that way we can actually do really contextual help guides to help people understand what's happening. Yes. Yeah, I don't know if you can right now. Besides maybe tab or spaces. Yeah, maybe spaces and right now. Yeah. Yeah. Well, using these components, we could extend the paragraph block and add a tab or how to toggle to indent this paragraph. We could do that relatively easy and it would look just like the drop cap toggle right underneath it. That's something we could think about doing. Then we have the color settings panel at the bottom or it's called panel color settings is the official term for this panel down here. And this will pull in any of the theme colors that the theme has specified for the color palette. And it's pretty it's pretty interesting because we can basically tie into the system and apply colors from whatever whatever we want to do within our blocks. As long as we're following the same exact pattern by having it within the color settings panel and then having it trigger the colors on the left, then we're good. All right. So now let's do some demo time. Do you have any other questions while I pull the demo? Yeah, so on the core GitHub repository on WordPress or on WordPress's GitHub repository, there's like you could find all of the entirety of the components there and there are a crazy number like maybe 50 to 100 and even more so after that, like they're always continuously adding more and more of these components that we can reuse. How do you actually find them? Because when I go into my little Denver thing, it only gives me the most commonly used blocks and there's only like a dozen. Okay, as in users here, I'll show you, let me pull up the demo here. It's an attempt to make building pages better in core WordPress page. Yeah, I mean, I think that there will be a need for a little while, maybe a little bit longer, because they're serving almost a different market. They're going for the building these really crazy websites and beautiful pages and stuff. But it is much more complex than it should be for everyday people just trying to make a really awesome website on their own. And I think so this is trying to push that where we're just trying to empower people to build these websites using as simple as tools as possible by following all of these patterns and all these core components that they're laid out for us. In Genesis, I think you can use. All right. So here we are here. Okay, now this is a little tight, it looks like. But we're going to showcase a little bit of stuff here. Let's go into first we're going to do with the shape divider. This block is pretty neat. This right here is the block content area. And remember, this is the primary area for when we're editing and manipulating our content, which is why I built this resizable bar right here where we can resize the height of this divider and also the space between the content and the divider itself. The idea would be you could add another container down here that would have the same background color and make this like really cool wave effect within your media. Now this right here is a color picker and this is also a component built into Gutenberg that I leveraged and in the spirit of bringing the stuff out of the sideboard out of the toolbars and into the primary interface, I added it right here so we can just manipulate this color. So let's do some something cool. This is something that I built to demonstrate the different components and how we can leverage them. Yes. Yes, you could use this. You could use this. Yeah. Yeah. Yes. And if we're designing and building our own blocks, we could leverage the same components in the same style to try to create uniform experiences all around. What's neat about this block in particular, let me close out here, is when we go to let's say a phone view here and resize things, let's say because we're going to want a smaller divide on the phone and then we go back up to the larger view, the viewport actually changes what we've done based on the switches and the sizes here. So that way, when you're manipulating this content on the smaller screen, it looks the way it's supposed to look like on a smaller screen. So that and that took a lot of effort and over here you'll see the actual controls for this. Now we have these different like right now I just switched it earlier in the UI but over here we could do the same thing for tablet, desktop and also mobile views. We could also flip it if we wanted to put this one on the bottom or if we just liked it on the X or Y axis, all these are also available in the toolbar because these are pretty important I think. Okay. And then another cool thing about Gutenberg is that we have this new styles type components where we can leverage what Gutenberg is added to build these really neat styles that you can flip to on the fly. It's for anything that runs Gutenberg. And custom post types can even opt in to use in these as well. All right. So then let's go into the map block. So here we have the placeholder element and this is the initial state of the map block because we don't have an address or anything. We have no custom things up here in the toolbar besides what core adds there for us. And let's type in the Eiffel Tower. So now we have the edit location control up here where we can swap back here and change it if we wanted to. And we have the resizable box component wrapped around this entire map block so we can resize how tall we want this. Core adds these two right here, which are wide in full alignment. And if your theme supports this, you can go in and toggle those on and build this really cool map. So the map block is very interesting because I actually built two different plugins or two different blocks into one, essentially, because right now it's an iframe. And at GoDaddy, we're really trying to make things simple and as easy as possible. So this is the best solution if you're just going to put your business map on your about page. But if you wanted to go a step further, you can go into the advanced settings here, plug in your Google Maps API key. And things kind of look the same over here, just a little bit different. But now we have this new style selector where we can set the style of this map. In our advanced settings, we can still do our zoom level. Let's set it to 18 here. We can set the marker size if we want it bigger. Now we have these also, these are all contextual. We have all these map controls. We can turn off the street view right here or let's turn off the zoom controls. If you want to turn them all off right there, that's where you toggle. And now that entire panel is missing because we don't need it anymore. If all of your controls are off, we don't need all those individual options. And you can also select the styles from in here. And this looks very similar to that shape divider styles that we created. So this is basically leveraging a bunch of these different patterns all in the same manner in order to build this really neat experience when using this block. So you're going to have any questions about this block in particular? Yes. It's a little bit advanced, but from Google API key, where is it stored? Is it stored with that house? Or is it stored in the options? In the options, yeah. Which is neat, because if you added once, it'll always be added on any of your other map blocks now. Yeah, and it's not in the content side. Correct. Yep, and it defaults to that advanced form, the advanced block here. And this one isn't released yet, this advanced version. Right now it's only this version, but we have the iframe version coming out soon. Mm-hmm. You can, right now the plugin is on WordPress.org. If we're in WordPress, can we go to plugins in now? Mm-hmm. It's right here. Is it right here? There's a cool video on the showcases, a bunch of stuff. And there's a bunch of new plugins in there. Let's go into, let's see how much time do we have. Oh, way of sweet. All right, this block is a little tight on the screen. And you can almost not see it, but right here we have a massive placeholder component. Now this placeholder component is essentially replicating what I'm gonna eventually put there, an image. So let's go into this folder right here, and let's drop in an image. Now we have our image right here on the left. We have these controls up top here where we can manipulate the background. We can edit the image that we just uploaded. It says edit media because you can also add videos in here. And then you can swap this left and right if you'd like. Now for advanced options over here on the right, this is a control that we built. Basically the idea that I like to do, and the same thing that I've explained with the map block is to make a very simple way to do something in an advanced way for the folks who want something more advanced. So let's add a background color so we can see this here. Added a background color here. Now we have different variations of padding that we can apply here. And just the same way that font sizes and colors work, a theme can override and set their own paddings here. And even margins for the same control that does margin. But if you want something more advanced per se, it can go in here. Now you can tweak things really detailed or you can unsync things and say you wanna add 100 at the top but only desktop, but on tablet, you want it to be 50. And you can kind of go in, you can switch it to M's or even percentages. Or if you're like, I don't know, I just broke everything, you can hit reset and it goes back. Then we have this alt text which is a text area component built into core as well. And this is very contextual. It only shows up if we have an image applied here. And we have card shadow and image shadow. Let's turn on the image shadow. You can't really see it, all right. Another neat thing that I did here, which kind of shows the next level of the experience, is when you add a background color here, if your padding is set to none, it'll automatically set it to medium. The idea here is that you probably won't want this look here where it's pressed up against the edge. So I'm trying to eliminate the issues where you try to do something and it doesn't look the way you want it to look. And you just have to be very thoughtful and try to play around enough until you break it to where you can eventually fix all the broken pieces here. And that's the media card block. And now let's look at the features block. I'll make this one wide too. So this one's really unique in the fact that all of these individual pieces here, this icon, for example, this heading and this paragraph here are all actually blocks in themselves. I built one wrapper block here and then I built a block for each of these feature containers and then three blocks inside of them. We look here and select the features block. We can see exactly how that's laid out. And I did this because when other developers and when core improves the heading block, for example, I don't have to do anything to also have those same improvements in the features block because I'm just adapting and bringing those other pieces into this block. So when you're building blocks, it's really important to try to leverage this as much as possible. For example, the heading block, I added this ability to change the typography. So let's change this to play fair display. We'll change this one too. If I had used its own component and used my own attributes and not used the heading block, then I wouldn't have been able to do that. And unless I added the entire, all that functionality that goes into changing the fonts into this one particular block and even then it wouldn't be as reusable as it is now. We can also change the heading sizes now. And in advanced here, you also have five and six. Now these icon blocks are really interesting because this is all another custom block I built, but all of this here resembles the exact same patterns I've already been doing, the simple and then the advanced. Simple gives you a couple of size options here. And if you click advanced, you can also now resize it in detail. A neat little touch here is if you're using the block content area to directly manipulate this icon, it'll automatically switch to the advanced size over here. So again, that's just being very thoughtful of what's happening. So when they go to the settings, it doesn't say small and you have a random size that you decided to be and you wouldn't know how to apply that same size to the next icon. We also built this search component here to search for icons. And this is leveraging various components within Core using the search field, using each of these icons to pull in different icons. So we can click globe, we can search for security. We can resize it like we'd like. Let's go, if we decide that we wanna do a music note and we want it to be a filled icon, this is using the same styles components that Gutenberg provides. Now all of these icons are the filled versions of themselves. Now once you have an icon here and you like it and decide to change its color, you can tweak it here, you can set its own custom color. Again, this is using the same exact color palette that we used in the shape divider and it's within the color settings panel, all the same. Can add a background color, which automatically added a padding to this. And then if we go up here, now we have these new contextual options to tweak this icon's background now that we have the background color assigned to it. Otherwise it wouldn't be necessary to change the radius of this icon. So that kind of showcases a bunch of different UX principles and patterns and all the different core components that go into building block experiences and then go in a step further in thinking about finding ways to make sure that when you do something it doesn't break and then it doesn't give you this like, oh, what did I do? Like reset everything kind of idea. So there's that. Are there any questions? Yeah, the one I built probably. So co-blocks. It's on the roadpress.org, slash plugins slash co-blocks. .org. Exactly, yep. Yes. I'm assuming you use React to build the blocks. Correct, yes. Can you still use other JavaScript frameworks? I know they were saying initially you're just vanilla. You can, but it's almost better to go ahead and try learning, because all the resources are now in React and it's just, it'd be much more difficult kind of backtracking. Have you tried ACF at all? A little bit with their block builder. How was your experience for that? I've kind of, experience-wise, the solution is not as clear and clever and as precise as what you can build when you're understanding the patterns and building within these principles, but to get started quickly, it works really relatively well. Thank you. Yes. Dibby, how are you, can you, or is it possible to do Gutenberg inside of Dibby? Probably not advisable, because Gutenberg, what Dibby does is it kind of wraps its own layer on top of things. So if you use Gutenberg, it's not gonna use what you have in Dibby. It's kind of, they're almost, it's one of the other, pretty much. Same with Beaver Builder, the same with Elementor. I mean, I'm not super, super familiar, but. Like if you're using a Genesis Prime model. Mm-hmm. Again. Oh yeah, you did ask me that, yeah. What's the question? She asked about the Genesis question that she had asked it already. If you could use Gutenberg with Genesis, and you can, yes. First of all, other things that do, I know they're a little different, this is a little newer, but it's just ideal to find a thing that works well with that specific one, and then go from there. Well, if you find a thing that works great with Gutenberg, it should work great with these other plugins. And this one's in a great, yeah. What's different about plugins? Exactly, because when we're building these plugins. Now that this is a thing, is pretty much all the page builders are gonna probably go through this sort of thing. I mean, do you think that'll become, like the other ones will change the way they work? I mean, I think in the long tail, they might adapt to be more Gutenberg-friendly. Because this seems more, like it'll be more intuitive, a little bit better, a little bit better. It could be, yes, yeah, it could be. As long as everyone follows these patterns and uses these components, and we have this chance to really push WordPress in a new direction of usability. Yes, was there a question? Yes. I've heard before, and I usually get designers who want us to force themes and things to do things they are never meant to do. So we have to get into custom code. So how customizable are some of the blocks that have been provided? For instance, if you had an icon and the designer wanted it to have a CSS animation on it, we have to get into react style components. We have to build our own block and throw this one out and build stuff onto it that wasn't on the package yet. Yes, you can extend other blocks. And like co-blocks makes a few of its functionalities extendable for other blocks to inherit as well. So you can kind of play off of that. And then you can also, if we go in here into the advanced panel here, you can add classes and then target them if you're gonna do anything special. And you can add multiple classes here. Yes, yes, yes. So you can tell I'm new to WordPress. Can I open up WordPress? Domain, can I open up WordPress and build a website just using the first three days? I think so, yes. Yeah. Are there any themes or backgrounds? Well, you always need a theme, at least for the next foreseeable future. I think things are changing. What is a theme is gonna be very different in a couple of years, but your theme will depict what your website looks like to an extent. You just wanna pick a theme. Mm-hmm. A theme. Right. It comes in solid with the theme. It does come with the theme, correct. It comes with the theme. So if you wanted to have a plain vanilla theme and then just play around with Gutenberg, what would you use 2019? I would, yes. It was just the most vanilla theme that. Yes, and this is 2019 here and everything, or most of what we do here will look just the same on the front end because they've gone into really detail to make sure that, otherwise, Gutenberg looks very simple, like almost like a word document and not as dynamic and as clean. 2019 is the name of the book. Correct, yes. They come out with a new one every year, so 2019 is. Yeah. Are there any other questions? All right, well, thank you guys. Yeah.