 All right, so thanks for being here we're gonna get right into it because it is only 15 minutes So building a thoughtful block editing experience Honestly, I should have called it building a thoughtful editing experience because it's not just about blocks as you're gonna find out Now the end result is really important because that's what most people see But how you get there affects more than you think in more ways than you know It's a very broad and vague statement But we're gonna look at how that actually affects people like us who build on top of WordPress so Before we tech get right into the weeds of that though I want to take a step back and set the stage for why this is important Number one you are not building a website That's what most people say to me when I talk about this with them Ruba, this is all well and good, but I'm just building a website. No, you're not you are actually Extending a tool building on top of WordPress to empower someone else to create a website Yes, you might be editing some content in there You're helping launch a website, but you're not actually creating the website You are creating a tool for someone else to be able to create a website. So that's important to keep in mind To it's really important to care where our users spend their time Now when someone wants to create something in WordPress, especially if it's front-facing They very quickly transition from what to how how they want to create the thing that they want to achieve and That happens not on the front end of the website It happens the editor so how the editor functions is really really important and three It's really really important to care where your users are spending the most time and What they're doing so I've heard a lot of developers builders agency folks They all tell me, you know, my clients don't care how something is done They just want it to look good and you know, it's important So as developers and agencies, it's important that we care that the final result is correct performant and Accessible however, it is a mistake to care about that so much that you forget about how someone creates that final result because ultimately If you forget about that you actually create more problems for yourself as a developer or an agency Because your clients get frustrated. Sometimes you have scope creep You know things just get crazy and if you had paid a little bit more attention to the how You could have avoided that So that's the larger why of why this topic is so important to me that is not showing up here Come on There you go. All right, but now let's get into the weeds of it You can't craft a good editing experience if you don't understand how the blog editor works So the first thing we're gonna do the first consideration of creating that experience is understanding the anatomy of the blog editor so What you're seeing on the screen? This is the bare bones block editor It's a large canvas and that is where your user is spending most of their time Why because that is where their content lives in the form of blocks Second whenever they're interacting with the stuff on the editor canvas There's always a contextual tool bar which provides access really quickly To important functions and utilities that they're gonna reach for all the time when they're creating their content and third Not first not second third. We have the sidebar the sidebar is optional The canvas it's always there the tool bar is always gonna be there when you're editing that sidebar It won't always be there you can turn it off So when you have your block and it has something important required or necessary Don't put it in the sidebar. That's not where it goes It goes in the canvas where it goes on the toolbar. Why because that's the place that is always there Once you understand how the blog editor works You want to keep that in mind as the foundation for all the other things that we're gonna talk about Now whenever I talk about this I ask someone, okay What do you think the next consideration is and they immediately go to oh, you know, what kind of block are you gonna build? No, not quite you might not necessarily have to build a block in order to create a good editing experience Broadly speaking, there's four sort of options that you can mix and match in the block editor As we know of it now to create a good editing experience The first one is a pattern patterns are awesome. I love them Basically, what are patterns? They are configurations with presets of existing core blocks or other third-party blocks and You put some stuff in there you save it as a pattern in this case for example on the screen You're looking at a call-to-action block. It's a cover block with a background some text a heading and a button Now if you save that as a pattern all the user has to do is grab that pattern pop it in the editor Change the words and they're good to go and their block pattern that component looks the way it's supposed to as the designer intended it They don't have to figure out anything because all the settings are already there and a lot of the times You don't have to make a custom block that the core blocks can do this for you if you just think about it a little bit But if that's not enough you can actually extend the core blocks Don't reinvent the wheel if you don't have to don't jump right to a custom block Sometimes you can extend an existing block one of the ways that's really really common a lot of people use it It's built right into how you create a block our block styles a block style allows you to affect the CSS There's a visual look of a block without having to create a brand new block What you're seeing on the screen is a picture and a quote sort of a testimonial block and a lot of the times What I see is people make a custom block to make this happen Why because the text kind of overlaps and there's like a little cool pattern detail in the corner And there's like rounded edges. No, don't do that You can use a block style to apply that class add a little bit of CSS and make it look like that without creating a brand new block Maybe you want to add a little more flexibility though So one of the other things you can do is you can add a setting to an existing block that little corner detail Maybe you don't want it on every single block And if that's the case you can add a little toggle sidebar in the sidebar or in the toolbar depending on how often you want someone to reach for it and Allow them to be able to turn that on or off and then third. This is not as common Can be a little hard to do but sometimes it's worth it You can add a new content area to an existing block So here what you're seeing is a quote block. There's a quote and then there's a citation But what's different about this that this citation has a little company label underneath You can actually use a rich text component We want to get all technical about it and add that to the quote block And now you don't have to create a brand new custom block just for that one little text field You can just add it in there and it'll work in every single like a quote block. There is Sometimes a pattern isn't enough sometimes Setting itself is not enough because it's too flexible It allows the user to do too much and you want a lot more fine control now In core in block editor, there's a lot of different ways. You can lock things down my favorite It's a little bit opinionated is inner blocks. What are inner blocks? They are a component that is just like a pattern But allows you to learn of really really lock things down in the wrapper of a custom block last year I was building sort of an editorial magazine website for a client and they have Indigenous art that they had to showcase in a very particular way for legal reasons So we built a custom block that was inner blocks template had images and those extra information Formation that they needed to add that could not be removed as an inner blocks template So that no matter how or whenever they used it it showed up in that legally required way So if you need a lot of tight control, you know blocks are awesome Now let's say all of that doesn't work for you in that case Yeah, you're gonna reach for a custom block and there's two types One is a static block a static block works when you have information in a block that is independent on outside factors For example some paragraphs or in this case a statistic anything that you want to be able to manually change that can go in a static block But sometimes you have a block that is dependent on outside factors in this case on the screen You're looking at a block that has three block posts showing Three most recent blog posts in that case The content of this block is dependent on something that isn't happening in that particular post as soon as I update my Blog add a new post. I want this to reflect that in that case I use a dynamic block because it's gonna check the server on the page load Grab the three most latest and populate the block appropriately Okay, so we've talked about the different ways that you can mix and match things what those options are in order to create that editing experience What is the next consideration? No matter which way you go the next consideration is a name And I have a lot of opinions about that like a lot, but you're gonna hear some of them in a very short amount of time right now You never name your block Maybe your pattern but never your block based on the use case if you have a media text block the one We just saw you don't call it blog post author bottom section No, you call it media text block because you don't know how your user will use it You intended it to be used in a very particular way But the people you're making for are creative cool people and they might find another way to use it And if they do that and start liking that way better that name that weird specific use case name You gave it. It's not gonna make any sense. That's not sustainable. That's not long-term Good thinking don't do that. Give it a generic semantic name That's gonna stay and make sense regardless of how someone uses the block even if it's in a way that you didn't anticipate If you have use cases and they're important pop them in the keywords That's what they're for and if it's a client site hot tip I love this my clients love this pop the name into the keywords They can fill through the whole block library and see all the custom blocks you made for them super handy Now if you're making a custom block Wow, I'm out of breath If you're making a custom block The next consideration is gonna be the icon People forget about this icon sometimes I see a lot of icons and they're all the smiley face that generic icon that the block create block package gives you Don't do that. Why because the icon serves the same purpose a logo serves for a brand It is a small identifiable piece of imagery that helps you quickly figure out what block you're looking at There's some really good resources for this First one up WordPress icon library. It's amazing. It's fantastic amazing designers worked on it If you want to explore those icons and see what you could use go to WP helpers that the icons is a plug made that resource with a friend Brian and Choose from there. That doesn't work Go to material icons if that doesn't work choose hero icons Why did I choose these because they match the aesthetic of the block editor and you want to Make everything that you create for the block editor match so that there's no cognitive dissonance for the person who's using the content Editor for themselves. It's not about your blocks. Not about what you made. It's about their content If none of those packages work, you want to make a custom icon make sure it's 24 by 24 as of 2023 for those of you watching later and Make sure it's high contrast ideally black and white I break my own rules sometimes but ideally because you want to make sure even if it's tiny people can tell what it is All right, we know what we're creating. We've created a name. You have an icon. What's next the state? This is really important. It's most specific for custom blocks, but the principles apply to anything that you create in your interface Typically in the block editor. We have three states setup default and editing In the setup state, this is the state that you want your user to use sort of spend the least amount of time in and Not every block needs one the cover block has one for example Because you need to figure out what that background is going to be whether it's an image or a color Before you can do any other kind of content editing in there Whatever kind of set a state your setup state your block needs make sure it's in the canvas not in the toolbar Not in the sidebar. Why because without that they can't go further So put it in the place that is most obvious most actionable and make it clear In the custom block world for example I was on a project recently and we had a setup state because it was a block that integrated with the Google Maps API and In order for the block to actually function We have to ensure that they've saved their API key into WordPress So make it clear make it easy get them out of there as fast as you can Second we have the default state Every block needs a default state this is what your block looks like when you're not editing it and It should look as close as possible to what it's going to look like on the front so in this case you're looking at the media text block and what you see is Me on the side text on the other side pretty obvious looks great Even there's nothing in it even if you're not editing it You want that setup sorry default state to look really really good, which is why another term for it is the preview state For example, if you have ECF blocks, they literally call it the preview state Then you have the editing state. This is the state your user is going to spend the most time in and You want it to look as close as possible to that default preview state Why because the point of the block editor is to provide your user with live feedback as they're creating their content on how? quickly or or how it's gonna all look one minute, so let me go through this really quickly and Here you can see all of the things that are happening in the editing state of the media text block There's an outline. There's a toolbar. There's even that sidebar that I don't really like But you still see exactly what that block will look like around it, you know Sometimes that's not possible You have a complex block maybe for example a details block that just came out cool block I have complicated feelings about it find me on Twitter or exa that's called now When you're not editing it all you see is the summary But when you're editing it it looks a little bit different because there's other expanded information that you need to be able to see so Ideally it looks the same no matter whether you're editing it or not But if you can't you want to get as close as possible to it because in the block editor We want to take form function put them together make it all in one place so When you are thinking about your editing experience what you want to think about is What does the blog editor actually do how is it designed to be used make sure your block works with that? Second maybe you don't need a custom block There are other ways to create an editing experience that aren't requiring you've reinventing the wheel every single time To second or third wait third use a good name. Don't use a Descriptive specific name based on how you imagine they would be using it make it semantic Fourth have a good icon again. It's like the logo. It matters. It's not the whole picture, but it's really important and Last make sure all of the states They are as close as possible to that final state because that is the point of the block editor Function and form together that was really quick if you have questions find me afterwards And there will be more information on that URL if you have more questions That's all