 Okay, we are recording, we are live. Welcome to everybody who is joining at the moment. As you're getting yourselves ready while we wait for other folks to join. If you haven't, if you want to, please start getting your WordPress environment ready if you'd like to. We're gonna go through the process of installing the plugins that we're going to use today as well. So you don't have to do it now, but if you'd like to, you can go ahead. We're using create block theme today and SQL buddy. You don't have to use SQL buddy if you have a different way of accessing your database locally. It's just a handy plugin internally to WordPress. So I'm gonna use that today. And while folks are joining, I'll introduce myself. My name is Jonathan. I am from Cape Town in South Africa. I used to write code for a living. Now I hopefully teach others how to write code for a living. And I'm a sponsored contributor to Automatic. We work with the training team. So we create these online workshops. We create tutorials. We create courses on learn.wordpress.org. If you'd like to follow me on Twitter, my Twitter details are at the bottom there. And I'm just going to turn the noise on my phone off so it doesn't bother us. And while you're joining the chat, please do let us know where you're joining us from. It's always interesting to see where folks are from around the world. I know Catherine is from Canada and there are some familiar places coming in. So some of you I really know where you're from. But do let us know where you're joining us from. Live from New York City. This is Saturday night. As a South African, I've only ever seen that on YouTube. Abby Katz and I are joining from Anaheim, California. Oh wow, only one of us is drinking coffee. Well done. I don't know how you can start in the early morning without coffee. I will gladly admit to my coffee addiction. Eagle is in Santa Cruz. Jill is in Arvada, Colorado. Felicia is in New York. Andy is in Portsmouth. Eagle says definitely drinking coffee, yes, 100%. One of my favorite made up stats is that drinking coffee, something like drinking coffee has a 70% chance of like not getting other people or something along those lines. I can't remember the exact words. Jean is from Sussex County, New Jersey. Welcome back, Jean. See some familiar faces there. There's Yee, I recognize. Eagle, I recognize. Adrienne, I recognize. Awesome. Felicia, I think I've seen before. Hi, Linda. Welcome, Robin from Toronto. Carl from Belgium, welcome. Awesome. Okay, so we'll let, we'll go to a few, I promise to behave today. No, Linda, not a problem at all. No need to behave, it's all good. For those of you wondering, Linda was in my live stream the other day and asking all kinds of interesting questions and it was good. It's always good to interact with folks. Okay, so I'm gonna give a few moments to let people join, but while folks are joining, we're gonna be talking about global styles today, global styles variations. The English speaker in me struggles with calling them global styles variation. In my brain, it should be global style variations. And I'll explain why I refer to them as global styles variations in a second, but I'm sure both are right. I don't think there's a right or wrong way, but that's what we're gonna be diving into today. Few announcements before we get started. Again, welcome and thank you everybody for joining. Thank you, Catherine, for co-hosting with me today. Some of you will recognize Catherine's friendly face there. As always, we are presenting in focus mode, but I would like to ask you to consider enabling your video, if not your audio. I realized that we enable focus mode in these sessions by default and that means everybody joins with their video in the audio off, which means I never get to see anybody's faces. So I have no idea what folks look like. So if you don't have to enable your video, you're welcome to leave it disabled if you would like to, but if please consider enabling it and then I can get to see what folks look like and get to start putting faces with names and then I can recognize you when you follow me on Twitter or you interact with me on Twitch. And it's always fun to see folks. So welcome everybody. Awesome. Then as always, you're welcome to ask questions. You're welcome to ask questions in the chat or verbally if you'd like to unmute and ask questions. The only request that I do have as always is if your question is not specifically related to what we're talking about at the moment in time, please hold that for any of the pauses that I do insert into the session. But if it is related and specifically if I'm going too fast or if you need to see the code on the screen to catch up or anything like that, please just do shut up or raise your hand visually if you've got your camera on or use the raised hand gesture in Zoom. And then we will stop and let you ask your question. Okay. Cool. Then some new announcements. The learn the training team, which is the contributor team, the volunteer team and some paid volunteers, including myself and others who work on learn.wordpress.org have put together an individual learner server. And so what we're trying to do is we're trying to discover what folks are looking for on the learn.wordpress.org platform. So if you've never been to learn.wordpress.org before, I highly recommend going and checking it out and you'll see all the online workshops listed there. There's a calendar, there's a Google calendar that you can add or I call all those things. There's all the tutorials that we put together. There's all the courses. And if you're using those resources, we'd love to hear what's working for you, what's not working for you, what you'd like to see from learn.wordpress. So please do consider completing the survey. As far as I know, the data is all anonymized. So there are no GDPR concerns if you're from Europe. There was actually a stage where we were using one tool and there was some concerns around anonymizing the data. So we switched to another tool. So now we're using that tool. So either during the session, if you would like or afterwards, please do consider going and taking that survey. Then as I mentioned earlier, if you wanna follow along with me today, the two plugins we're gonna be using are the create block theme plugin and SQL buddy plugin. You can either get them from the downloads in the slide or just through your plugins, add new search capabilities inside WordPress. You don't need SQL buddy if you have a different way of accessing your database. So if you're using something like PHP My Admin or if you're using local, I think it comes with a DV minor installed or something. But if you don't have a way of accessing your database, SQL buddy will be handy to get into that information. And as always, if I'm going too fast, please do let me know. I do tend to speed up as I get more coffee or more excited. And then finally, as always, I will be posting the session to WordPress TV afterwards. And I've already mentioned learn WordPress so we can leave that last point. Okay. Linda says the voice is cutting up. Is anybody else experiencing sound issues? If anybody is using sound issues, please let me know. Okay, no sound issues, Linda. So it might be on your side, maybe just check your audio, check your headset speakers or anything like that. Let me know. Linda mentions I use the fresh clean 2022 theme in a practice session. I'm going to be doing exactly the same thing again today. So I'm going to be using create block theme for that. So we're going to go through that process. Okay. So the learning outcomes today, the goals are to learn what a global styles variation is, how they work, how to create one in the site editor. And then once you've created it, it's hard to export and create the variation file that you need to ship it with your theme. We're going to look at doing it manually, which is painful. And then we're going to look at using create block theme, which is way less painful than my recommended path. So that's our goal for today. Our objectives, I always like to list the objectives more for myself so I can remember what I'm planning on presenting. We're going to create a brand new theme using create block theme. So if you don't have it installed and you want to work along with me, please do install it. We're going to create a simple style variation. So we're just going to change the font and some colors to what the blank theme has. And then we're going to save it manually. And I'm going to show you how that all works with trying to save that manually. And then, sorry. And then we're going to create a slightly more complex style variation. So we're going to change the content size and the wide size. And the reason I've picked those is because they are affected in the settings, not just in the styles. We're also going to add and apply an external font. And I'll share a funny story with fonts and create block theme later on in the session. And then we'll do a whole bunch of different colors as well. And the other thing we're going to do is also... No, we don't need to do that yet. I didn't need to make that note for myself. Okay. So that's our goal for today. We'll have a little bit of introduction before we get started. Before we get going, does anybody have any questions about everything we're going to cover while I sip of coffee and otherwise we'll get started. Okay, we seem to be good to go. I'm in that weird time of year where it's sort of halfway through spring. So it's not warm enough to take my sweater off, but it's not cold enough for me to leave it on while I'm presenting. So I'm going to be rolling up my sleeves and moving around a lot. So I apologize in advance. I may get to a point where, because as I talk, I also I'm moving a lot and I'm getting excited and I warm up. I may actually take my headphones off and take my sweater off at some point. So please forgive me if I have to do that while I'm doing one of the breaks. Okay, let's talk about global styles variations. So global styles variations were introduced in WordPress 6.0. This is the blog post where they were introduced. I'm going to pop that open quickly. And basically they are a way that you can create different styles and settings for your block theme. So if you haven't seen what a theme JSON file is yet, I have covered them in previous sessions, but we'll cover them in a minute. Basically the theme JSON file is the file that handles any theme settings and any theme styles. And then what you can do is you can create additional variations of that file called global styles variations and store them in a specific folder called styles. And then the users of that theme can apply those styles in the editor. And what I like about this is this is a great way to ship a theme that has some base functionality, but that has different variations depending on either the client or the user. So you could have a style that is very sort of formal and corporate. And then you could have another style that is very sort of flexible and relaxed. And then depending on your environment, you could apply those styles. So as I mentioned here, global styles variations allow theme developers to create multiples different styles for their themes. And they use exactly the same JSON format as theme JSON. So I've linked through to the block editor handbook on how theme JSON works. We're not gonna dive too deep in it today. We have covered it in previous sessions. I can actually, let's go over to WordPress.tv here. I didn't add this to my slides. We'll add these afterwards. But if you just do a search, a search for theme JSON on WordPress.tv then you will see there are a couple of sessions there. There's one that I did diving into theme JSON. There's one that Sarah discussed about theme JSON. There was a code with me session that we did where we covered some theme JSON things. Rich Table spoke about theme JSON and the interplay of blocks, patterns and theme JSON. So there's a lot of content out there that you can go and watch really if you need to understand how theme JSON works and what it can do. We're not gonna go into it deeply today but I will cover the basics when we get there. Okay, let me get back to my slides. Then the other link that I like to share with folks as well is this one. So the first one is the theme JSON sort of handbook doc. So it's in the block editor handbook. It's the global settings and styles in brackets theme JSON and it dives into how it works and what it does and all kinds of things. Then that links to this v2 document which is this one over here and I'm gonna scroll down to that part in a second. But this is basically a living document in other words, folks updating and adding to this all the time. And this covers how it works, what it can do, how to set your settings, how to set your styles and all those kinds of things. So I do recommend reading up on theme JSON and how it works if you're not sure yourself. We're gonna briefly cover it in a second but I'm not gonna go into too much detail in how that works. Okay, so let me show you what a global style variation looks like. So I'm gonna go into my WordPress sites and in my list of themes I've got the 2022 theme activated in store. That's the most recent default theme that shipped with I think version 5.8 or something. I can't remember exactly when. But if I go into, if I have 2022 enabled and if you'd like to enable it yourself on your site now you're more than welcome to and then go into the site editor by going to where was that there was an appearance and then click on the editor button. It takes you to the site editor and the important button is this little, I don't know what you would call it. It's a little circle with a black and a white side almost kind of reminds me of the yin yang symbol in Chinese sort of mythology but that one's more curvy with dots but it's the global styles interface that enables when you click on that. So when you click on that, it opens up and if it's the first time you've installed WordPress it'll actually give you a little wizard, a little walkthrough and it kind of gives you some basic introduction not too much detail but it kind of tells you what you can do and how you could personalize things. So it sits here on the left hand side if you have it open, if I click on this button it closes it again or I can click on the little cross on the right hand side there but basically this allows me to change topography, change colors, change layout and change the appearance of blocks but just above the topography section is a browse styles option and if I click on that that opens up the variations of styles that are added to this theme already. So you will see that this theme has four different styles. It has the default style which is basically the theme JSON file, the default style for this theme and then there's another one called blue, very creative, another one called pink also very creative and another one called Swiss and if I click on any one of these styles you will see in the editor everything changes. So fonts change, if you look there the font to the head it looks like that and if I click on there it's different font the background of the image has changed the font sizes have changed all kinds of things have changed. If I click on pink for example, it changes again and so what this is is a whole bunch of different styles for all of the different elements, templates whatever you might have in your theme. Your users can then apply this and then they will get a certain look and feel and so this is a great way to ship one theme with a few variations. Now in the next default theme which is called 2023 which I can't show you on my current site because it doesn't work with version 603 yet it's going to be shipped with 6.1. They are shipping 2023 with I think 16 different patterns. 2023 is going to be the first time that WordPress theme community ships a theme where it's just a base theme and then all the extra functionality and styling everything is happening in patterns. So it's quite exciting. So if you have a way of Robin says I'm seeing a zoomed out view in browse styles. So is that when you click on here editor and you go browse styles are you seeing a zoomed out view in this window or in the main editor window? The main editor window. And you're using 2022 theme. That's interesting. I'm not sure any reason why that would happen. I've never seen that before so unfortunately I'm not going to be able to help you with that one but when we work through the block theme that we created in a second tell me if it happens again because if it doesn't happen again then maybe there's a problem with your version of 2022. If it does happen again there might be some problem with your WordPress install or your browser that you might need to look at. So let's go through that and let's see what happens. Cool. Let me go back a step and get onto here. All right. So we've looked at what style variations are. We've looked at how they work to the user. Now let's look at how they work for ourselves as theme developers. So I'm going to go back into my local site and I'm going to exit out of the site editor. And now I'm going to go into create block theme. First I'm going to just move the window out the way there. So if you haven't got create block theme installed already I've got my installed already but the quick and easy way to do this to go into your plugins click on add new and then in the add plugins window on the top right is the search plugins option and you can just go create block theme search for it there and it should be the first result that comes up. There it is over there. It's developed by a bunch of WordPress or contributors. A number of them are part of the themes team and automatic the company that I work for and others are part of other companies that work in theme environment. And this is going to be something that is going to be improved upon over time because you can kind of almost think about this as sort of the Gutenberg of block theming. They're going to use create block theme to kind of experiment with new features new developer focus features. Things like creating blank themes things like exporting things like cloning creating child themes, managing funds which we'll do in a second. And this is going to be the place where things are added to and then it'll either be a question around well maybe we could move this feature to call or we just leave this feature in create block theme. Now, one of the sort of I can't think of the right word one of the things that the WordPress project is always kind of focused on is this idea of decisions not options. And also this idea of what goes into core shouldn't really be developer focused it should be more user focused. So there will be a lot of things that will end up staying in create block theme which is not a bad thing because you don't want to be sort of adding bloats to WordPress that most of the users aren't going to use and only developers will use. So it's going to be a collection of developer friendly features which is why I love it. And as the folks that are building on it and work with it they're going to be adding more and more features. M says is create block theme plugins similar to a preview of upcoming features like the gluten book plugin. I wouldn't say it's similar to a preview. It's more a case of if we think about being theme developers what are the things that we need to make easier to make better or automate? So one good example is the whole idea of adding fonts to your theme. At the moment, if you want to add a font to your block theme you have to download the font manually you have to enable it in your theme adjacent file and make sure everything is set up correctly. But one of the things to create block theme does now as of literally yesterday they updated it yesterday with this feature which was very cool for me because I was planning on using it. And you can ask Catherine I had a whole beta version of this plugin based on a branch of the code that hadn't been merged yet that I were going to get folks to install today and then they merged it and updated yesterday which was wonderful. But now you can add fonts directly from Google Fonts and it'll download it to your install and set it up for you which is what we're going to do today. Or if you have a font from somewhere else either a purchased font or one you've downloaded from another service don't worry, but we'll talk about Google Fonts in a sec don't worry, it's all good, don't stress or you've downloaded from a service you'll be able to add it through create block theme. So those are the kind of features they're sort of very developer focused and it's about making the developer experience developing block themes better using the site editor. Okay, cool. So the version of I've got it installed and active already in my site so I'm not going to install an active edit now but make sure you have the latest version which is version 1.3.7 literally released yesterday because we're going to need this in a second. So once create block theme is installed and active it adds a menu item in your appearance menu called create block theme. You simply click on that and that'll take you through to the create block theme main page. And on the main page you can do a number of things but the focus of today is we're going to create a blank theme. So we're going to start with a boilerplate empty theme. So we're going to click on that and then you can just give your theme a name. So that for the purpose of today I'm going to call it global styles theme just for the sake of me being not creative at all. I don't need to add a description theme URI author or author URIs. I'm going to leave those blank but you're welcome to add them yourself. And we're going to generate that thing. While we generate, there's a couple of questions I'm going to check. It says is create block theme plugin all or nothing or can you select and turn features on or off? No, it's an all or nothing situation. So you either have everything enabled or everything off but it's the kind of plugin you wouldn't leave on a client site. You would use on a local site. So you could just switch it on use it and then turn it off again. I wouldn't worry about, you know the disabling and enabling of features because you would never put this on a client site somewhere. You would use it on local sites or on a staging environment. Or if you develop on a site you could just turn it off when you're done you don't have to leave it on. So that wouldn't slow things down. Gene says Google funds. Yes, we'll talk about Google funds in a second Dory and my color contrast are going to be awful. I'm warning you now. I'm a coder, not a designer. So the colors that I choose later are going to be awful. They're not going to be accessible and I like it like that. Cool. So once I've created my block theme you should see a little message here saying blank theme created head on over to appearance themes to activate your global styles theme or whatever you've called it. So if I click on themes here it takes me to my theme list and there is my global styles theme. Now one thing you'll notice is the theme doesn't have a screenshot and I can see that being a future feature of create block theme. But it's to add your screenshot through the WordPress dashboard. I might even just log that as an issue after the session. So if you activate that theme now it'll be activated. And if you click on the editor and that's where we're going to pause for a second to make sure everybody caught up you will then have a simple and basic as my microphone changed. My microphone has changed. Let me fix that. Oh, no, it's right. Okay, sorry. I just got a message to say my microphone changed. So you have a very basic theme it's using almost no styling, no settings. If you look at the list of templates it has one index template, that's it. It has two template parts, a header and a footer and then it has some very limited styling applied. So we're going to stop there for a second. If anybody's still catching up now's the time to let me know. Otherwise if you are there and you've got just your theme enabled and ready to rock and roll give me a thumbs up or give me a ready in the chat and then we will continue. Whatever was happening with your mic. I have no idea. Weird things were happening. Okay, so it looks like everybody's ready. Nobody's asked me to stop. So that's great. Right, so what I'm going to do now is I'm going to switch over to my code editor. My visual, I'm using visual code studio or visual studio code or whatever it's called for these sessions. I've got the learn, press my local sites already open and I'm going to show you what that create block theme generates. So if we go into themes and we go to global styles theme you will see here is our theme JSON file. So it has some settings at the top. So it's enabled appearance tools. It's set a content size and a wide size. It's enabled some default spacing units. It's enabled the default system font as a font that we can use. That's not something that's enabled by default you have to specify it. And then it's set up the template parts the header of the photo. That's all that it's got. So you'll see there's no styling whatsoever no colors predefined. The only colors it might be using is the core, the ones predefined by core but there's nothing predefined for this theme. In the templates as we said there is just one index template and all that literally has is a query loop block which just lists all the posts includes the header and the photo templates and then as you said the parts there's a photo template and there's a header template. So it's very, very basic. We're not going to be worrying about the templates and the parts today. We're going to be focusing on the theme to JSON file because that's how we create global styles. So to create a global style the one way you could do it is you could start specifying things in the right place in the right file and then you can test it out and all that kind of thing but to me that's kind of I wouldn't say some people might prefer to do that. I like the idea of seeing it in the editor seeing what the colors look like and then saving the changes. So if I, yes. Sorry to pause you. Would you, we've had a request could you make the text bigger in the code editor please if that's possible? It takes bigger in the code editor. Yes, I can do that. I think I can remember how. Is that better? Yeah. The person who asked me can you just confirm with me if that's good for you? It looks quite a bit larger to me. Yeah, it's good. Thank you. Awesome, no problems. I will add we're not going to be doing much coding today we're going to be doing more copy paste coding. So you weren't necessarily going to see what I'm doing but the one reason I did zoom out is because the theme JSON file can be quite long and it's difficult to see what's going on. So we might zoom in and out as we go. Okay. So in my site editor I can now start creating global styles and the way to do that is literally just to start making changes to the global styles and then saving them. So I'm just going to start with a very simple change. The first thing I'm going to change is I'm going to my global size is already open but if it's not open it up on your side and then I'm going to go into the typography settings and I'm going to change the text font family from default which is the default browser font to the system font that is defined in the theme JSON. So that's your local operating system font. So in my case because I'm working on a Mac it's going to now look like this depending on what operating system you're on Windows or Linux or whatever your font might look similar or slightly different but you should see that physical change of the font changing from one font to the other. If you don't please let us know but I'm going to continue along as we go. Then I'm going to click on this little arrow here to move out of the typography and I'm going to change the colors. The only colors I'm going to change is the background color and I'm going to go with pale pink because I love pale pink for messing around with sites. I'm the kind of person I'm one of those like old school men I won't ever wear pink but I'll definitely use it on a test site no problem. And then so I'm going to change the background to pale pink and then I'm going to change the text color to this purple because I just like the color of it and I'm going to change the links color to the red. So your links or your link at the top of the post will be a nice deep red. Your text will be this purple color. What do they call it? They call it vivid purple and your background will be pale pink. Cool. And then I'm going to hit set. So that's all I'm going to do is create my first style variation. Okay, is there anybody who's still doing that? No, not red, use burgundy. You're welcome to use whatever colors you want. I'll grab a sip of coffee and if anybody's still busy with this they can finish up and otherwise we'll win one. I'm lost already. How do we get into the styles editor? Okay, so let's take a step back. So to get to the styles editor, you start by enabling the theme you've just created. If you haven't created it, go to create block theme, click on create blank theme and give the theme a name and then hit generate. That'll create the theme for you. Then go to themes and enable the theme or activate the theme. Once that's done under appearance there will be a little editor menu item that's got beta next to it, you click on that and that takes you to the site editor. Once you're there, it's the circle with the black and white or dark color blue, I think it is in white on the top right there next to the three dots. You click on that and that opens up the styles editor and then from there you can start changing things. So Jeff, are you there now? Got it, okay. So then we change the topography. So under the little preview of what the styles look like change the topography, click on text and change the font family from default system font and then go back one step. So using this little arrow at the top here, you can go back and then go to colors and then you can click on each one of these three background text and links and you can change background if you'd like to to pale pink or whatever color from the list you choose. Don't change anything else, change the text. I've one for vivid purple and change the links to I've gone with vivid red. I'm going to petition create block theme developers to add a vivid pink and then I can do all the vivid colors. Okay, Jeff, are you happy with all of that? Can we move on? Excellent, okay. So once you've saved your global styles now I'm gonna switch back to WordPress TV in a second because a while back I did a workshop on saving I think it was global styles or something like that. What happens when you make theme changes and I'm just randomly remembering this now so that's what I'm gonna share with everybody but I actually did a session I'm gonna share the link for us Catherine. I did a session on where all this gets set. So if you wanna understand the details of all of that that's the video to watch later on but I just happened to know that global styles get stored in a table in the database in a WP post table and it'll be a custom post type called WP under store global styles. So to see that I'm going to use SQL buddy. You can use whatever you're using if it's PHP management or SQL buddy or whatever but I'm gonna pop on over to my plugins and I'm going to activate, it's already active so SQL buddies already installed an active and that creates a option in my tools menu called SQL buddy and I can then do some querying of the database. So the table I'm looking at is the WP posts table. So I just click on the post table and it brings up all the information and then I can use this little filter button here. That's a little funnel or a little don't know what that would be called and I'm gonna search for the post type. You don't have to do this if you don't want to but you're welcome to do it along with me and the post type is WP underscore global underscore styles. Now, if you're running this on a site where you've saved other global styles you're gonna have quite a few results. I should only have two. One is the 2022 styles that I was playing with earlier and the other one is the one for my global styles theme. There you see it is there. The post name is WP global styles global styles theme. I'm gonna zoom this in a little bit so that we can kind of unfortunately it takes it off screen but I'll move things around so that we can see what's going on there. So then you move the videos out the way. So there we go. It's the WP global styles global styles theme and the post type that we got there at the end is WP underscore global underscore styles. Correct. If we click on that one and we look at the actual post content of that record there we can see the JSON object of the custom style that we save. So it's just the changes that we made not the whole theme JSON file. So I'm going to copy that out now and I'm going to pop it into a file in Visual Code Studio and I'm just gonna stick this in the root of my theme for now just so that I have it somewhere. So I'm going to call this file user underscore changes.json. You're welcome to call it whatever you want. It doesn't really matter too much and I'm gonna pop that in and then I have a, I think Visual Code Studio has a shortcut on Mac. I don't know what it is on window. It's option command L which auto formats the code. I think there is a way you can do it in from the menu but I don't know what it is. So I apologize. Wonder if I can find it quickly. I think it is, you just see a selection. Not gonna find it now am I? I use the shortcut so much that I've forgotten where the code, I don't know where that is. But anyway, but this is what the code looks like. I'm gonna grab this and stick this in the chat if you wanna see it on your side as well, nice and formatted. It looks like I am sharing links with Gene only. So let me change that to everyone in the meeting. Zoom does this weird thing. There we go. Okay, Adrienne says she was able to select text, right click and select format. That's excellent. I use the shortcuts too much. So I've forgotten how it all works. So let's actually do that. So let's undo this and then let's select all the text and right click. And there we go, format document. Thank you, Adrienne. That was very helpful. Awesome stuff. So you can see here the changes that are being made. In the styles top level element, the topography font family is being set to the system font, which we expect. The color, the background is being set to pale pink and the text is being set to vivid purple, which we set. And the link elements, the color is being set to vivid red, which we set. So that we expect. The other things that are being added here is this is global styles user theme JSON is being set. And that's a WordPress thing that it knows that these are stored by the user and then version two is being set. Okay. So now we've got this, but now how do we turn this into a valid variation? So the way we do that is as follows. We start by creating a folder in our theme called styles. I think let me just validate that by checking the documentation. Yes, it's a styles folder. Right. So that's the first step. And the second step is we create a file in that folder and we give it a name. And I'm going to just call it pink just for the sake of giving it a name that's kind of, maybe we should call it John's weird pink or something. John's pink is fine, whatever. And it's a Dutch JSON file. And now I need to copy the entire original theme JSON over first, because I need all of that as well as the changes. So I open up my theme JSON file and I'm going to copy all of that over into John's pink. And then I'm going to have to copy over the individual changes. Now the advantage of the fact that we didn't do any settings related changes, we just made changes to styles. And if you look at the original theme JSON, there are no style set. It means we could just copy the whole style section and it'll just work. But now imagine if you'd made other changes, if you'd changed the content size and the white size, which you're gonna do in a second, which is inside of settings. And you would add at fonts, which is inside of settings. And you had made lots of different changes all over the place. It would be very complicated to grab all that different data and try and merge it. So I don't recommend doing it manually. We're gonna do it manually today just so we understand the theory behind how it works. But then I'm gonna show you a shortcut in great block theme in a second. Okay, so the changes I need to make, I need to copy over, in this case, the styles. And I can put this anywhere as a top level element. So I could put it above settings if I wanted to. I'm one of those people, I like to do my settings first and then my styles. Just because of that's how my brain works. Settings at the top, styles below that. So I'm going to go all the way down to the end of the settings. And if you're using Visual Code Studio, it's nice that you can click, if you put the cursor at the opening brackets of settings and then scroll down, it actually highlights the closing brackets. So you can never make a mistake of which one you're working with. If you're not, it's just above template parts. So just above template parts, I'm gonna hit enter and I'm gonna command V to paste. And there I've got my style ready and set up. So this was an easy one because I was just copying over styles. The template parts are the same, version two is the same, the settings are all the same from the original theme JSON. I haven't copied over the is global styles user theme changes because that is specific to when styles are saved in WordPress. So I don't need that for my global styles variation. Okay, I'm gonna pause there so that if you're doing this along with me and you want to catch up where you need to see the code you can do, I'm going to scroll down so that you can see where I've added it. So I've just inserted the whole style section below settings and above template parts. And if there are any questions around this, let me know in the chat. Okay, so while I'm paused here, Andrew says odd, I've created styles that just have the relevant bits I've changed and not the bits I've won from the JSON. So typically I've just played with colors. Yes, as far as I know, you can do it that way but the recommended way to do is to kind of carry everything over. And I'll talk about why that is in a second. I wouldn't say recommended. What I'm trying to kind of, the point that I'm trying to kind of make is if you do need to copy and paste things all over the place, it can get tricky if you need to carry things over from one to the other. But as far as I know, you can just do the styles in the theme JSON and that should work as well. So that's a good point Andrew. Jean's asked me to pause a bit so Jean will wait for you. If anybody else has any questions or anything, they're welcome to ask them otherwise you're welcome to catch up. But once Jean gives us a thumbs up, then we'll move on. I'm gonna have some more coffee. I really shouldn't drink coffee after 4 p.m. my time, but I do anyway. Linda says, I'm so proud. The other day I copied a custom block from one side to the other side. That's really cool. I've seen that as well. Andrew says, okay, I just wanted to be sure I wasn't missing something. Good point. Adrian says, after 4 p.m. Yes, I'm rather brave. If it's any consolation, and I don't know if this is related, but Tuesdays and Thursdays are the days that I go for a run in the morning. So I'm usually pretty tired anyway. So the coffee balances that out. So I don't struggle to fall asleep on a Tuesday or a Thursday. If that makes sense. I'm getting hot now, so I'm gonna take my sweats off as well and while we wait for Jean. It's the coffee drinking that adds to my increased heat. Right, so Jean's ready, so we're good to go. So we're gonna play around with John's pink for a second, because I wanna test a few things out while I'm all online. If we now switch back over to our WordPress site and we go back to the editor, we should now see our style sitting in the styles list. And you'll notice that there's also the styles that we apply to the site, which is a little bit of a problem, but there's the Sprals styles option. So if we click on that, then we've got our defaults, which we can apply, and we've got our style that we set. But you'll notice the site is currently still got the changes we made, and that's because we saved them to the database. So you have two options here. You can either go into SQL Buddy and delete that record, or you can click on the little three dots here next to the styles beta option, and you can say reset to defaults. So that'll change your theme back to the default settings as per the code that you have specified. So let's do that. Changes everything the way we need it, which is perfect. So let's save that. And now we have the two styles sets. We've got our defaults style, which is ready to rock and roll. And now we can apply the style that we set, or we can go back here. Now, what's interesting is what this does when you save it is it saves the whole style to the database. So I wanna show you what I mean by that. So if I hit save here, and I say, yes, I wanna save these custom styles, and then I'm gonna go back into the database. Now I've gotta move the zoom windows again. If I go into SQL Buddy and I go to posts, and I thought to posts by post type to the peak global styles, and I apply that. There you will see it's taken that entire styles with everything, with the settings, with everything else. Let me stick this in an editor so we can see it. So I'm gonna overwrite my user changes here, and I'm gonna use Adrian shortcut so we can see that code. There we go. So it's got the topography settings, it's got the color settings, it's got the layouts and content. Everything that I specified in my style variation, except for template parts and any custom templates that are set is there. So that means if the user's applying it, they're not applying it from the file, it actually stores it to the database. So it's just something to be aware of if your users are working with these things. Cool, what I'd like to do now is I'd like to just play with this a little bit. So I'm going to pop on over here and I just wanna show you folks something. We go back into the editor and I'm gonna just reset everything. So it's reset to default, that's perfect. And then I'm gonna go back into my John's pink and I'm just going to save the styles. I'm gonna take out the settings and I'm just gonna change the changes to save the styles in the variation. So that's literally just copying the styles over. Now my understanding, I'm not 100% sure of this but my understanding is I do need to include the version which I'm going to do for now anyway and we might be able to remove it but I'm not gonna do that right now. So I'm gonna save that and I'm gonna refresh my editor here and you will see that if we click on Brass styles, the pink style is still there. So you can do it with everything from theme JSON or just the changes you need. Either one works. Okay, Andrew says, is the style of hover tool tip something new? Are you meaning when you hover over the style like this? I don't know. I only started playing with verbal styles recently so it's always on like this for me but yeah, that's what it does too. Okay, so a couple of things. The one thing that you might want to do is you might want to have a nicer looking name for your style. You don't get that on your local site. I don't know what the answer is to that Andrew. It might be a new thing. I don't know. You might want to, so here you can see it says defaults, it's nicely capitalized. You might want to give it a different title. Maybe, maybe John's pink is not the title but I want to give it. Oh, that's interesting. Folks are getting similar bugs. Okay, that could be some blogging or theme setup. I don't know. If you do find it and track it down Catherine, please do log it. So the one thing that you can add to your custom style variation is you can add a title field. So at the top of John's pink, I'm just going to add title, I think it is. This may or may not work because I haven't actually tested this out. And I can say John's pink. No, and I make sure that it ends in a comma. And if I save that and pop back over here and refresh my editor, okay, that didn't work. So in one of these documents, it talks about how you can set that title. I'm going to find that very quickly in my resources. So it was global styles variations. I think I've set it incorrectly. Version two title, that is just title. Title can be added to the digital JSON file, the users, da, da, da. All right, so according to this, it should just be title before the styles. I wonder if it's because I have the version two. Let's do that. Oh, it's title. It's lowercase title, of course, wouldn't be uppercase. Okay, so let's move version two back where it was. Where was I? Can't figure out my shortcuts. Let's put that there, and it's lowercase title. So I was right, I just hadn't spelt it correctly. John's pink style, there we go. It said like that. So just lowercase title, in quotes, double quotes, colon and then my sort of human readable version of the title with a comma at the end so that it's added and then let us switch back to the editor and let us refresh. And now when I browse my styles, I should see John's pink style. So it's a little bit more human readable for my users and I can give it a much more nice descriptive name. So I could keep the file name very simple. I could just call it pink if I wanted to. I could call it base contrast, whatever and then give it a better name to the user. Okay, can you go back to pasting the code from the DB table road to the new JSON file? I'm unsure of the opening and closing brackets, et cetera. Okay, so the two ways of doing it is either you can copy the whole theme JSON. So I'm gonna copy that now. And in your style, you can pop in, I need to refer to user changes because user changes changed, there we go. So that's the one we copied from the database. So you can paste your whole theme JSON style in there. And then what it was, I grabbed this whole section of code out of here but I didn't take the top level brackets. I just took the styles section, open their closing and closing there. And then in my John's pink, just before template parts, I hit enter to put a space in and I popped it in there. But as Andrew pointed out, we can just do the style itself. We can actually just take the whole style. So you could just take the whole changes like this and just as it is, you can just paste it in here like that and remove this global styles user theme JSON element. And that would also work. So either way would work. Now, Rob and I don't wanna go too much into detail on that because I wanna show you an even easier way to do all this in a second. So I don't wanna dive into that too much right now but hopefully you're able to see what happened there. Okay, so let me just give John's pink a title again. So we're back to, John's pink style. Ah, good grief. So what happens when you have big fingers? Okay, so there's my style set, British rock and roll. Okay, I don't need this user changes following me more. So I'm going to delete that from my site, from my theme, should I say? So let's just clear that out. There it is. Okay, so now I've got my pink theme. Sorry, my pink style, I've got my original theme JSON, good to go. But that's kinda clunky, as I said, there is an easier way. So the easier way is to use create block theme. Now what create block theme has, if we go back to the dashboard and we go to the create block theme option, is it has this create style variation option. So once you've saved your changes in the editor, the changes you wanna make, then you come back here and you use this option it'll create the new variation for you. So let's do that. Before we do that, I want you to install a theme. Now, I know everybody doesn't like Google Fonts, but we're going to install a Google Font today and I'm gonna show you in a second why, because it's actually going to install it into the theme. We're not gonna be pulling it from a browser, a server somewhere. So it's not gonna be sending your user's data, but I don't have any other fonts that I can use. So if you don't like Google Fonts, I totally understand, but just for today, bear with me while we do it. The other option in create block theme is this manage theme fonts option. So if you're following, I'd like you to go there now. There's an add Google Font option or an add local font option. Okay, so the local font is if you have fonts that you've purchased or downloaded from other services other than Google Fonts. If you're gonna use a Google Font, you click on the add Google Font option and then you select a font from the list. I was playing around with fonts the other day and I found this font that I like called Island Style. So that's the one that I'm going to use today. So if you just click on the select and go Island Moment, should I say. Now it's a long dropdown. So you want to scroll there as well. But that's the font that I want us to install today or if you want to follow along to install it because we're gonna create an Island theme. So I'm gonna go with Islandy colors. And if you click on the only option available which is the regular variant and then you say add Google Fonts to your theme, it will download the Google Font file to your theme and it will set it up in your theme JSON file. So while you're doing that, I wanna show you what this looks like. So now in my theme, there's suddenly an assets directory and inside of assets, there's a font directory and inside the font directory is downloaded the island hyphen moments underscore regular.tgfo. So it's downloaded the file locally to the theme. So there's no connecting to servers to get the theme. It's also if we have a look at the theme.json down the bottom here, it's set up the typography setting. Oh, sorry, it's added to the typography setting. It's added a new font face with a font family called island moments, font style of normal, font weight 400 with the source, the path to the file and then it's set up the font family and the slug. And the slug is what's used to apply that font to different places. I'm gonna pause there and just make sure that everybody's caught up. If anybody's still busy catching up, give me a slow down or a pause. Otherwise, I'm gonna sip a coffee again and then we'll move on. I need to think of a better way to say a sip of coffee. I need to think of a break or something, some two. If you've got any ideas, hit me up on Twitter. Lifeblood. Nice. Lifeblood. Adrienne, I can see you and I are gonna get along like awesome, but. Linda's asking if there are two plugins, create block theme and manage theme fonts. I thought it was just the create block theme. It's all in, yeah. It's all in create block theme in version 1.3.7. So it's all part of the same plugin. And that's how I say I can see these kind of cool features like adding fonts or create. I can see a future where you might be able to create a pattern using create block theme. One we did in the workshop previously, we had to create it ourselves. All of these things that you still have to do manually, I can see create block theme picking those up, which is really exciting because I just love things that automate things for you. Okay, so it seems everybody is on board, everybody's up to speed. That's great. So now I have island moments installed. So now I wanna create a pattern around island moments. So I'm gonna switch back over to my editor and I'm going to make sure the defaults is set, which it is, if it isn't, I would go back into the styles and I would just say reset to defaults. Yes, unfortunately the WordPress.com hosting on the lower tiers don't allow adding plugins. So if you want to do this, you'd need to do it on a local environment or consider upgrading to a paid environment or you could use something like InstaWP to test this out. But unfortunately, yes, on the lower end of WordPress.com tiers, I think it's the free and the personal version, they don't allow insulting the plugins. Okay, so now I'm gonna create my island style. So I'm gonna start with the topography and I'm gonna change the text to the island moments text. That's the first step and you can see it's already changed, but it's really small. I want it a little bit bigger. I love the fact this image ties in with the theme style. I didn't pick this image, it just happened to come from the faker press I was using earlier, but I love the fact that it goes along with it. Jeff says, sorry, I don't see how the downloaded theme got added to my JSON. So Jeff, you should see if you go to a theme JSON, the font, under the topography section, you should see a new font face for island moments. If you don't see that, then it hasn't been able to download it for some reason. Do you wanna just check that and let us know? If you're not seeing it there, the other option is to try it again. It is downloaded, but not in my JSON. So the only reason I could think that might happen is if for some reason your file permissions are not 100% and the plugin can't write to your theme to JSON file. So if that is the case, what I'm going to do is I'm gonna copy out this code for you. So all you would do is you would add this over here underneath the system font option. So I'm gonna paste this code in the chat for you so you can grab it. Make sure to add the comma after the, so before it got added to your theme, it would look something like that. So it would be under, sorry, the video windows in the way again, it would be under settings and then under topography, you'd have font families in the system font setup. It doesn't change in the main preview window. I see it in my dropdown, but it doesn't change in the main preview window soon. So that could be one of two things. That could either be a caching issue in your browser. Depending on what browser you use, it might be cached. So what I would recommend, if you're not seeing things a hundred percent, is if you open up developer tools, now depending on how your developer tools works, you can either go into settings, sorry, tools, more tools, and open up developer tools. There's keyboard combinations. It's F12 on certain browsers. And then if you're using a Chrome based browser, once you've got that open, you can right click on the refresh and say empty cache and hard reload. Different other browsers have different ways of doing it, but that could be a reason why that doesn't work. Okay, I'm going to continue along if I'm still getting stuck, leave a note in the chat and we'll get back to where we take a break. But for now, what I'm going to do is I'm going to, I'm going to change my font size because I want my font size to be a little bit bigger. So I'm going to make it 20, no, not big enough, 36. Yes, that's my bit, nice and big. I want nice and big in both. So I'm going to leave that like that. Then I'm going to go over to my colors and I'm going to pick some islandy colors. So for the background, I'm going to go with blue. For the text, I'm going to go with green, maybe not because that just looks awful. Actually, I'm going to leave it like that, why not? And for the links, I'm going to go with this even lighter green. So it's just going to look horrible. Please don't build sites that look like this. But I'm just kind of making the point of the things that you can change. Yes, that's absolutely impossible to see. Maybe I should do some better colors. Make it actually possible to see things. So let's make it, let's make the background green. Let's make the background the light green and then let's make the text that blue. No, that's the same possible. That's a bit better. And then let's make the links red. There we go. Now, at least at least there's some contrast going on now. I should be able to see that. Catherine says, try white. We could try white. What does white look like? No, I prefer it. Anyway, whatever. It doesn't matter. Today is not a design day. Today is how variations work. So I'm going to save that. Okay. So as we know, that's been saved for the database. Now, without the color contrast, unfortunately it's not the focus of today. If you want to make it whatever color you want, that's cool, but that's not the focus for today. I'm not an expert on color contrast. That's why I choose horrible colors. But if you, I don't want you to learn from me about how to choose colors. That's for sure. I'm not a color person. So let me, again, let me do it this way. Let me, should we make the links white? Is that better? Is that a better color? If we make the links white? And does that work for you, Em? If we make the links whites in the text blue? Not really better. Any suggestions? I'm going for a weird island color scheme. So if you have any suggestions on what colors I should choose, that would be helpful. I don't know anything about color changes and contrasts. I use these sessions just as examples. So learning coloring, learning color contrast really would not be recommended. Text shadows with black. I wouldn't even know how to do that. I'll tell you what, let's do it this way. Let's go here and let's change the background to white. And I'm going to leave the text blue and I'm going to make the, I'm going to just make it black. Just so we have some color changes. Okay, so we've got a black background and we've got dark colors. So once we've made all our changes we can now save this to our custom styles. And as we know, this saves it to the database. That's what we know. But now we're going to use create block theme to save this variation for ourselves. So if we flip out of here and we go to the dashboard and then we go into create block theme there is this create style variation option at the bottom here. And what this essentially does is it does everything we just did manually for us, which is great. So I'm going to give it a variation name. I'm just going to call it island for the sake of giving it a name and I'm going to hit generate. And what that'll do, that'll create my variation. It creates it in the location for me. It gives it a file name. And if we hop over to our editor we should see there is island there. And you'll see what it's done is it's copied over everything. It's copied the original theme JSON settings over. It's copied the fonts over. It's copied the styles, the color, all of those kinds of things. What it hasn't done is set the title. So that's just the one thing we'll have to do manually. So what I'm going to do right at the top here is I'm just going to give it the title. And I'm going to call it, what do we make this island? I'm trying to call it island theme just so we have an English title there. Sorry, here we go. Property title is not allowed. That's interesting. I wonder why that is. According to what we just did earlier, there's a lot. Let's see if that works. So if we pop back over to the browser and go back into the editor, now you'll see it's reset the site back to default. And if we click on browse styles, there's our default. There's island theme ready to go. And there's John's pink theme. So that's a lot easier and quicker and less stress than copying files all over the place and doing all kinds of things. So that's why I love using create block theme. It does so much for you, which is wonderful. And that's how you can very quickly create style variations. As Emma's pointed out, make sure they are accessible. I am not an accessibility expert. I'll admit that I work with folks who are. I was hoping to do some interesting colors today but that didn't work out. So I apologize to anybody who took offense to that. But I was going for a weird island theme. But that's how you can create them in the editor. You can choose your settings. You can choose whatever you need to do. And then you can just hit save and then using create block theme, you can just write that to your file. Does anybody have any questions? I think Linda does have a question. It was a conversation around CSS. Yeah, I don't know about shadows myself. Linda says, so to recap, let me know if I got this right. You add theme, click create block theme and then make changes and then go to use create styles variation. Exactly Linda. So you make your changes in the editor, your style changes specifically, save them and then you go to create block theme and use the, let me show you in a second. Use the create a style variation option, give it a name, hit generate and it'll write those changes to the file for you. Is our new theme a child of 2022? No, this is still the base theme that created. So if you go back to your themes list, we're still working in that new theme we created. We've just created variations for that theme. So now you can use, and you can use create block theme for this. You can go into create block theme and you can say export this theme and it'll export all the theme files and the variations we created into as a file that we could then install on the client site. So that's another reason why I like using create block theme. Any other questions around global styles variations, how to use, how to create them, how to save them, anything else around that before we wrap up? Okay. Felicia seems the option to create child theme. That's excellent. Linda says, and the changes are protected from updates. So as we know, Linda, with any kind of themes we create, if we want to protect changes from updates, we need to create a child theme for that. So that would be a separate process. So what you could do, if you wanted to have the global style variation in a child theme, you could do that and you could have your base theme installed here and then your variations over there and you can make changes. There's all kinds of options. But if you're expecting the user not to make effects to those changes, then rather build a child theme. Jeff says, wondering why the Google font is downloaded as TTF and not WAF? That I don't know. You'd have to speak to the developers of the plugin. I think it was just how they started with it. And I'm sure there will be improvements over time. If you want to log that as an issue on that repository, I can send you the link for that. So it's github.com, wordpress, create lock theme. And you can recommend to either add the option to download the WAF file. I believe the WAF file has lower formats and improves things. Or you can ask why that choice was made. I'm going to paste that link in the chat here. But yeah, I don't know why the choice was TTF. Maybe it was just, they took the first one available. I can't answer that one. Andrew says, Google fonts does not support WAF. That might be a reason. I know there's a Google web font helper, sorry, where you can download the format. I was using it the other day, but maybe direct from Google fonts does not support it. So that is possible. Cool. Okay. Well, that's my bit. That was creating global styles variations in a nutshell. As I mentioned, you can do it manually if you want to without create block theme. It is possible, but I recommend using create block theme because it does all the work for you. You can just work in the editor, work in your wordpress site, generate and generate it for you. And then look forward to more developer goodness in create block theme in the future. Thank you all for joining me today. Thank you Catherine for co-hosting. There is a resources slide at the end of my slides. It's got all the links. Most of the links we discussed today. I will update this with some of the other links that I added to WordPress TV before I uploaded to WordPress TV. But thank you all for joining me. There's nothing to see all today and enjoy the rest of your Thursday and the rest of your week.