 All right, we're gonna do a quick re-intro. My name is Nick Diego from the developer relations team at WP Engine, contributor of the training team. Here we are, we are doing builder basics, demystifying theme.json and global styles. So if you're thinking you're in a different presentation, this is the one we're doing today. So one of the things I always like doing before beginning is giving you an understanding of the tools that I'm using so that in many ways you could replicate what we're doing here at home. So this is just a standard WordPress installation. I'm using the 2023 theme and I don't need to use this today, but I want to because I wanna showcase some cool functionality and kind of give you a look at what's coming in the future. We are gonna be using the Gutenberg plugin. So the Gutenberg plugin is where all the development for the editor takes place. It's where all the new fangled stuff for global styles theme.json take place. And so I like to use the Gutenberg plugin in these presentations because even if it's not exactly in core yet, this functionality will be coming to core in the future in 6.2 as we look ahead and it gives you kind of a sense of what's coming. And there's actually some cool features related to global styles that I think will be helpful today as we explore them. So what are global styles? Before we even talk about that theme.json file, global styles are styles that impact your entire site. Now there's one caveat that I don't wanna talk about today is to set as we talk today. And that is I'm gonna be using the 2023 theme and the 2023 theme is a block theme. I'm not gonna get too into the weeds about the difference between block themes and classic themes or hybrid themes or all the different types of themes. A block theme is entirely built out of blocks. It uses that theme.json file. And because everything is built out of blocks and you have a unified architecture blocks for the entire site, you have a unified way of styling them, hence global styles. So global styles, we can apply in a single interface styles to all block components on our website. Now global styles are managed from the editor or site editor. So when you activate 2023, you're gonna see this option for editor. It does say beta, it's still being worked on, beta will go away in 6.2. But when you click on the editor, you'll enter into the site editor. And this is what we're seeing here today. So hopefully you've seen the site editor before, but if not, I looked very similar to the standard block editor where you'd edit a poster page, but this allows us to edit our entire site. This does not pertain to global styles, but if you're new to the site editor, a quick look around, you click on the little site icon, you can see your homepage. You can see all the different templates that make up your site. We'll talk a little bit more about templates and template parts in a minute when we get to theme.json, but this is where you can edit pretty much your entire site. Of course, you're gonna add the posts, posts and pages and their own editor, but this is where you're gonna edit things like headers and footers. Now, one of the reasons why I wanted to use Gutenberg today is because there's a new functionality in Gutenberg that has colorized different sections of the editor experience. So when we look here and we open up our list view, you can see now that the header and the footer are purple and everything else is black. And the reason why, what purple means, purple means it is a block that is what we call synced. So on a website, you have a header on multiple different pages of your site. If I edit the header, here on the home and this in the site editor, I know that I'm editing that header everywhere else that exists on my website, similar for the footer. So little tiny, you know, just a color change, right? But it's a ways to help people understand how different blocks work throughout their entire site. Because it can get pretty confusing. Am I editing the page that I'm on? Am I editing the page that I'm on? Am I editing a piece of content that is on multiple different pages of my website? So this little colorization seems very simple, but it might be quite helpful, especially when you have tons of blocks on the page. So this is the site editor, a way for you to edit your entire site in the site editor. Now, let's talk about global styles. In this top right hand toolbar here, you're gonna see this option for styles. And when I click on this, it's gonna open up. This is the global styles panel. Now, when we look forward to 6.2, there's gonna probably be some changes about where this panel is located. As we talk about this, there's a ton of content jammed into this panel, perhaps not the best laid out. And so there's a lot of talks about how can we improve this, make it a little more user friendly. But this is where you're gonna go to edit global styles within WordPress. We're gonna talk about Theme.json in a second, but this is where you're gonna edit your global styles in WordPress. Now, one of the cool things is 2023 comes with a whole bunch of different style variations. We'll talk about how you make style variations when we talk about Theme.json. But when you click on this little global, this styles panel, you can click on your global styles, and you can see all the different style variations that come with 2023. Now, another reason why I wanted to use Google is because I wanted to use Google. Now, another reason why I wanted to use Gutenberg is this little pop-out functionality. It's kind of cool. And this is only in Gutenberg. You won't see this in 6.1. This is the beginnings of a bit more of a visual experience when you're editing styles, because before you could only see like the top part of the page. And now this little zoom out option allows us to see what our site look like more clearly as you click through all the different variations. Now, all these variations, let's take a look at Sherbert. I'm calling this one out because Brian Gardner's in the chat here. He actually designed this block variation. And so this variation, style variation, is just styles. There's no code changes to the layout. You can see everything here remains the same, all the titles, everything. We're just changing styles. We're changing those global styles using the style variation. Now, let's go back to the main default. Not only can you select from these style variations that are provided by the theme, as a user you can customize everything that you saw here. So I could recreate this Sherbert style variation myself using the global styles panel. I'm not gonna go through all that work, but you can. And to do that, let's go back to our default. You can do that by going to the typography, colors and layout sections. So if we click on typography, we can change the text, all the text, the default text for the entire site. We can change link color, fonts, sizes, all sorts of things like that. Headings, all the sizing for all the different headings on our site, including typography, appearance, letter spacing, all that. Buttons, we can set the default background and color for buttons. On top of that, we can set the default color palette. So for example, the default 2023 comes with, it's white, black, this lime green and some other colors. We can change those colors right from within this global styles panel. And we can do that now. So what if we take our white and we change this base color and we could change it to red? And you can see that the entire site, the background, this base color is now red. So the idea behind these global styles panel is that a user can install a thing that they like, come in here into the site editor and start making subtle design tweaks and style tweaks to make the site their own. And I'll reset that. But you can do that with everything. Now, these are global in the sense that it affects everything on your site. So here we're changing the entire color palette specifically for the whole site. However, you'll notice down here, there's the block section. This is every block on your website. So for example, in paragraph, click on paragraphs. Now I'm getting those options again. I can change the typography of paragraphs. I can change the colors of paragraphs and I can set the color palette for paragraphs. I can also set, you know, yeah, I can do, so this is, you can get crazy. So for example, I could set the default color for a paragraph and then any links inside of that paragraph. I could set that to be a different color. I could also set, you know, the background, the background of paragraph blocks all within this panel. Now you can see that it gets pretty deep, right? Not every user is going to be, you know, using the site editor. For one, the site editor is only restricted to administrator. So the only person that's gonna have access to this is somebody that has full control of their website. But the beauty of this is that it gives a user the ability if they have access to really configure and redesign their entire site without touching any lines of code. So anything that I changed here is called a user edit. So every, you know, the default coloring, all that kind of stuff was provided by the theme. Any changes that I make. So for example, if we go to paragraphs, we've got color, maybe we want the text to be blue. And you can see now down here, all my paragraphs are blue. This change is a user change. Me as a user is changing this on the site and it's stored as a user change. That's important because that allows me to always reset back to the defaults provided by the theme. Those defaults provided by the theme come from that theme.json file, which we'll talk about in a second. So you kind of have these two layers. You have your theme that's providing all the default styles. It's providing the style variations and all these different style variations that come in 2023. All this is being provided by the theme that come into this site editor. But with global styles and with the site editor, the user then can take those defaults and then make their own changes on top of them with user changes. So not only is the theme.json file powering the design of the theme, it also enables the user to then make direct changes to those default styles within the site editor. Now. Yep. There's been a question about somebody was confused on how to get to the style variations. And can you point out how to get to the template parts again? Just real quick. I'm going to go all the way back. I'm sorry, the template. Yep. I'm going to go all the way back to our main WordPress admin. So everything that we just talked about, you're going to go to Appearance and go to Editor. Now, when you're in the editor, it is a little bit hard to find the icon, the site icon for your site. Normally this will be the WordPress logo or if you have a designated site icon or site icon, it will be that. Click on that and it'll open up this sidebar. Now, that's something, it's a little bit hard to find, but it's something to commit to memory because this sidebar is in the future probably going to get larger. It's going to have more functionality in this sidebar. Right now we just have the default site. We can click on our templates and we can click on our template parts. Unless this is actually click into a template. So here I'm going to go to the single template, which will be for displaying a post. We can go in there and we can see that this is the template for a post within the 2023 theme. This is a, and you can look at the list view. So we got a header, some groups, our featured image, post title, so on and so forth. And then if we go over to our template parts, this is where we have the individual template parts that come with 2023, which are header, footer, comments and post meta. These are pieces of content that are used on multiple areas of your site and they're just containerized within template parts. Yeah, it is a little tricky to find over there, but whoops, I backed out by accident. But you can see how much real estate there is below here, all this big black bar. So there's some options there to add some more functionality that's currently missing. So this sidebar is going to become even more important as we move forward. Let's see, Sue's saying, I have one with the problem. I know how to get to the editor, I don't have style options. Okay, so the style options, so if you're in that site editor, so you go to appearance and then editor, the style options should be this little, what do you call it? Circle with a half black, half white. If you click on that, that will give you the styles panel. I would double check, Sue, try installing the 2023 theme like we have here and install Gutenberg, and then you should have what we see here. Depending on your theme, if you're using a classic theme, a theme that's not a block theme, you might not see this, that might be why. But you have styles and you're using 23 and Gutenberg. Interesting. Okay, well, maybe at the end, after the presentation, we can do some troubleshooting and help you get fixed there. I'm seeing, but not style options. Okay. Okay, so when you're in the styles panel and you click on browse styles, this will give you the different style variations to pick from. If you click on colors and typography, this is where you can start changing the different typography and color settings. It's a lot of nested menus. Okay, so you don't have browse styles. All right, so at the end, we can table this question and maybe we can dive deeper into that specific issue that's happening, but you should see browse styles and you should be able to see all of the different style variations that come with the theme. Okay, so let's talk about the theme.json file and the theme.json file powers everything we see here. So before we get into the code of it, think about how by default, we have this color palette. By default, we have typography. We have the different fonts that come with this theme. By default, let me go back here, we have these different font sizes, the small, medium, large, extra large. This is all set in theme.json. This is not just in WordPress. This is coming from theme.json in the theme. So there's further more layout is a good example. So layout, the width of the content. So for example here, the wide width of these blocks, so if we set this to 800, we can see as I change this, the width of the website is changing. These content widths are also something that is set in theme.json. So let's hop over there and we're gonna start to walk through how this file works. Now, what we're gonna be talking about today is basically in a bridged version of what is on this, oops, I sent that to the wrong thing, is an abridged version of what is on this link. So this link is the global styles and settings page in the developer resources. This has everything you'd wanna know about global styles and settings. It's a lot, especially if you're new to this stuff. So what we're gonna do is we're gonna take pieces of it and kind of walk through the broad strokes. But if you wanna know the real nitty-gritty details about global styles and settings and theme.json, this is the resource that you want to start at, or reference. All right, so what I'm gonna do is I'm gonna hop over to the folder for 2023 and you will find, when you open up that folder for 2023, you will find this theme.json file. What I'm gonna do is I'm gonna start by collapsing all the different sections to make it simpler. Theme.json is really built with, it's just a JSON file, which is just a different type of file, text file. And it's broken into a bunch of different sections. And the schema part and the version two, you can kind of ignore. If you're gonna create your own block theme or edit another theme, just ignore this. You wanna have version two, it's the latest version of theme.json and the schema is helpful as well. But these are basically copy and paste. You don't need to worry about those. But what we do wanna worry about are custom templates, settings, styles and template parts. Now, custom templates and template parts are, I don't wanna say they're less important, but we're gonna save those for the end. I wanna make sure that we have time to cover settings and styles and that afterwards we'll talk about templates and template parts. Over here in the site editor, you can see that we have this template part section and you can see that there's post meta comments, footer and header. And on templates, we have some additional templates like blog alternative, that sort of thing and blank. These are registered in Theme.json. So that blank template, that blog alternative, that 404, these are registered in Theme.json and you see all of our template parts here as well. We'll save that at the end and have a bit more of a detailed conversation there if we have time. But I really wanna talk about settings and styles because this is really the meat of Theme.json. So let's start with settings. So settings are, I'm gonna say collapses also so we can kinda see them all. Okay, perfect. So inside of settings 2023 has a couple of different sections. We have this first one that says appearance tools true. We have color, layout, spacing, typography and then this other variable that says use root padding where aligns, right? We'll talk about this one last. This is a little bit, well, it's a valuable tool but it's a little bit, the name of it's a little bit tricky. Let's start with something relatively simple and that's color. So in this color section, you can see the first part is palette. This is my color palette. You can see I say base contrast, primary, secondary and tertiary. Come back over here to our site editor. We go to colors. You can see we have base contrast, primary, secondary and tertiary. These colors, the hex code for these colors are provided here. So I could change this color palette and we could do that here. We can do this, change it to black, which is 0, 0, 0. Now there's one thing that I would want to point out when working with and modifying theme.json files. The site editor in order to improve performance has a small little caching mechanism which tries to cache theme.json values. So occasionally you'll be making edits to your theme.json file and you'll come over here to the site editor and you'll refresh. And sometimes the changes you make won't appear immediately. Generally when you're on a local environment, a local development environment, you're not gonna see that too much. But if it does happen, don't freak out. It's a known thing and there is some work to try and improve that. So we're gonna refresh now and we can see the background of the site is black. You might be wondering why is it black? All we do is change the color palette. Well, when you set your color palette here, it actually creates a variable that you can then use throughout your site and other blocks. So if we come over back over here to the global styles, you can see under colors, we have set the background to that base color. We don't care what the color is, but we've set it to base. And because we've set it to base, we changed base to black and now everything that was set to base is now black. So this idea of variables is permeates through theme.json. In our settings, we're actually setting presets. So we don't really care, we do care. We care what the value for base is, but we care more about the fact that we're creating this variable for color base. That base color can change in the future. We can actually change it here. So if I'm a user, I could come in here to base. So actually we can go back to our color palette here. So I can make a user change. I could change it to salmon or whatever. And you can see that now everything that was set to base is now changing because it was first set to black theme.json. Then as a user, I came in here and I changed it to salmon and now everything changes. I reset this and we'll turn this back to white. So this color palette that you're setting inside of theme.json is your preset, preset color palette for your entire site. Now this appearance tools line is incredibly powerful and important. And it's actually making this theme.json file look even simpler than it technically is. So one of the things that developers found and the builders of the site editor found is that if you're building a block theme, a lot of times you're gonna wanna have the same functionality over and over again. So for example, I always wanna allow users to edit color. I want them to be able to add border and add margin and add padding and that sort of thing. Appearance tools, and we can come back over to our master sheet here. Look at appearance tools. You can see that when the, let me zoom in a little bit. When the appearance tools property is set to true, it's gonna automatically enable borders, border, spacing, typography and color links. It basically is a shortcut. So whenever you see appearance tools in a theme.json file, it basically means a shortcut that's auto enabling the theme to support all these things that otherwise you would have to specify individually. I would need to have a section that said border. And then I need to say radius, true, color, true. But you can see what I'm doing here. I am setting, again, we're in the setting section. So not only have we set the color palette, we can also set settings related to functionality within the editor. So here I have appearance tools opted into true, but what that's doing under the hood is this opting me into border radius, border color, so on and so forth. But this is really powerful because say for example, you're building a site for a customer and you don't want that customer to have access to start messing with the border in the border control. So if we come over here to the editor, we can see, let me give it a little refresh. We can see that if we go to, for example, oh, I don't know, how about this column, you can see over here all the border controls. If we don't want to give users access to these border controls, I can come up here and I can say, I don't want to give them border, border radius control. I don't want to give them border color control. And you can specify all these settings and turn this functionality off inside of the editor. So when we're talking about that setting section, the theme.json, not only are we adding things like the color palette and we'll talk about typography in a second, we're also setting settings that enable or disable certain functionality inside of the editor. Now, let me take, I see some questions, so let me see here. My theme isn't changing the new codes I've added, how do I fix that site refresher, clear cache? When you say new code, Sarah, do you mean like the color, the hex codes for the color on a color palette? You can follow up there. So in a production site, usually the cache I believe is a minute. Okay, so let me ask you a quick question. Are you changing the color palette? Are you changing the color palette in a style variation? If you don't know what that is, just answer no. If you're changing it in the core, the main theme.json file, the theme, then it's likely a caching file. Sorry, a caching issue. So one of the things I like doing is opening up like an incognito window in your browser and try to load the page that way and give it a couple of refreshes. Usually, I believe the caching period is a minute. So after that minute and theory, those changes should come through. So Nick, in theory, using the front end where the style palette is, testing out different color variations, once you lock into a set of colors for your client or for yourself, then go into the theme.json and change those colors. Is that correct? That would be the best way. So that's actually a great question. So when it comes to designing for building with full site editing and the site editor, that's exactly the path I usually do. I usually just hop into the editor, start playing around with changes, maybe changing the typography, the sizing, really start messing with things. And then when I'm happy, take those changes back. If you're gonna ship something to a client, like ship a completed theme or distributed theme, then take those changes back to the theme.json file. You can, of course, as you're developing, you make the modifications in theme.json. That works too. But if you want this more visual experience, build in the editor. I mean, that's what it's there for. And that's what I do all the time. So one of the things that, so you can do a lot inside of the style's panel in the site editor, but not everything inside of, that's available in theme.json is exposed inside of the global styles panel. So for example, if we go to text here, and we see that there's these sizes, small, medium, large, extra large, I can change the, I can change small, medium, large, extra large, and you can see how the text is changing here. But I can't change what the values are for. What does small mean? What does medium mean? What does large mean? That is where you're going to need to make edits inside of that theme.json file. So let's hop back over here. And I'm going to get rid of this border section because it's not what we need. That collapse color. So if we come down here to typography, we can see that we have a whole lot of stuff in here. One of them is font sizes. So if we click on open font sizes, you can see that I have small, medium, large, extra large, and extra, extra large. This is where much like you define your color palette, you can define the sizes, the different typography sizes that are available in the typography settings panel, or in the editor panel. Now, one of the interesting things in 2023 is that it actually utilizes what we call fluid typography. And you can see that by the specification here. Now, we could have an entire workshop on fluid typography and fluid spacing, and there might actually be one in the future. So we're not going to go too deep into how fluid typography and stuff works, but you can do fluid typography now on theme.json, which is pretty cool. This happened in 6.1 in fluid typography, just so we can take a look. As I make my screen smaller, pay close attention to this header. You'll see that it gets smaller, not too much smaller, but it does get a little bit smaller as we were on mobile devices. That's what fluid typography allows you to do. But long story short, the typography settings for the sizing, again, all set in that theme.json file. We can also set the font families. So the font families that you see when you click on, for example, this header when we go to font family, these fonts that are available inside of the theme, those are actually provided through theme.json. So all of these different fonts you see here, those are coming from theme.json, which we see here. We can see font face. Let me make these a little bit smaller. And again, we can have an entire workshop on working with fonts inside of WordPress. So I'm not gonna get too deep into that, but here you can see all the different fonts that are provided by the theme. And those are what are coming into your global styles panel. Okay, so I'll dive a little bit into fonts for a second. So to add a new family font to, for example, 2023, let me just explain how 2023 does it. You could do it in different ways. This is how 2023 does it. Let's take this DM Sans font. We've defined in our font family section, we've defined the slug, the name of the font, the name for the font family that as it would appear in CSS. And then under font face, we have all the different types that are there. We have normal italics, all the different fonts for bold and whatnot. But you'll notice here that there's this URL. 2023 has prepackaged all the fonts with the theme itself. So for example, if we go over to the assets folder, you'll see that there's a folder for fonts and you can see all the different fonts that are provided by the theme are in that folder. And the links to the files for the individual font formats are there as well. So 2023 packages all of its fonts with the theme. There is a project for the web fonts API that would allow you to fetch fonts from other places. That's not currently in WordPress right now. But if you were to build a block theme and you wanted to serve a specific fonts or set of fonts, I would currently take this approach where you're prepackaging your fonts with your theme. So when a user gets your theme, they have the fonts with it and everything. There have been some issues around the world like in Germany, I believe it is, where people pinging Google for Google fonts causes some issues around privacy. This is a way to ensure you're 100% secure. You have all the theme comes with the fonts and those fonts are being served directly from the theme. So the key here about the way that the fonts are in queue, the font will only be loaded if you're using it. So that's, so there is a performance concern if you have a thousand fonts, right? But if the font, you know, so it's only being, the font file is only being in queue if you're using it. So it's maybe not perfect, but it's, because your sphere theme folder still has all those font files in it, but that's what we got today. And most themes, unless you're providing a theme where you're giving people like 1,000 fonts to pick from, most themes are like 20, 20, 30, you're just gonna have a handful to pick from. Okay, so but that is, I mean, regardless of the, if the approach is the best when it comes to managing fonts, that is how you will manage fonts nthin.json. And let's go back over here. And so, and you can, for more details, you can really dive into the page here and it will tell you how to register the different font faces and how to do all that sort of stuff. Okay, so there's a couple other settings. And again, I'm not gonna go into all of them, but here you can see that 2023 has opted into fluid typography drop cap. So this was something that you saw a lot in early editor where you could enable a drop cap at the beginning of a paragraph. This theme is opted out of that. So you can set that to false. The last thing I'm gonna talk about within this section is layout and spacing. Layout, like I showed you before, was the definition of the content size and the wide size on your website. So if we come back over here, again, every time you are on a block and you see the align none or align wide, those values at 650 and the 1200, that's coming from theme.json. That's coming from this value you see here. Now this setting, of course, you can override within the site editor. So we can go to layout and I can change that content size and width right here. But that's coming from that setting section in theme.json and then finally spacing. So this one is kind of complicated. This just came out with WordPress 6.1. Normally in the past, when you wanted to change the sizing. So if we were on this block, for example, we wanted to change the margin on this heading, right? You would be a free form box like this where you type in a value and you can use the slider. In 2023 and in WordPress 6.1, the introduction of stepped spacing came about. And the benefit of this is that users, instead of having to remember an exact pixel value or a percentage value, they can just choose from the slider. These settings are also set in theme.json. And again, I'm not gonna get too deep into it. You can do a lot of cool stuff like fluid spacing, all sorts of interesting things. But this is also set in the preset section of the, in the setting section of theme.json. Okay, back to his working creating theme. All right, question here. There's been a conversation about the whole, that I had brought up the question initially about changing the colors on the front end first in the styles, and then taking what you liked and putting it into the theme.json, pretty much you're making your own new theme. And then using the create block theme plugin, you can create the files for that so that you can upload it to your client's website and stuff like that. Yeah, again, that would be a good whole topic for a workshop, but- I know, that's another whole workshop. There's too many ideas here. But I do wanna point out, even if you're not using the create block plugin, which fantastic plugin, go check that out. You can export the changes that you've made to your theme, both the templates and styles. So instead of trying to remember, oh, what did I change? You can just export this and this will only give you the changes you've made to your templates, but it will give you a theme.json file with all your changes in it. So yes, go check out the create block plugin, but you can also export even in just WordPress the template files and the style sheet with your edits, with your user edits. So that's a good one. And is there any issue when there's updates to, is there any kind of update that happens to theme.json or is that separate and it doesn't get updated by the different versions, the six point ones? Okay, so if, well, theme.json will probably over time add more functionality, but the general structure is pretty locked in stone. So you might see more functionality, but it's not gonna break things that are already there. I mean, there's a strong commitment to backward compatibility. This is a new feature that's gonna be kind of a building block of WordPress as we move forward. So there'll be a very strong commitment to ensuring anything that works in theme.json today will work in the future or some sort of aggressive enhancement to well be able to be taking place. But when it comes, you mentioned something about updating, right? I do wanna make it very clear that if I make changes to, for example, the 2023 theme and you customize your 2023 theme, the theme.json file, it's still the 2023 theme. And so if you get an update WordPress, and it's an update for 2023, and you update 2023, all your changes will be overwritten. So just be aware of that as with any theme changes. If you change the theme files and then the source does a new version, those changes will be overwritten. So the best thing to do, rename the folder file and rename the style sheet so that you have your, you know, you've locked your changes in stone and they'll cannot be written by WordPress or some other theme distribution channel. Yeah, you can definitely copy 2023. What I would do is copy 2023, rename the theme, rename the folder and you're good to go. Then you have your own copy of 2023 and nothing can happen to it. Okay, so we are 43 minutes into this conversation. We haven't talked about styles yet actually. So again, you can talk for five hours in theme.json. What we've talked about so far is settings. So those are the kind of the presets and the functionality that's available with inside of the editor. The whole other section is for styles. This is where things get, I would argue fun. Some people may not argue that, but here you can see how we have a couple of different sections. I'm gonna talk about blocks last, but I wanna start by talking about color. Color is where you define that background and the text color of your site. So remember when I said I changed that base color inside of the color palette? Here you can see that background, color background of my site is set to variable WP preset color base. This is a unique way that WordPress creates variables based on your presets that you set in your settings section at theme.json. And here you can see that that variable is being assigned to background and the contrast color is being assigned to text. So no matter what a user changes that base or content trust to, the background and text will change accordingly. You could set this to a solid value, but you're not getting the benefits of the variables. This document here provides a really good overview about how the variables work. Try to find it. I don't wanna bother you with scrolling, but there's a good overview of how the variables are created and how they work in that document, but that's what you're seeing here. Inside of settings, I have my color. I've defined my preset, my base color. WordPress is creating a variable for that. And now we're using that variable to power the background color and the text color. We're gonna use contrast for that, but we're using those variables to power that inside of the style section. And you're gonna see that a lot and it's really helpful because now that you have this variable tied to base, you can use that variable in different contexts. You can use it in custom CSS. And then whenever a user changes their base color, everywhere that variable exists, we'll get updated with whatever the user chose for that base color. It allows you to take the style set by the users in a global context and then move it around your website by a variable as opposed to a hard-coded hex code value. Now inside of spacing, this is where we're gonna set things like the padding around the site, the edges of the site and also block gap. Now I've done previous presentations on what layout is and what block gap is. So again, whole another topic, but this is where you're gonna set block gap. And this is the default value that is between blocks, the space between blocks. And that's what we're seeing here under the spacing and spacing section. Then we have typography. And this is where you're gonna set the default font family, the default font size and the default line height among others for typography. And again, you're seeing these variables. These variables are very important. In the settings section, I set a font family and a default font family. That's what's giving me this value here, WP preset font family system font that is coming automatically from what we set here inside of typography. So this value here, these values are coming from the font families that I've created. And similarly with the font sizes. Elements also, lots of stuff inside of elements. This is where you can set things like your buttons. You can set stuff like your H1 tags, H2 tags. This is where you can set the default font size and default line height for all the different heading sizes, default headings, links, all those sort of stuff. And you may be thinking to yourself, this looks like an abstraction of CSS, right? If you're built websites in the past, and it exactly is, it's an abstraction of CSS in a different format. You might be wondering, well, why are we doing this instead of writing CSS? The benefit of this is that all these values go into the editor. They're the defaults in the editor and they power the editor, which then user can then change. So if you were to custom CSS value defining a button or something like that, a user can't change that unless they write custom CSS code. The idea behind this is that all of this functionality is powering the editor which then empowers the user to then go make those changes that they want and modify them to meet their needs. The last piece I want to talk about here is blocks because this is where we really get into the abstraction of CSS conversation. So inside of 2023, and I encourage you to peruse this after the talk today, you can see all these different blocks. Now, we're using the block slug. So for example, the block slug for the buttons block is core slash buttons, but you could define this for even third party blocks. So if you were using third party blocks on your site that supported typography and color and that sort of thing, you could also define them in Team Bad Jason. So let's take a quick look at how about the posts? How about the post title block? So we can see here that the post title block, which is what we have here. This is the, I think this is a post title. Oh, that's a header. This is a post title. Okay, this is our post title block. So in our post title block, we have set some defaults. So for spacing, we've set some default spacing for margin. Under typography, we've set a default font weight. And under elements, we've set a whole bunch of different default settings for links. So one of the cool things, again, this is relatively new inside of Team Bad Jason is the ability to support things like hover states and focus states and active states. Now, hover focus and active, while they can be done in Team Bad Jason, aren't currently available inside of the user interface. There's no ability here for me to set the hover state for links inside of the UI for color. So something to my point before how you can do a lot inside of the editor, but you still need to do quite a bit in Team Bad Jason. That's not quite exposed in user interface, but this is where we're setting all that. So what does this say? This says whenever I have a post title block, by default, I want the margin top and bottom to be 1.25 rem. I want the typography, the font weight to be 400. And whenever that heading, that post title block is turned into a link, I want the hover state to be underlined. I want the focus state to be underlined dashed. And I want the active state to have a specific color and a specific typography, specific text decoration, and the typography to have text decoration none. So this is, again, an abstraction of CSS, all built within the structure of the editor and the controls that are available within the editor. That was a lot. And so we only have 10 minutes left. Is there a certain areas of this? And again, I've really to start with the tip of the iceberg really when it comes to Team Bad Jason, but hopefully the general structure kind of makes sense. We have settings, which are the presets kind of the configuration of the editor. And then styles are basically that abstraction of CSS. We're applying the different controls within the editor to blocks themselves. How will Team Bad Jason impact performance? I am not aware of any performance conversation, positive or negative. So the way, well, actually, I can actually rephrase that. So imagine a classic theme where you have that massive style sheet. I've looked at some, I remember themes in the past that have this massive 800 line style sheet. Whenever you load a page on your site, you're getting the entire style sheet, because it's the style sheet for the entire site. The difference between the way styles are handled with a block theme is that styles are only rendered when you need them. So for example, if I have a page that doesn't have any buttons, the styling that is associated with this will not be present on the page. So there's a lot of optimization around how styles are served, when the blocks exist, and you need the styles that go with them. And that's one of the benefits of having this consistent architecture around blocks, because before you had all sorts of different types of content on the site. But now when we're only working with blocks, we're not using the block for buttons on this page. I don't need any of the stuff that comes with it. So there are performance gains there, especially around conditional styles and that sort of thing. The other burning question has always been that came up was, do you create a child theme? Child themes do work with block themes. And so one of the cool things is that you could have a child theme that is literally just an empty style sheet and a theme that Jason found. So for imagine a situation where I have 2023, and I just want to change the color palette. I can create a child theme of 2023 with just the, a different color palette. And now you have a child theme with a child of 2023 with a different color palette. And thank you for asking that question because that actually gets us to style variations. So we're over here when we change our style variations to all the different styles. These are not child themes, but you can think of them sort of like child themes in many different ways, right? This is just 2023 with some typography changes in different colors, right? A lot of times that's really all you want when it comes to a child theme. So one of the things about style variations is that there's a separate folder called styles. And here you can see all the different style files. For those, for those styles. And you'll notice that they're all JSON files. So if you click into them, look at, so here's Sherbert, here's our theme.JSON file, right? It's just a theme.JSON file. So style variations are not child themes because they don't, you know, have their own folder, don't have their own style that CSS file to have the header that has all the information around the theme itself. But all they are, all these style variations are, are just a simplified theme.JSON file. You can see here there's some duo tone, there's some gradients, some color palette. We got some font size changes. They're just modifications to the base theme. Here they're served as style variations, but you can very easily pull one of these out and turn it into a child theme very easily. So yeah, absolutely you can build child themes on block themes, from block themes. And it's actually pretty, it's actually kind of elegant in many ways because if all you want to do is change color, change some of those settings, change, you know, you can just use, it basically is just a theme.JSON file with your style sheet and you're good to go. Sarah had a question if you want to scroll back about key codes that aren't currently available to users and can only be set in this site editor. What do you mean by key codes? That's what I was wondering too. Oh, some things that can't be turned on. So when you give it to the person, your client and you, you want to turn off certain functionality for them. So that they can't change it. So, so two ways to answer that question, I think. The, there's certain functionality in theme.JSON is not available inside of the site editor. We talked about hover and focus states. Hopefully that will be in the future. But there's an actually a presentation. I'm going to see if I can find it. There's an entire presentation I do. I'll call it curating the editor experience. And we can actually, let me see if I can find the article on this right now while we're talking. Controlling different areas of functionality for users, for customers is a big topic of concern, especially for those that build websites for others. And there's many ways and we didn't even talk about them. So I can allude to it here. I hopefully I'm not confusing people. But see here, we have the block section of styles. You can define a block section. Of the settings. These collapses. So I could define a block section inside of settings. And I could turn off border, turn off color. So for example, like if I wanted to have color available. Site wide, but there are certain blocks where I did not want to have color available. Take buttons. For example, maybe you have a very specific style guide provided by your client. They want buttons to look like this. And when they're kind of, when their employees are adding buttons and content to the site, they don't want them to change the color of the buttons. They don't want them to change the border. You can turn all of that off at the block level. Inside of settings. And not only does this article tell you how to do that. Let me see if I can find this. Yeah. Curating the editor experience. This is a fantastic article. If you want to learn about how to lock down different functionality within the editor. And as we progress with new and new functionality and WordPress, this article keeps getting longer with the more things that you can do. But there's all sorts of cool stuff like block locking and template locking. This gets a little bit more developery, but you can even do things in PHP where you completely restrict functionality. So if you want to learn about how to lock down different functions, you can do things in PHP where you completely restrict functionality specific user roles. All sorts of cool stuff. So I always keep an eye on this article, especially because it's kind of in progress. Anything new will get added there. But you'll see here. I'm see. Okay, here we go. There's a conversation around how at the block level, you could set for post featured image. You could set a specific color palette just for featured images. So there's a lot of customization that you can do inside of theme.json. All right. Any other burning questions people have? I apologize a little bit because this topic is quite broad. So in the future, I think that we'll have dedicated conversations around maybe specific features. For example, fluid typography and fluid spacing, things that, you know, a specific area of theme.json. But hopefully this gave you maybe a very broad overview of what theme.json is and specifically the fact that theme.json file is powering what we see here in the site editor. Yes, there is a workshop on curating the block editor. It is on WordPress.TV. So if you go to WordPress.TV and just search curating the block, curating the editor experience, you should find the recording of that there. Do we have time to go back to Sue Kearney and look at where her browser styles are? Yes. I'm going to do one thing real quick and I'm going to disable Goodenburg really quick. Just curious about something here. Okay. I think I know why. Oh, no, it is there. Okay. I was wondering if you had just had to click on the icon. So one of the interesting things is if I refresh this, you'll notice that block styles takes a second to load. See it's not there and then it loads. I wonder if there's like a loading issue. Sue, on the page, if you right click and do inspect, are you seeing any console errors? So you got a console. You'll see if you are seeing errors, you'll see a bunch of red. Okay. How about this? I'm going to close out the workshop, but stay on Sue and I'll let you unmute and we can, we can talk about that. But anyway, thank you everybody for attending today. You missed a fine. Global styles and think that Jason, hopefully I did something mystifying and didn't confuse you anymore, but there will be more workshops in the future. Of course, there's tons of great workshops by other contributors here on the online workshops done by the training team, but I don't have any more workshops currently planned. They'll be more in the new year, but thank you everybody for attending all the builder basic sessions. And thank you Laura for co-piloting us today and reminding me to record the last minute. So thank you everybody and hope you have a great holiday. Hope great holidays and see you in the new year.