 Good afternoon. So my sole mission in life for the next 15 minutes is going to be to make sure that none of us in this room sort of laps into a post lunch nap time and we're gonna do that by talking about customizing core blocks. And the first of many traffic metaphors to come is setting guardrails for clients. And so there are probably some sort of clients rather than developers either here or listening and watching somewhere. I'll give you my perspective from the developer side in a minute, but I guess if you want to think of it in a slightly different way, we are talking about trying to streamline your block editor experience and make your content management easier. So if you have seen any of the Spider-Man movies or reboots or reboots of reboots, you have probably heard one of the grown-ups telling Peter Parker or Miles Morales that with great power comes great responsibility. Now obviously the only difference between me and Spider-Man is WordPress and the abs, but I'm working on those and sort of the gist here today is that you can't read this because it's so small to fit it all on the page, but those are the core blocks that you get with WordPress right now. And there's a lot of them and within those blocks there are a ton of options for customizing the content of that block. So there's a lot going on there and there's a lot of responsibility that goes with it. So in keeping with our traffic metaphor, let's take a brief detour and this is sort of a perspective that I was just promising you. When we build a site, we typically have an intense design and UX phase before we get started doing the developing. And our team at Minecraft, the design team, and the UX teams are excellent. All of those like Spider-Man comics, superlatives apply to them. Amazing, spectacular, friendly neighborhood event. No, not that one. What you see here is part of what they provide and it's this atomic design and so you've got a lot of very specific things on here on the screen. You've got button styles, primary, secondary, and tertiary. You've got headings there, typography is set for H1, H2, H3, and you've got font sizes, you've got font families, you've got font weights that are all being specified there. All of that goes into the designs and that's what's used everywhere in the designs. So it's pretty specific and there's, it's all defined and it's important to remind everyone that the client paid just as much for this as they did for the development part of it. So it's important to keep it in mind throughout the whole process. So another traffic metaphor, road closed. So let's start with a sort of drastic measure. We're not closing down the road, but we're going to cut off a bunch of those blocks that we saw earlier that we don't really need. They're not part of this project, they're never going to be used on this site. All they're doing is cluttering up that interface in the block editor when one of the users goes in to create a new page or update a page. So first we can use, this is in PHP, probably in a functions file, maybe in a plug-in. We're using the allowed block types all filter and we are essentially setting the allowed blocks that we want. So we've got button heading, image list and paragraph and that's it. So that when we go in to edit the page instead of what we see on the left where you've got a kind of small scroll bar and a lot of options there, instead we've just narrowed it down to the ones that are going to be used on this site. There's no kind of extra distraction there. Now we can do a little bit more with that if we want to with that filter. You've got the option, what we've got in the example here is that we are setting those allowed blocks and whitelisting them on a post type basis. So if it is a page, we want button heading, image list, paragraph. If it is our custom post type, we just want heading image and paragraph. You can do that, you can do some other things you're probably thinking right now of some other conditionals you might be able to use or things that you might be able to target to do that. Again, this is the same filter just in PHP. Let's look at the same thing but in JavaScript. We don't have time here to talk about what you have to do to enqueue your admin scripts and things but that's essentially what you would do and if you need to figure that out, you can Google that but that's what we've done. So this is an admin script and we've got our set of allowed blocks and then we're just looping through and unregistering the ones that we don't want. So we can do it either in PHP or JavaScript and JavaScript is going to have the advantage of being able to know about blocks that are registered in JavaScript whereas PHP would not. So now we've gotten into one of those blocks that we do want and this is the heading block and you can see that there are too many options. Based on that design that we saw earlier, there are too many options here. We don't need all this. We don't want to change the text or background colors. We don't want to change the typography settings. We don't want to change the size. Those are established in that design system and we want to keep that. We don't want to add margins or anything else on there. We want to keep what we've got in that design system and the thing to keep in mind about that is that when we talk about the client, it's not necessarily always someone who has been part of this process the whole time. There were the stakeholders who were there from the beginning and approved designs and sat there with the designers as the designers explained exactly what the reasoning was behind certain elements, the reasoning behind choices of colors, fond families, things like that and that's a lot of information that they have but maybe your client is someone who is coming on board four months from now and doesn't know but they have a specific assignment and they need to go in and do this and they never saw this design system and they never sat through those presentations to know exactly why the designers did what they did. So it's important to keep that in mind and that's part of why we are doing this. All right. So this is the theme.json file and this goes in the root of your theme. We talked about PHP. We talked about the admin JavaScript. This is theme.json. It goes in the root of your theme. And at this point sometimes when you first start in with this stuff you're thinking I've got all this other stuff that I've got to deal with. Now I've got these admin scripts that I don't use otherwise and now I've got to do this theme.json file that I've never used before and I'm not familiar with it and you're thinking I'm just going to write a couple lines of CSS and like hide this with settings control that I don't really want. And unfortunately you're going to look in there and you're not really going to find many or any good selectors that you can use to target that. So this is really as the marketing people say a non-starter. You're going to be using theme.json to do this. And it looks like this on the screen. It allows us to add, change, and remove certain features that we'll continue to talk about with this. And in this case we've got a typography settings for font sizes and in the screenshot we've got a few preset font sizes there. In our example that we're talking about here we don't want that so we're just going to pass that empty array. And then that's going to get rid of that setting that we don't want anybody controlling. You can also in theme.json control things on a global basis or on a per block basis. On the left that's going to take effect wherever those controls are used on any blocks. On the right it's only going to take effect on the core heading because you see that we've nested it under there. And you can do that for all sorts of things. So wherever that font size control appears you still have it if it's not the heading block, that core heading block. Now we're on our paragraph block and by default we've got a bunch of stuff here. Again we've got the text color, we've got the background color and we don't really want that and even if we did that's not our color palette. That's the default color palette that we get. So we can throw a few settings in there to get rid of those. If we decide that we do want a color palette then we can do this. We can pass along the colors that we do want to use in a color palette for this block. And so now we've got just those ones that we want dark green and light green. This is the core image block and right off the bat we are seeing like these giant rounded corners that are possible with that image block that we didn't see in our designs anywhere. That's not going to match our designs and it's probably not going to look good if one image on the site has these big rounded corners and nothing else does. Those are set as that rounded style that's provided by default. For this we are not going to use theme.json. For this we're going to go back to JavaScript, alternate root, make sure you catch that traffic metaphor. So we're going to go back to our admin scripts and we are going to unregister the block style default, unregister the block style rounded for the core image block and that's going to get rid of those. This is a reminder of what that design system looked like when it comes to buttons. We've got our primary button, we've got our secondary button and we've got our tertiary button. And we've also got our hover and active states so it's very, very well thought out and it's all laid out here. So you can start to imagine having seen a few of these other blocks now, what sort of controls we might see on this that might cause problems when you have a very clearly defined set of button styles like this. And sure enough we've got styles fill and outline, we've got width settings, we've got those colors again, and we've even got a border radius slider. And there were no border radii on the buttons in the design system, those are nice square corners. So what are we going to do about this? Well first those colors are easy to eliminate, core button block we're just going to set false on a number of those attributes and we're in good shape there. That's the easy part. Now we had filled and outlined styles by default on there. Those basically match up with that primary and tertiary set of buttons that we saw in the design system. So we could just leave those because they're essentially what we're looking for already. If you wanted to make sure that the names were exact and be particular, you could unregister those two styles and then you could do what we're doing here. We are, instead of unregistering, we are registering a block style. So now in addition to those two we've got our tertiary style that would be available in that same spot. Not so fast. We've hit a rope block. We've got width settings and we've got border radius to worry about. This is going to be a good news, bad news situation. And I'm going to give you a screenshot, a couple screenshots of Gutenberg issue in GitHub. Ability to disable border radius and width controls. Yep, that's what we want to do. This issue was opened on January 21st, 2020. That was before the pandemic, which I think was a thousand years ago. And the very first line is most themes I build have a strict set of button styles. Yes, they do. What you can also see is that this issue is still open and then it's still active. So you're probably thinking, alright, well one of these has probably been fixed and one hasn't. And you would be right. So the problem is that the border radius is now, since that was opened, fixable. We can take care of that one. Bad news is the width settings issue still applies and that's why that issue is still open. So not a perfect situation here, but we just went through a handful of blocks and we went and narrowed those options down by quite a bit and made sure that like nothing is really going to go badly wrong when anyone goes in there to add content and update content on the site. You have arrived at your destination. We used PHP and JavaScript for a few things. We use theme.json for quite a lot of it. We've only scratched the surface of what theme.json can do. There is a lot that you can do with it. And a really good way to take a look at it is to pull up one of the core themes like 2022 and look at the theme.json file that's in there. You'll see a lot of different things that they're doing in there and you'll kind of get a good feel for what they're doing, why they're doing it, and how it works on the site. Older themes, really only an issue if you inherited a site or something with an older theme, but there can be problems with theme.json. Watch where you're going. The block editor is constantly evolving. It's changing as we saw since that issue was posted one of those problems got fixed already. So things do change, things do get deprecated, keep an eye out for that. And with that, I will tell you to please drive safely and thank you very much.